节点的属性
| 属性 | 说明 |
|---|---|
| nodeName | 返回给的节点的名称；字符串 |
| nodeType | 返回给定节点的类型；整数；1表示html元素，3表示文本字符串 |
| nodeValue | 返回给定节点的当前值；元素节点为null，文本节点为文本字符串 |
节点操作
除了通过DOM树中的父子、兄弟关系获取节点外，还可以通过 JavaScript 中的DOM接口来获取、创建、修改、或删除节点。
- 创建节点和插入节点（增）
- 创建节点：
var elementNode = document.createElement(tagName) - 插入节点：
- 追加方式插入，在
element的子节点队列尾部增加元素aChild（aChild需要先被创建），var aChild = element.appendChild(aChild); //返回值为元素追加的元素 - 在
element的指定子节点前插入节点var achild = element.insertBefore(nodeName, referenceChild); //返回值为插入的元素
- 追加方式插入，在
-
删除节点（删）
删除element的子节点中指定的child节点，返回删除的节点元素
var child = element.removeChild(child); -
更新节点内容（改）
- 修改/获取节点及其后代节点的文本内容
-
element.textContent，获取element元素及其后代节点的文本内容 -
element.textContent = “Tom”，设置element元素的文本内容为Tom - ie9以下不兼容，使用
element.innerText替代，方法类似。
-
- 以HTML的形式修改代码
-
element.innerHTML = "<h1>...</h1>"，重新写页面的HTML代码（去除之前添加的<em>事件</em>和<em>样式</em>），仅建议用于新节点创建，且非用户输入，否则会有安全风险，内存泄漏等问题
-
- 修改/获取节点及其后代节点的文本内容
-
获取节点（查）
- 返回指定 ID 的元素，
var element = document.getElementById(ID) - 返回指定元素的子节点内元素为
tagName的所有元素的数组，var collection = element.getElementsByTagName(tagName)，返回值是动态数组，将tagName替换为'*'可以获得指定元素的所有后代元素 - 返回包指定元素的子节点内类名为
className的所有元素的数组，var collection = element.getElementsByClassName(className) - 返回指定元素的子节点内选择器为
selector的所有元素的数组，var list = element.querySelectorAll(selector),list不同于collection，list为静态的获取时的值，collection是动态变化的 - 对比：
| 方法 | 只能被document使用 | 返回值唯一 | 动态返回值 |
|---|---|---|---|
| getElementById | ✔️ | ✔️ | ❌ |
| getElementsByTagName | ❌ | ❌ | ✔️ |
| getElementsByClassName | ❌ | ❌ | ✔️ |
| querySelectorAll | ❌ | ❌ | ❌ |
思考题
-
ie9以下版本不兼容
getElementsByClassName()方法，考虑如何兼容？
节点操作-16:14 -
element.children能够获取元素的元素子节点，但是低版本的ie不支持，如何在低版本的ie上兼容类似的功能？
网友评论