JavaScript——DOM操作——Window.document对象详解

一、找到元素：     docunment.getElementById(“id”)；根据id找，最多找一个；     var a =docunment.getElementById(“id”);将找到的元素放在变量中；     docunment.getElementsByName(“name”)；根据name找，找出来的是数组；     docunment.getElementsByTagName(“name”)；根据标签名找，找出来的是数组；     docunment.getElementsByClassName(“name”) 根据classname找，找出来的是数组； 二、操作内 JavaScript DOM操作是Web开发中不可或缺的一部分，主要用于动态更新网页内容和与用户交互。Window.document对象是JavaScript访问HTML文档的主要接口，提供了丰富的API用于查找、修改和操作页面元素。 一、找到元素： 1. `document.getElementById("id")`：通过元素的唯一ID查找，返回匹配的第一个元素，如果找不到则返回null。 2. `document.getElementsByName("name")`：根据name属性查找，返回一个NodeList集合，可能包含多个元素。 3. `document.getElementsByTagName("name")`：根据标签名查找，返回一个NodeList集合，包含页面上所有指定标签的元素。 4. `document.getElementsByClassName("name")`：根据class名查找，返回一个HTMLCollection集合，包含所有class名匹配的元素。 二、操作内容： 1. 非表单元素： - `innerHTML`：获取或设置元素内部的HTML代码，包括文本和子元素。 - `innerText`：仅获取元素内的纯文本内容，忽略HTML标签。 - `outerHTML`：获取或设置元素及其内部HTML，包括元素本身。 2. 表单元素： - `value`：获取或设置输入元素（如input、textarea）的值。 - `innerHTML`：对于`<textarea>`，可以获取或设置其内部的HTML文本。 三、操作属性： 1. `setAttribute("attrName", "attrValue")`：设置或添加元素的属性，如`id`、`class`等。 2. `getAttribute("attrName")`：获取元素的属性值。 3. `removeAttribute("attrName")`：移除元素的指定属性。 四、实战应用示例： 1. 检验答案：通过比较用户输入与预设答案，实现答题功能。 2. 倒计时按钮：利用`disabled`属性，实现在特定时间后启用按钮的功能。 JavaScript DOM操作在实际开发中具有广泛的应用，例如动态加载数据、响应用户交互、实现动画效果等。熟悉并掌握这些基本操作是提升网页动态性与用户体验的关键。通过熟练运用`getElement*`方法、属性操作以及事件处理，开发者可以实现复杂的网页交互逻辑，让静态的HTML页面变得生动起来。