节点

节点

  页面中所有的内容(标签,属性,文本(文字,换行,空格,回车))都可以被称作是节点，文档就是由节点组成的。

  首先通过一个简单的代码认识一下节点的结构

<div>
    <p id="pp">这是p</p>
</div>

var pObj = document.getElementById("pp"); //获得元素p的节点
console.log(pObj);
console.log(pObj.parentNode);            //p的父节点 是div
console.log(pObj.parentNode.parentNode); //div的父节点 是body
console.log(pObj.parentNode.parentNode.parentNode); //body的父节点 是html
console.log(pObj.parentNode.parentNode.parentNode.parentNode); //html的父节点 是document
console.log(pObj.parentNode.parentNode.parentNode.parentNode.parentNode); //document的父节点 是null

节点的属性

nodeType

  如果nodeType的值是1，代表的该节点是标签，如果是2，代表该节点是属性，如果是3，代表该节点是文本。

nodeName

  标签的nodeName的值是大写的标签名，属性的nodeName值是小写的属性名，文本的nodeName是#text。

nodeValue

  标签的nodeValue是null,属性的nodeValue是属性值，文本的nodeValue是文本内容。

parentNode

  获得父节点。

parentElement

  获取父元素。

childNodes

  获取子节点，得到一个数组。

children

  获取子元素，得到一个数组。

firstChild

  获取第一个子节点，对IE8来说，获取的是第一个子元素。

firstElementChild

  获取第一个子元素，IE8不支持此方法。

lastChild

  获取最后一个子节点。

lastElementChild

  获取最后一个子元素。

previousSibling

  获取前一个兄弟节点。

previousElementSibling

  获取前一个兄弟元素。

nextSibling

  获取下一个兄弟节点。

nextElementSibling

  获取下一个兄弟元素。

节点的方法

getElementById, getElementsByTagName, getElementsbyClassName

  获得元素。

getAttributeNode

  由属性获得节点。

appendChild

  追加子元素。

removeChild

  移除子元素。

insertBefore(obj1,obj2)

  1插到2前面。

创建元素

  可以使用innerHTML和creatElement创建元素。

  假设有如下的结构

<div id="dv">
    
</div>

我们希望通过代码在div中加入一个p元素，首先使用innerHTML的方法实现。

document.getElementById("dv").innerHTML="<p>这是p</p>";

现在我们用createElement的方法在向其中加入一个p标签。

//创建一个p标签
var pObj = document.createElement("p");  
//设置p标签里的内容
pObj.innerText = "我也是一个p"; 
//向div中再添加 
document.getElementById("dv").appendChild(pObj);  一个p节点

innerText与innerHTML的区别:

  innerHTML能够写入标签，innerText不能写入标签。

  假设有如下代码

<div id="dv1"></div>
<div id="dv2"></div>

var dvObj1 = document.getElementById("dv1");
var dvObj2 = document.getElementById("dv2");
dvObj1.innerText = "<p>这是p</p>";
dvObj2.innerHTML = "<p>这是p</p>";