你所不了解的javascript操作DOM的细节知识点(一)(2)

var test = document.getElementById("test"); if(test.nodeType == 1) { console.log(test.firstChild); // <p>aaaaaa</p> console.log(test.lastChild); // <p>cccccc</p> }

父节点的firstChild始终等于父节点的.childNodes[0],父节点的lastChild始终等于父节点的.childNodes[父节点的.childNodes.length - 1]; 如下代码：

console.log(test.firstChild === test.childNodes[0]); // true console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true

如果没有子节点的话，那么firstChild和lastChild都指向为空null;

hasChildNodes()：如果需要判断该父节点有没有子节点的话，可以使用该方法判断，返回的是一个布尔型，有返回true，没有返回false，如下代码：

<div><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

JS代码如下：

var test = document.getElementById("test");
console.log(test.hasChildNodes());

// true如果是如下的 就返回false；如下代码：

<div></div>
var test = document.getElementById("test");
console.log(test.hasChildNodes()); // false

ownerDocument: 所有节点都有最后一个属性是ownerDocument，该属性指向表示整个文档的文档节点，这种关系表示的任何节点都属于它所在的文档，任何节点都不能同时存在两个或更多文档中，通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点；如下测试代码：

<div> <p>11</p> </div> var test = document.getElementById("test"); console.log(test.ownerDocument); // document var p = test.ownerDocument.getElementsByTagName("p"); console.log(p); // <p>11</p>

appendChild(): 用于向childNodes列表的末尾添加一个节点；返回的是新增加的节点；如下代码：

<div>
<p>11</p>
</div>

JS代码如下：

var test = document.getElementById("test"); var newNode = document.createElement("p"); var returnNode = test.appendChild(newNode); console.log(returnNode); // <p></p> console.log(returnNode === newNode); // true console.log(test.lastChild === newNode); // true

insertBefore(): 该方法是将新节点插入到指定的节点的前面去，该方法接收2个参数，要插入的节点和作为参照的节点；插入节点后，被插入的节点会变成参照节点的前一个同胞节点，同时被方法返回，如下代码：

<div>
<p>11</p>
</div>

JS代码如下：

var test = document.getElementById("test"); var newNode = document.createElement("div"); var returnNode = test.insertBefore(newNode,test.childNodes[0]); console.log(returnNode); // <div></div> console.log(returnNode === newNode); // true

插入节点后，结构变成如下：

复制代码 代码如下:

<div>
<div></div>
<p>11</p>
</div>

但是如果参照节点为null的话，那么就会把新节点插入到最后面去了，如下代码：

复制代码 代码如下:

var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,null);

插入后HTML结构如下：

复制代码 代码如下:

<div>
    <p>11</p>
    <div></div>
</div>

我们还可以更深入的看下如下测试代码：

var test = document.getElementById("test"); var newNode = document.createElement("div"); // 插入后成为最后一个节点 var returnNode = test.insertBefore(newNode,null); console.log(returnNode === test.lastChild); // true // 插入后成为第一个节点 var returnNode = test.insertBefore(newNode,test.firstChild); console.log(returnNode === newNode); // true console.log(newNode === test.firstChild); // true // 插入到最后一个子节点的前面 var returnNode = test.insertBefore(newNode,test.lastChild); console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true