JavaScript HTML DOM 元素操作(节点)

 

 

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档  9。

 

一、添加和删除节点(HTML 元素)

1、创建节点

1)创建该元素(元素节点);

2)向一个已存在的元素追加该元素。

语法:appendChild(newnode)

 

eg:

复制代码
 1 <div id="div1">
 2     <p id="p1">这是一个段落</p>
 3     <p id="p2">这是另一个段落</p>
 4 </div>
 5 
 6 <script>
 7     var para=document.createElement("p");
 8     var node=document.createTextNode("这是新段落。");
 9     para.appendChild(node);
10 
11     var element=document.getElementById("div1");
12     element.appendChild(para);
13 </script>
复制代码

 document.createElement("标签名");      // 创建元素节点

 document.createTextNode("文本");      //创建文本节点

 appendChild();                                           //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法:a.appendChild(b),把b添加到a内。

 

2.添加节点 

appendChild();                                            //在指定节点的最后一个子节点列表之后添加一个新的子节点。

 语法,eg:同上。

insertBefore();                                             //insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:insertBefore(newnode,node);

eg:

复制代码
 1 <ul id="test">
 2     <li>JavaScript</li>
 3     <li>HTML</li>
 4 </ul> 
 5  
 6 <script type="text/javascript">
 7       var otest = document.getElementById("test");  
 8       var newli = document.createElement("li");
 9       newli.innerHTML="php";
10       //otest.insertBefore(newli,otest.lastChild);
11       otest.insertBefore(newli,otest.childNodes[1]);
12 </script> 
复制代码

3.删除节点

removeChild()                                             //removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:nodeObject.removeChild(node)

eg:

复制代码
 1 <div id="div1">
 2     <p id="p1">这是一个段落。</p>
 3     <p id="p2">这是另一个段落。</p>
 4 </div>
 5 
 6 <script>
 7     var parent=document.getElementById("div1");
 8     var child=document.getElementById("p1");
 9     parent.removeChild(child);
10 </script>
复制代码

DOM 需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素。

 

4.替换节点

replaceChild                                                //把一个给定父元素里面的一个子节点替换为另一个子节点。

语法:referencre = element.replaceChild(newChild,oldChild);                //newChild: 必需,用于替换 oldChild的对象。 oldChild: 必需,被 newChild替换的对象。

eg:

复制代码
 1 <div>
 2     <b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>
 3     <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>
 4   
 5     <script type="text/javascript">
 6         function replaceMessage(){
 7           var b=document.getElementById("oldnode");
 8           var newNode=document.createElement("i");
 9           newNode.innerHTML=b.innerHTML;
10           b.parentNode.replaceChild(newNode,b);
11         }    
12   </script>
复制代码

 

注意:当 oldnew 被替换时,所有与之相关的属性内容都将被移除。 newChild必须先被建立。

 


5.访问子节点

childNodes                                                  //访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:elementNode.childNodes            //可用childNodes[i]数组的形式表示第几个子元素

eg:

复制代码
 1 <div>
 2     javascript  
 3     <p>javascript</p>
 4     <div>jQuery</div>
 5     <h5>PHP</h5>
 6 </div>
 7 <script type="text/javascript">
 8      var int=document.getElementsByTagName("div")[0].childNodes;
 9      for (var i=0;i<int.length;i++)
10      {
11          document.write("名字:"+int[i].nodeName+"<br>");
12      }
13      document.write("子节点个数:"+int.length+"<br>");
14 </script>
复制代码

 

6.访问子节点的第一和最后项

firstChild                   //返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.firstChild                                     //与elementNode.childNodes[0]是同样的效果。 

lastChild                    //返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.lastChild                                  //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

eg:

复制代码
 1 <div id="con">
 2     <p>javascript</p>
 3     <div>jQuery</div>
 4     <h5>PHP</h5>
 5 </div>
 6 <script type="text/javascript">
 7     var x=document.getElementById("con");
 8     document.write("第一个子节点:"+x.firstChild.nodeName+"<br>");
 9     document.write("最后一个子节点:"+x.lastChild.nodeName);
10 </script>
复制代码

 

7.访问父节点

parentNode                                                 //获取指定节点的父节点

语法:elementNode.parentNode

eg:

复制代码
1 <div id="text">
2     <p id="con"> parentNode 获取指点节点的父节点</p>
3 </div> 
4 <script type="text/javascript">
5     var mynode= document.getElementById("con");
6     document.write(mynode.parentNode.nodeName);
7 </script>
复制代码

注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

 

8.访问兄弟节点

nextSibling                                                   //可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:nodeObject.nextSibling

previousSibling                                           //可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:nodeObject.previousSibling  

eg:

复制代码
 1 <ul id="myList">
 2     <li id="item1">Coffee</li>
 3     <li id="item2">Tea</li>
 4 </ul>
 5 <p id="demo">点击按钮来获得首个项目的下一个同胞。</p>
 6 <button onclick="myFunction()">试一下</button>
 7 <script>
 8     function myFunction()
 9     {
10         var x=document.getElementById("demo");  
11         x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
12     }
13 </script>            
复制代码

注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。

posted @ 2017-06-27 19:33  最骚的就是你  阅读(5064)  评论(0编辑  收藏