JavaScript中Document对象详解与应用
需积分: 15 161 浏览量
更新于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-12-10 上传
2020-10-23 上传
2020-10-22 上传
2020-10-22 上传
2020-10-24 上传
2010-08-19 上传
2008-02-14 上传
chenhao19860319
- 粉丝: 1
- 资源: 4
我的内容管理
展开
最新资源
- StarModAPI: StarMade 模组开发的Java API工具包
- PHP疫情上报管理系统开发与数据库实现详解
- 中秋节特献：明月祝福Flash动画素材
- Java GUI界面RPi-kee_Pilot：RPi-kee专用控制工具
- 电脑端APK信息提取工具APK Messenger功能介绍
- 探索矩阵连乘算法在C++中的应用
- Airflow教程：入门到工作流程创建
- MIP在Matlab中实现黑白图像处理的开源解决方案
- 图像切割感知分组框架：Matlab中的PG-framework实现
- 计算机科学中的经典算法与应用场景解析
- MiniZinc 编译器：高效解决离散优化问题
- MATLAB工具用于测量静态接触角的开源代码解析
- Python网络服务器项目合作指南
- 使用Matlab实现基础水族馆鱼类跟踪的代码解析
- vagga：基于Rust的用户空间容器化开发工具
- PPAP: 多语言支持的PHP邮政地址解析器项目
