JavaScript中Document对象详解与应用
需积分: 15 2 浏览量
更新于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
我的内容管理
展开
最新资源
- NIST REFPROP问题反馈与解决方案存储库
- 掌握LeetCode习题的系统开源答案
- ctop：实现汉字按首字母拼音分类排序的PHP工具
- 微信小程序课程学习——投资融资类产品说明
- Matlab犯罪模拟器开发：探索《当蛮力失败》犯罪惩罚模型
- Java网上招聘系统实战项目源码及部署教程
- OneSky APIPHP5库：PHP5.1及以上版本的API集成
- 实时监控MySQL导入进度的bash脚本技巧
- 使用MATLAB开发交流电压脉冲生成控制系统
- ESP32安全OTA更新：原生API与WebSocket加密传输
- Sonic-Sharp: 基于《刺猬索尼克》的开源C#游戏引擎
- Java文章发布系统源码及部署教程
- CQUPT Python课程代码资源完整分享
- 易语言实现获取目录尺寸的Scripting.FileSystemObject对象方法
- Excel宾果卡生成器：自定义和打印多张卡片
- 使用HALCON实现图像二维码自动读取与解码
