【javascript】DOM操作方法（1）——节点属性
一、节点属性
Node.nodeName //返回节点名称，只读
Node.nodeType //返回节点类型的常数值，只读
Node.nodeValue //返回Text或Comment节点的文本值，只读
Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写
Node.baseURI //返回当前网页的绝对路径
Node.ownerDocument //返回当前节点所在的顶层文档对象，即document
Node.nextSibling //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode //返回当前节点的父节点
Node.parentElement //返回当前节点的父Element节点 IE里面使用
Node.childNodes //返回当前节点的所有子节点
Node.firstChild //返回当前节点的第一个子节点
Node.lastChild //返回当前节点的最后一个子节点
//parentNode接口
Node.children //返回指定节点的所有Element子节点
Node.firstElementChild //返回当前节点的第一个Element子节点
Node.lastElementChild //返回当前节点的最后一个Element子节点
Node.childElementCount //返回当前节点所有Element子节点的数目。
认识DOM的三大节点：元素节点，文本节点，属性节点以及nodeName,nodeType,nodeValue的区别：
http://blog.csdn.net/judyge/article/details/50225463
1.Node.textContent：返回当前节点和它的所有后代节点的文本内容，可读写
<div id="node">原来的内容</div> <div id="node1">改变的内容</div> <button onclick="node()">改变</button> <script type="text/javascript"> function node(){ var div=document.getElementById("node"); var node=document.getElementById("node1"); node.innerHTML=div.textContent; } </script>
2.Node.baseURI：返回当前网页的绝对路径
<div id="demo">绝对路径</div> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var x=document.getElementById("demo"); x.innerHTML=document.baseURI; } </script>
返回结果是绝对路径
3.Node.ownerDocument：返回当前节点所在的顶层文档对象，即document
<div id="demo">文档节点</div> <button onclick="owner()">改变</button> <script type="text/javascript"> function owner(){ var x=document.getElementById("demo"); x.innerHTML=x.ownerDocument.nodeType; } </script>
返回结果为：9
4.Node.nextSibling：返回紧跟在当前节点后面的第一个兄弟节点
<div id="demo"> <div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div> </div> <div id="demo3">demo3的内容</div> <button onclick="myFunction()">点击</button> <script type="text/javascript"> function myFunction(){ var next=document.getElementById("demo3"); next.innerHTML=document.getElementById("demo1").nextSibling.id; } </script>
注意：两个 <div> 元素之间添加空格，结果将是 "undefined"
5.Node.parentNode ：返回当前节点的父节点
<div id="demo"> <div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div> </p> <div id="demo3">demo3的内容</div> <button onclick="myFunction()">点击</button> <script type="text/javascript"> function myFunction(){ var next=document.getElementById("demo3"); next.innerHTML=document.getElementById("demo1").parentNode; } </script>
返回结果：[object HTMLDivElement]
6.Node.childNodes：返回当前节点的所有子节点
<div id="demo"> <div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div><p>段落内容</p> </div> <div id="demo3">demo3的内容</div> <button onclick="myFunction()">点击</button> <script type="text/javascript"> function myFunction(){ var text=""; var next=document.getElementById("demo").childNodes; for(i=0;i<next.length;i++){ text=text+next[i].nodeName+"</br>"; } var x=document.getElementById("demo3"); x.innerHTML=text; } </script>
返回结果：
7.Node.firstChild ：返回当前节点的第一个子节点
<div id="demo"> <div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div><p>段落内容</p> </div> <div id="demo3">demo3的内容</div> <button onclick="myFunction()">点击</button> <script type="text/javascript"> function myFunction(){ var next=document.getElementById("demo").firstChild; var x=document.getElementById("demo3"); x.innerHTML=next.nodeName; } </script>
返回结果：#text
8.Node.previousSibling //返回当前节点前面的、距离最近的一个兄弟节点
<script type="text/javascript">
function myfunction(){
var item = document.getElementById("item3");
var divv = document.getElementById("div1");
divv.innerHTML = item.previousSibling.id;
}
</script>
二、元素节点，文本节点，属性节
1.nodeName：节点名称
对于元素节点，nodeName=标签名（返回的名称是大写的）
对于文本节点，nodeName=#text
对于属性节点，nodeName=属性名（返回的名称是大写的）
<div id="demo">
<div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div><p>段落内容</p>
</div>
<div id="demo3">demo3的内容</div> <button onclick="myFunction()">点击</button> <script type="text/javascript"> function myFunction(){ var next=document.getElementById("demo").firstChild; var next1=document.getElementById("demo");
//返回属性名的属性值
var next2=document.getElementById("demo").getAttributeNode('id');
var x=document.getElementById("demo3");
x.innerHTML=next.nodeName; x.innerHTML=next1.nodeName; x.innerHTML=next2.nodeName; } </script>
返回结果：#text DIV ID
在这里我们一定要注意：
以下两种情况在使用firstChild获取nodeName返回不同值
<div id="demo"> <div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div><p>段落内容</p> </div>
<div id="demo"><div id="demo1">demo1的内容</div><div id="demo2">demo2的内容</div><p>段落内容</p></div>
<script type="text/javascript">
function myFunction(){
var next=document.getElementById("demo").firstChild;
var x=document.getElementById("demo3");
x.innerHTML=next.nodeName;
}
</script>
第一种div排版返回值：#text ( 原因是回车也算是文本，文本也属于文本节点，所以返回值为#text)
第二种div排版返回值：DIV
2.nodeType：节点类型
对于元素节点，nodeType=1
对于文本节点，nodeType=3
对于属性节点，nodeType=2
对于注释元素，nodeType=8
对于文档元素，nodeType=9
3.nodeValue：节点数值
元素节点的nodeValue值为null
对于文本节点，nodeValue=文本值
对于属性节点，nodeValue=属性值
