JavaScript中的DOM

DOM的概念

DOM是Document Object Model（文档对象模型）的缩写，是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，通过DOM，我们可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素

DOM节点树

节点类型

• 每个节点都有一个nodeType属性，用于表明节点的类型。
• 常用节点类型与对应nodeType值：
  

  用于判断获取到的元素属于什么类型节点
  

  • 元素节点 <==> 1
  • 属性节点 <==> 2
  • 文本节点 <==> 3

获取节点

• document.getElementById()通过id名获取
• getElementsByTagName()通过标签名获取，返回的是一个类数组
• getElementsByClassName()通过类名获取，返回的是一个类数组
• document.getElementsByName()通过属性名获取，返回的是一个类数组
  

  如果确认元素存在, 但是返回null或[]，一定是代码执行顺序的问题

节点之间的关系

• 获取父级节点 ele.parentNode
• 获取子节点
  
  • ele.childNodes 得到ele元素的全部子节点列表（类数组）
  • ele.firstChild 获得ele元素的第一个子节点
  • ele.lastChild 获得ele元素的最后一个子节点
• 获取兄弟节点
  
  • ele.nextSibling 获得ele元素的下一个兄弟节点
  • ele.previousSibling 得到ele元素的上一个兄弟节点
• 获取属性节点 ele.attributes 获取ele元素节点的所有属性节点,返回一个只读的类数组

操作节点的一些方法

• 创建节点

  • document.createElement() 创建一个元素节点
  • document.createTextNode() 创建一个文本节点
  • document.createAttribute() 创建一个属性节点

• 删除节点

  • parent.removeChild(ele) 删除（并返回）当前节点parent的指定子节点ele。

• 插入节点

  • parent.appendChild() 向节点的子节点列表的结尾添加新的子节点
  • parent.insertBefore(new,node) 在指定的子节点node前插入新的子节点new。

• 克隆节点

  • cloneNode(boolean) 复制节点，为true是深复制。
• 判断节点
  
  • ele.hasAttribute(attr) 判断当前元素是否拥有attr属性，返回布尔值
  • parent.hasChildNodes() 判断当前节点是否拥有子节点,返回布尔值
• 替换节点
  
  • replaceChild(new,old) 将old节点替换为new节点