DOM

DOM

Document Object Model

节点

• 文档节点：整个html文档
• 元素节点：html中的标签，例如：div、span、p等
• 属性节点：标签上的属性，例如 id=“uname”
• 文本节点：标签中的文本值
• 注释节点：<!-- 注释节点 -->

获取元素的节点

• document.getElementById()
  • 通过元素的id属性值获取元素节点；如果出现相同id属性值，只会获取第一个
• document.getElementsByTagName()
  • 通过标签名/元素名获取元素节点数组
• document.getElementsByClassName()
  • 通过class属性值获取元素节点数组
• document.getElementsByName()
  • 通过name属性值获取元素节点数组

创建节点和插入节点

• 创建节点
  • createElement()：创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
  • createTextNode()：创建一个文本节点，可以传入文本内容
  • innerHTML：也能达到创建节点的效果，直接添加到指定位置了
• 插入节点
  • write() ：将任意的字符串插入到文档中
  • appendChild()：向元素中添加新的子节点，作为最后一个子节点
  • insertBefore()：向指定的已有的节点之前插入新的节点
    • newItem：要插入的节点
    • exsitingItem：参考节点
    • 需要参考父节点

间接查找节点

• childNodes：返回元素的一个子节点的数组
• firstChild：返回元素的第一个子节点
• lastChild：返回元素的最后一个子节点
• nextSibling：返回元素的下一个兄弟节点
• parentNode：返回元素的父节点
• previousSibling：返回元素的上一个兄弟节点

替换和克隆元素

• 替换节点
  • replaceChild(newNode, oldNode)：用新的节点替换旧的节点
  • oldNode.parentNode.replaceChild(newNode, oldNode)
    • 首先通过旧节点定位到父节点，然后用新的节点替换旧节点
• 克隆节点
  • cloneNode()：复制节点
  • var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
    • true：深度克隆，可以克隆结构和内容
    • false(默认值)：只克隆结构

删除节点

• removeChild()：从元素中移除子节点
  • 从父元素中删除节点，获取要删除对象的父元素，然后从父元素中删除该对象