DOM启蒙：节点概览

1.DOM:由节点对象组成的树

2.节点类型

   节点类型：  

• DOCUMENT_NODE
• ELEMENT_NODE
• ATTRIBUTE_NODE
• TEXT_NODE
• DOCUMENT_FRAGMENT_NODE
• DOCUMENT_TYPE_NODE

    这些节点类型常量在浏览器JavaScript环境中是Node对象的属性。

   节点接口/构造函数

• HTML*Element
• HTMLBodyElement
• Text
• Attr
• HTMLDocument
• DocumentFragment
• DocumentType

   注意

     ATTRIBUTE_NODE其实不是树的一部分。

3.继承自节点对象的子节点对象

      典型DOM树里每个节点对象从Node继承属性和方法。

• Object<Node<Element<HTMLElement
• Object<Node<CharacterData<Text
• Object<Node<Document<HTMLDocument
• Object<Node<DocumentFragment

4.与节点打交道的属性与方法

   属性：

• childNodes:获取节点的子节点的集合
• firstChild：获取节点的第一个子节点
• lastChild：获取节点的最后一个子节点
• nextSibling：获取节点的下一个节点
• nodeName：节点的名称
• nodeType：节点的类型
• nodeValue：节点的值
• parentNode：获取节点的父节点（可与removeChild共同使用移除节点）
• previousSibling：获取节点的下一个子节点

   节点方法

• appendChild()：在DOM中插入节点对象
• cloneNode()：传入false，则复制单个结点。传入true，则复制该节点及所有其所有子节点
• compareDocumentPosition()：确定元素节点相对传入节点的的位置（注意节点之间可能有多重关系）
• contains()：包含另一节点返回true
• hasChildNodes()：确定是否有子节点
• insertBefore（）：在某个节点之前插入节点
• isEqualNode()：判断两个节点是否相同
• removeChild（）：可用来删除子节点，与pareentNode搭配使用可以移除节点
• replaceChild（）：替换节点

   文档方法

• document.createElement()：创建元素节点
• document.createTextNode()：创建文本节点

   HTML*Element属性

• innerHTML：
• outerHTML
• textContent
• innerText
• outerText
• firstElementChild:第一个元素子节点
• lastElementChild:最后一个元素子节点
• nextElementChild:下一个元素子节点
• previousElementChild：上一个元素子节点
• children：所有元素子节点
• previousElementSibling：上一个临近的元素节点
• nextElementSibling：下一个临近的元素节点

   HTML元素方法

• insertAjacentHTML:可将节点插入到开标签之前、开标签之后、闭标签之前和闭标签之后。

3.其他

• for-in语句

• 获取元素节点：document.querySelector

• 创建DocumentFragment：document.createDocumentFragment()

• 创建注释节点：document.createComment()

• 用Id获取元素节点：document.getElementById()

• 用TagName获取元素节点数组：document.getElementsByTagName()

• 用Class获取元素节点数组：document.getElementsByClass()

• Node的属性：Node.constructor

• 节点集合：NodeList或HTMLCollection

• 判断是否为数组：Array.isArray()

• 转换类数组列表为JavaScript数组：将类数组类型传给call或apply函数

• Array的slice函数：复制数组副本，不改变原数组

• Array的from函数

• 判断节点是否相等的要求：两个节点类型相同。如下字符串属性相同：nodeName、localName、namespaceURI、prefix及nodeValue。attributes NamedNodeMaps相等。childNodes NodeLists相等。