JavaScript中Document对象详解与应用
需积分: 15 21 浏览量
更新于2024-09-21
收藏 2KB TXT 举报
"JavaScript 中的 document 对象技术总结"
在 JavaScript 中，`document` 对象是浏览器提供的一个全局对象，它代表了当前打开的 HTML 文档。`document` 提供了丰富的 API，允许开发者对页面内容进行操作和交互。本摘要将详细介绍 `document` 对象的一些常用方法和用法，并通过实例进行解析。
1. 写入和输出内容
- `document.write(str)`：在文档加载时，向 HTML 文档中写入字符串 `str`。如果在文档完全加载后调用此方法，会清空整个文档并重新写入。
- `document.writeln(str)`：与 `document.write` 类似，但会在写入内容后追加一个换行符。
例如：
```html
<!DOCTYPE html>
<html>
<head>
<script>
document.write("欢迎来到");
document.writeln("我的网站!");
</script>
</head>
<body>
</body>
</html>
```
2. 元素获取
- `document.getElementById(id)`：根据指定的 `id` 获取元素。返回的是匹配的首个元素，如果未找到则返回 `null`。
- `document.getElementsByName(name)`：返回一个包含所有 name 属性等于 `name` 的元素集合，是一个 NodeList 对象。
- `document.getElementsByTagName(name)`：返回一个包含所有 tag 名称等于 `name` 的元素集合，也是一个 NodeList 对象。
例如：
```html
<input type="text" id="textBox1">
<button onclick="alert(document.getElementById('textBox1').value)">点击显示文本框内容</button>
```
3. 事件处理
- `element.onclick = function`：将函数赋值给元素的 `onclick` 属性，可以实现点击事件的处理。
- `window.event.srcElement`：在 IE 浏览器中，可以使用此属性获取触发事件的元素。
- `event.target`：在非 IE 浏览器中，可以获取到触发事件的元素。
例如：
```html
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').onclick = function() {
alert('按钮被点击了');
};
</script>
```
4. 创建和修改元素
- `document.createElement(tagName)`：根据指定的标签名创建新的 DOM 元素。
- `element.appendChild(node)`：将 `node` 添加到 `element` 的子节点列表末尾。
- `element.innerText` 和 `element.innerHTML`：分别用于设置或获取元素的纯文本内容和 HTML 内容。
例如：
```html
<div id="divMain"></div>
<input type="button" value="添加按钮" onclick="showit()" />
<script>
function showit() {
var divMain = document.getElementById("divMain");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "新按钮";
divMain.appendChild(btn);
}
</script>
```
5. 表格操作
- `tableId.insertRow(-1)`：在表格的最后添加一行。
- `row.insertCell(-1)`：在行的最后添加一个单元格。
- `cell.innerText`：设置单元格的文本内容。
- `window.history`：提供了浏览历史的相关操作，如 `back()`、`forward()` 和 `go()` 方法，用于前进、后退或跳转到特定历史记录。
例如：
```html
<table id="myTable"></table>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerText = "新行数据";
}
</script>
```
以上就是 `document` 对象的一些主要技术和用法，它们是 JavaScript 与网页交互的基础，掌握这些可以帮助开发者更好地操控网页元素，实现动态效果和交互功能。
2012-11-05 上传
2022-07-02 上传
2020-09-06 上传
2020-10-23 上传
2020-11-22 上传
2020-10-22 上传
2020-10-24 上传
2008-02-14 上传
2010-08-19 上传
chenhao19860319
- 粉丝: 1
- 资源: 4
我的内容管理
展开
最新资源
- 俄罗斯RTSD数据集实现交通标志实时检测
- 易语言开发的文件批量改名工具使用Ex_Dui美化界面
- 爱心援助动态网页教程：前端开发实战指南
- 复旦微电子数字电路课件4章同步时序电路详解
- Dylan Manley的编程投资组合登录页面设计介绍
- Python实现H3K4me3与H3K27ac表观遗传标记域长度分析
- 易语言开源播放器项目：简易界面与强大的音频支持
- 介绍rxtx2.2全系统环境下的Java版本使用
- ZStack-CC2530 半开源协议栈使用与安装指南
- 易语言实现的八斗平台与淘宝评论采集软件开发
- Christiano响应式网站项目设计与技术特点
- QT图形框架中QGraphicRectItem的插入与缩放技术
- 组合逻辑电路深入解析与习题教程
- Vue+ECharts实现中国地图3D展示与交互功能
- MiSTer_MAME_SCRIPTS:自动下载MAME与HBMAME脚本指南
- 前端技术精髓：构建响应式盆栽展示网站
