JavaScript系列：浅析DOM节点属性和方法

前言

昨晚做了一道笔试题，就是用了原生的JavaScript来完成一个删除的任务。可能会因为经常使
用jQuery后，对DOM的API会有点淡忘，所以整理这次的博客。

JavaScript

刚入门的时候，看到了很多的书籍和视频，发现JavaScript是这样的。
JavaScript的组成
所以对JavaScript还是很泛的理解，近年来的深入学习发现其实JavaScript自己作用很少的，大多数的API提供都是寄生的平台提供的。

DOM

DOM(Document Object Model)文档对象模型，说白了就是JavaScript要操作网页上面的元素就要使用DOM提供的API。
网页在经过浏览器渲染过后就会有一个DOM Tree的生成，是这样的：

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1></h1>
    <p><a href=""></a></p>
    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
</body>
</html>

DOM Tree
参考资料

一些概念

节点(node)：DOM的最小组成单位
七种类型，注意的是：文本里面的空格也是算节点，注释（Comment）也是节点。
获取节点
1. document.getElementById
2. document.getElementsByTagName [ ClassName | Name ]
3. document.querySelector
4. document.querySelectorAll

节点对象都是浏览器内置的Node对象的实例，继承了Node的属性和方法。那撇开这么复杂的东西，反正就是对象了，那我们学习一个对象只要知道他有什么属性和方法就可以了解这个对象了

节点的属性

nodeName && nodeType
nodeName属性返回节点的名称，nodeType返回节点类型的常数值。

ownerDocument
该属性主要返回就是当前节点最顶层的文档对象，即document对象，而document对象的ownerDocumet属性，返回null。
nextSiblings、previousSiblings、parentNode、parentElement
根据字面意思，可以可以使用这些属性来遍历整个节点了，当找不到节点的时候，会返回null值。

关于parentNode的细节
对于document节点和documentfragment节点，它们的父节点（parentNode）都是null。另外，对于那些生成后还没插入DOM树的节点，父节点也是null。

关于parentElement的细节
node.parentElement节点上可以设置CSS属性
在IE浏览器中，只有Element节点才有该属性，其他浏览器则是所有类型的节点都有该属性。
childNodes，firstChild，lastChild
这几个属性是来获取子节点的。firstChild和lastChild获取不到节点的时候会返回null。
nodeValue，textContent
这个两个属性都是获取当前节点的文本值，属性都是可读写的。
nodeValue只有Text节点、Comment节点、XML文档的CDATA节点有文本值，才会返回结果，其他类型都是返回null。
textContent返回当前节点和它的所有后代节点的文本内容。IE8之前不能兼容要使用innerHTML

节点的方法

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

ParentNode接口

children
firstElementChild
firstElementChild
childElementCount

ChildNode接口

remove()

参考文档

前言