节点
页面中所有的内容(标签,属性,文本(文字,换行,空格,回车))都可以被称作是节点,文档就是由节点组成的。
首先通过一个简单的代码认识一下节点的结构
<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
![](https://i-blog.csdnimg.cn/blog_migrate/b9518f1e65640f35851214f99f8a2d87.png)
节点的属性
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节点
![](https://i-blog.csdnimg.cn/blog_migrate/169391a77ae1abba2a380f15b63e4754.png)
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>";
![](https://i-blog.csdnimg.cn/blog_migrate/15a64c65cf173b598acd500f802e1884.png)