一、文档节点(最顶层的节点或者说根节点)
二、节点属性和方法
1.firstChild : 指向在c
hildNodes列表中的第一个节点
2.lastChild : 指向在childNodes列表中的最后一个节点
3.childNodes : 所有子节点列表
4. previousSibling : 指向前一个兄弟节点,如果这个节点就是第一个兄弟节点,那么该值为null
5. nextSibling : 指向后一个兄弟节点,如果这个节点就是最后一个兄弟节点,那么该值为null
6.appendChild(node) : 将node添加到childNodes的末尾
7.removeChild(node) : 从childNodes中删除node
8.replaceChild(newnode, oldnode) : 将childNode中的oldnode替换成newnode
9.insertBefore(newnode, refnode):将childNode中的refnode之前插入newnode
三、访问指定节点
1.getElementsByTagName()方法:根据元素名称获取所有元素的数组
2.getElementByName()方法:用来获取所有name属性等于指定的元素
3.getElementById()方法:返回id特性等于指定值的元素
部分代码如下:
<!DOCTYPE html>
<html>
<head>
<title>节点</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="first">
<div id = "chaochao" name = "wangchao" style="color: red">节点</div>
<div>wenqiang</div>
</div>
<p name = "20"> 20</p>
<span id = "wj">送</span>
<p id="haha">哈哈</p>
</body>
<script type="text/javascript">
/* var chaochaoDiv = document.getElementById("chaochao");
chaochaoDiv.setAttribute("class", "bold");//新增属性
chaochaoDiv.setAttribute("id", "wengqiang");//覆盖旧的属性
var divObj = document.getElementsByTagName("div");//取得body元素
alert(pObj.nodeValue);
*/
/*var pObjs = document.getElementsByName("20");
alert(pObjs[0].innerHTML);
var spanObjs = document.getElementById("wj");
alert(spanObjs.innerHTML);//textContext*/
/* var firstDiv = document.getElementById("first");//id为first的
var firstchildDiv = firstDiv.firstElementChild;//id为first的第一个节点
alert(firstchildDiv.textContent);//取出“节点”*/
var pObj = document.createElement("p");
var textObj = document.createTextNode("呵呵");
pObj.appendChild(textObj);
var hahaP = document.getElementById("haha");
hahaP.appendChild(pObj);
</script>
</html>