DOM

====节点====

12种 元素节点 文本节点 注释节点 根节点 属性节点
需要掌握的四种是哪四种？
元素节点 文本节点 注释节点 根节点

节点名	nodeType	nodeName	nodeValue
元素节点	1	标签名称（全大写）	null
文本节点	3	#text	文本内容
注释节点	8	#comment	注释内容
根节点	9	#document	null

查找节点

方法	功能	返回值
parentNode	子选父节点	返回父元素节点
children	父选子元素节点(数组)	返回所有子元素节点，数组
childNodes	所有子节点返回所有子节点，(数组，包含文本，注释)
nextElementSibling	下一个子元素节点	返回下一个子元素节点
nextSibling	下一个子节点(包含空白，注释)	返回下一个节点
previousElementSibling	上一个子元素节点	返回上一个元素节点
previousSibling	上一个子节点(包含空白，注释)	返回上一个节点
firstElementChild	第一个子元素节点	返回第一个元素节点
firstChild	第一个子节点	返回第一个节点
lastElementChild	最后一个子元素节点	返回最后一个元素节点
lastChild	最后一个子节点	返回最后一个节点

---

创建节点

方法	功能	返回值
document.createElement();	创建元素节点 有参数参数为标签	undefined
document.createTextNode();	创建文本节点 有参数参数为文本内容	undefined
document.createComment()	创建注释节点 有参数参数为注释内容	undefined
document.createDocumentFragment();	创建文档碎片 有参数参数为标签	undefined

移动节点

方法	功能	返回值
ele.appendChild(newEle)	ele添加子节点newEle	返回添加子节点newEle
ele.insertBefore(newEle, oldEle)	ele添加子节点newEle在oldEle前	返回添加子节点newEle
ele.remove()	删除节点	返回undefined
ele.removeChild(oldEle)	删除子节点oldEle	返回删除的子节点
ele.replaceChild(newEle, oldEle)	子节点newEle替换成oldEle	返回被替换的子节点
ele.cloneNode(bool)	方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点	返回拷贝的节点

属性节点

getAttribute,setAttribute,remove

• 选择器

  • 元素：id,className,name,tagName,querySelector,querySelectorAll
  • 父选子元素，子选父，第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
    • children:父选子元素(数组)
    • parentNode：子选父(元素)
    • firstElementChild:第一个一个子元素：
    • lastElementChild最后一个子元素;
    • nextElementSibling:下一个兄弟元素
    • previousElementSibling:上一个兄弟元素

• 节点：DOM每一个成分都叫节点，元素节点，文本节点，注释节点

  • 节点选择器：
    • childNodes:父选子
    • firstChild:第一个子
    • lastChild:最后一个子
    • previousSibling:上一个兄弟
    • netxSibling:下一个兄弟
  • 节点的操作
    • nodeType:节点的类型
    • nodeName:节点名字（元素为标签名）
    • nodeValue:节点的值（元素的的值为null）

• 属性

• 元素节点的操作属性

  • 内置
    • 可见(点语法)：className,id,alt,href,type,value,name
      • attribute系列
    • 不可见
      inerHTML,innetText,TagName....
  • 自定义属性
    • 可见
      • Attribute系列(getAttribute,setAttribuute,removeAttribute)
    • 不可见
      • 将元素作为对象操作，操作对象的方法 oDiv.dateid = "1002"

• 属性节点的操作

  • 节点：attributes
    • 每个节点的类型是对象
    • nodeType,nodeName,nodeValue

• DOM元素的操作

  • 创建，插入