【前端】-029-DOM编程-节点操作

节点的属性

属性	说明
nodeName	返回给的节点的名称；字符串
nodeType	返回给定节点的类型；整数；1表示html元素，3表示文本字符串
nodeValue	返回给定节点的当前值；元素节点为null，文本节点为文本字符串

节点操作

除了通过DOM树中的父子、兄弟关系获取节点外，还可以通过 JavaScript 中的DOM接口来获取、创建、修改、或删除节点。

1. 创建节点和插入节点（增）

• 创建节点：
  var elementNode = document.createElement(tagName)
• 插入节点：
  • 追加方式插入，在element的子节点队列尾部增加元素aChild（aChild需要先被创建），var aChild = element.appendChild(aChild); //返回值为元素追加的元素
  • 在element的指定子节点前插入节点var achild = element.insertBefore(nodeName, referenceChild); //返回值为插入的元素

2. 删除节点（删）
   删除element的子节点中指定的child节点，返回删除的节点元素
   var child = element.removeChild(child);

3. 更新节点内容（改）

   • 修改/获取节点及其后代节点的文本内容
     • element.textContent，获取element元素及其后代节点的文本内容
     • element.textContent = “Tom”，设置element元素的文本内容为Tom
     • ie9以下不兼容，使用element.innerText替代，方法类似。
   • 以HTML的形式修改代码
     • element.innerHTML = "<h1>...</h1>"，重新写页面的HTML代码（去除之前添加的<em>事件</em>和<em>样式</em>），仅建议用于新节点创建，且非用户输入，否则会有安全风险，内存泄漏等问题

4. 获取节点（查）

• 返回指定 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	❌	❌	❌

思考题

1. ie9以下版本不兼容getElementsByClassName()方法，考虑如何兼容？
   节点操作-16:14

2. element.children能够获取元素的元素子节点，但是低版本的ie不支持，如何在低版本的ie上兼容类似的功能？