JavaScript系列之DOM操作

前言：在HTML与JavaScript交换的时候往往用到一些DOM操作，下面小编就来总结一下常用的DOM操作。

 一、document.getElementById()    根据Id获取元素节点

[javascript] view plain copy

 print?

1. <div id="div1">  
2.         <p id="p1">  
3.             我是第一个P</p>  
4.         <p id="p2">  
5.             我是第二个P</p>  
6.  </div>  
7.   
8. <script type="text/javascript">  
9.          window.onload = function () {  
10.             var str = document.getElementById("p1").innerHTML;  
11.             alert(str);        //弹出    我是第一个P  
12.         }  
13. </script>  

 二、document.getElementsByName()    根据name获取元素节点

[javascript] view plain copy

 print?

1. <div id="div1">  
2.         <p id="p1">  
3.             我是第一个P</p>  
4.         <p id="p2">  
5.             我是第二个P</p>  
6.         <input type="text" value="请输入值" name="userName" />  
7.         <input type="button" value="确定" onclick="test()">  
8.     </div>  
9.           
10.         function test() {  
11.             var username = document.getElementsByName("userName")[0].value;  
12.             alert(username);    //输出userName里输入的值  
13.         }  

 三、document.getElementsByTagName()    根据HTML标签名获取元素节点，注意getElements的选择器返回的是一个NodeList对象，能根据索引号选择其中1个，也可以遍历输出。

[javascript] view plain copy

 print?

1. <div id="div1">  
2.         <p id="p1">  
3.             我是第一个P</p>  
4.         <p id="p2">  
5.             我是第二个P</p>  
6.     </div>  
7.   
8.     window.onload = function () {  
9.             var str = document.getElementsByTagName("p")[1].innerHTML;  
10.             alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始  
11.         }      
12.   
13.     window.onload = function () {  
14.             var arr = document.getElementsByTagName("p");  
15.             for (var i = 0; i < arr.length; i++) {  
16.                 alert(arr[i].innerHTML);  
17.             }  
18.         }  

四、document.getElementsByClassName()    根据class获取元素节点

[javascript] view plain copy

 print?

1. <div id="div1">  
2.         <p id="p1" class="class1">  
3.             我是第一个P</p>  
4.         <p id="p2">  
5.             我是第二个P</p>  
6.     </div>  
7.   
8.     window.onload = function () {  
9.             var node = document.getElementsByClassName("class1")[0];  
10.             alert(node.innerHTML);  
11.         }  

五、元素的内容

1、innerText、textContent、innerText与textContent的区别，当文本为空时，innerText是""，而textContent是undefined