DOM树操作

DOM 操作

访问与树关系（节点）

1. 绘制 DOM 树: childNodes, attributes
2. 从一个中心元素访问其所有的直系亲属元素
   • 访问父节点: parentNode
   • 访问上一个兄弟节点: previousSibling
   • 访问下一个兄弟节点: nextSibling
   • 访问第一个属性节点: attributes[ 1 ]
   • 访问第一个子节点：fristChild 或 childNodes[ 0 ]
   • 访问最后一个子节点: lastChild 或 childNodes[ childNodes.length - 1 ]

方法与功能

核心内容就是利用 增删改查

查询

就是获取元素

1. 标准 DOM API
   • doucment.getElementById
   • document.getElementsByTagName
   • document.getElementsByName
   • document.getElementsByClassName
   • document.querySelectorAll
2. 亲属访问
3. 属性获取
   • getAttribute
   • getAttributeNode

增加

1. 创建
   • document.createElement 创建元素节点
   • document.createTextNode 创建文本节点
   • document.createAttribute 属性节点
   • innerHTML
   • innerText
   • cloneNode()
2. 加入
   • appendChild 追加到结尾
   • innerHTML
   • insertBefore 用法？将某元素插入到每一个元素的前面

     父元素.insertBefore( 新元素, 旧元素 );
     // 将 新元素 插入到 旧元素 的前面
     

3. 其他
   • style的操作
   • setAttribute(属性名,属性值)

删除

1. 输出元素
   • removeChild
   • removeAttributeNode

修改

1. 修改节点
   • 删除节点再加入
2. 修改样式
   • style.XXX = VVV
   • setAttribute
3. 修改文本
   • innerHTML
   • innerText
   • 节点操作
   • nodeValue
4. 修改属性
   • .xxx = vvv
   • setAttribute