DOM（一）——简介

最近快要去找实习了，准备复习一波DOM，同时整理一下资料，希望对大家也有帮助。

DOM是什么？

document object model又称为DOM，意思是文档模型。我们编写的HTML都是通过构造一颗树的层次结构（DOM Tree），然后通过呈现树（Render Tree）使之可视化的。
浏览器在加载HTML文档时，会先解析这一层次结构并创建一颗节点对象树，从而模拟这些标记文本的封装方式。
DOM的目的是使用JavaScript操作（删除、添加、替换、创建或修改事件）当前文档。

---

为什么JavaScript可以操作DOM？

典型DOM树中的所有节点对象都继承了JavaScript中的Node属性和方法（所有的节点对象类型都继承自Node）。
Node继承自Object.prototype。
节点对象类型共有18种，我们常用来操作（要记住）的是前三种。

//这段代码可以查询所有的节点类型
<script>
    for(var key in Node){
        console.log(key,'='+Node[key])
    }
</script>

ELEMENT_NODE =1
ATTRIBUTE_NODE =2
TEXT_NODE =3
CDATA_SECTION_NODE =4
ENTITY_REFERENCE_NODE =5
ENTITY_NODE =6
PROCESSING_INSTRUCTION_NODE =7
COMMENT_NODE =8
DOCUMENT_NODE =9
DOCUMENT_TYPE_NODE =10
DOCUMENT_FRAGMENT_NODE =11
NOTATION_NODE =12
DOCUMENT_POSITION_DISCONNECTED =1
DOCUMENT_POSITION_PRECEDING =2
DOCUMENT_POSITION_FOLLOWING =4
DOCUMENT_POSITION_CONTAINS =8
DOCUMENT_POSITION_CONTAINED_BY =16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC =32

节点对象所具有的属性与方法使我们通过JavaScript操纵DOM成为了可能。

---

节点属性和方法、文档方法、元素对象属性

按照重要（常用）程度，我对节点、文档以及元素对象的属性和方法进行了归纳。

节点属性

• childNodes
• nodeType
• nodeValue
• firstChild
• lastChild
• nextSibling
• nodeName
• parentNode
• previousSibling

节点方法

• appendChild()
• cloneNode()
• removeChild()
• replaceChild()
• hasChildNodes()
• insertBefore()
• contains()
• compareDocumentPosition()
• isEqualNode()

文档方法

• document.createElement()
• document.createTextNode()

元素对象属性

• innerHTML
• outerHTML
• innerText
• outerText
• textContent
• firstElementChild
• lastElementChild
• children
• nextElementChild
• previousElementChild
  

  ---