JavaScript获取页面上某个元素的方法

     大多数的javascript操作都需要获取先获取页面上的某个元素，引用其为当前脚本中的一个对象，然后加以操作或获取节点树形。W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素，常见的方法有getElementById（）、getElementsByName（）、getElementsByTagName（），他们的作用分别通过id属性、name属性/标签名称返回单个节点或节点集合。

 1  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 2  < html xmlns = " http://www.w3.org/1999/xhtml " >
 3  < head >
 4  < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   / >
 5  < title > 无标题文档 < / title>
 6  < script type = " text/javascript " >
 7    function  doGetElementsByTagName(){
 8        var  x = document.getElementsByTagName( " input " );
 9       alert(x.length);
10   }
11    function  doGetElementsByName(){
12        var  x = document.getElementsByName( " myInput " );
13       alert(x.length);
14   }
15    function  getValue(){
16        var  x = document.getElementById( " myHeader " );
17       alert(x.innerHTML);
18   }
19  < / script>
20  < / head>
21 
22  < body >
23  < h1 id = " myHeader "  onclick = " getValue(); " > 这里是头部 < / h1>
24 
25  < p > 点击头部弹出myHeader的内容 < / p>
26  < input type = " text "  name = " myInput "   size = " 20 "   / >
27  < br  / >
28  < br  / >
29  < input type = " text "  name = " myInput "   size = " 20 "   / >
30  < br  / >
31  < br  / >
32  < input type = " text "  name = " myInput "   size = " 20 "   / >
33  < br  / >
34  < br  / >
35  < input type = " button "  onclick = " doGetElementsByTagName(); "   value = " 有多少个input元素？ "/ >
36  < br  / >
37  < input type = " button "  onclick = " doGetElementsByName(); "   value = " 有多少个name的值为myInput？ "/ >
38 
39  < / body>
40  < / html>

当点击：时，弹出：

当点击：时，弹出：

 

当点击：时，弹出：

 

特别是在以下代码中，

 

1    function  getValue(){
2        var  x = document.getElementById( " myHeader " );
3       alert(x.innerHTML);
4   }

涉及到了一个知识点：HTML DOM innerHTML ，作用是从对象的起始位置到终止位置的全部内容,包括Html标签

 

 

转载于:https://www.cnblogs.com/zydcl/archive/2011/03/13/inner.html