javascriptDOM操作方法——节点属性

Posted 2020-10-10 忆华灯纵博

一、节点属性
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=属性值