JavaScript DOM操作：Window.document对象完全指南

"JavaScript——DOM操作——Window.document对象详解" 在JavaScript中，DOM（Document Object Model）是用于处理网页内容的标准接口，它允许程序和脚本动态更新、添加、删除和改变HTML元素。本文主要讲解了如何使用Window.document对象进行DOM操作。 一、找到元素 在DOM操作中，定位页面上的特定元素是非常关键的。Window.document对象提供了多种方法来查找元素： 1. `document.getElementById("id")`: 通过元素的唯一ID查找，返回的是单个元素。 2. `document.getElementsByName("name")`: 根据name属性查找，返回的是一个NodeList集合，因为可能有多个相同的name属性。 3. `document.getElementsByTagName("name")`: 根据标签名称查找，返回的也是NodeList集合。 4. `document.getElementsByClassName("name")`: 根据类名查找，同样返回一个NodeList集合。 例如，如果你想找到页面上id为"me"的元素，你可以这样做： ```javascript var a = document.getElementById("me"); ``` 这将把找到的元素存储在变量`a`中，你可以进一步对这个元素进行操作。 二、操作内容 找到元素后，我们可以通过不同的属性和方法来读取或修改它们的内容。 1. 非表单元素： - 获取内容： - `innerHTML`: 包含元素内部的所有HTML代码和文本。 - `innerText`: 只获取元素内的纯文本内容。 - `outerHTML`: 包括元素本身及其内部的所有HTML代码。 - 设置内容： - 通过`innerHTML`可以替换元素内的所有内容，例如： ```javascript a.innerHTML = "<font color='red'>hello world</font>"; ``` - 清空内容： - 将`innerHTML`或`innerText`赋值为空字符串即可清除内容。 2. 表单元素： - 获取内容： - 对于`<input>`元素，可以通过`value`属性获取其值。 - 对于`<textarea>`，使用`value`或`innerHTML`都可以获取其内容。 - 设置内容： - 修改`<input>`或`<textarea>`的值，只需改变`value`属性的值，如：`t.value = "内容改变"`。 3. 其他知识点： - 当在`<a>`标签的`onclick`事件中返回`false`时，可以阻止默认的链接跳转行为，如： ```html <a href="http://www.baidu.com" onclick="return false;">转向百度</a> ``` 这些DOM操作方法是JavaScript编程中不可或缺的部分，熟练掌握它们能让你更有效地操控网页内容。在实际应用中，你还可以结合其他DOM方法，如`appendChild`、`removeChild`等来实现更复杂的动态效果和交互。