DOM节点信息的获取

[plain] view plain copy
 
  1.   通过js更改页面颜色的一个小例子及其js中一些属性的用法  对form表单中的一些元素进行操纵  
  2. Dom节点信息的获取  2009-11-28 23:15:58|  分类： 学习 |  标签： |举报 |字号大  
  3. 中  
  4. 小 订阅   
  5. <html>  
  6.  <head>  
  7.   <title>Dom节点信息的获取</title>  
  8.   <script language="javascript">  
  9.    function mm(){  
  10.     var body_elements=document.getElementsByTagName("body")[0];  
  11.     //alert(body_elements);  
  12.     var body_el=body_elements.childNodes;  
  13.     for(var i=0;i<body_el.length;i++){  
  14.      //分别打印出//1.#text,2.input,3.br,4.#text,5.input,6.br,7.input,8.#text  
  15.      //对应的1是文本节点，2.元素节点，3元素节点  
  16.      //nodeName属性获取节点名  
  17.      //alert(body_el.nodeName);  
  18.      //打印出3，1，1，3，1，1，3，1，3  
  19.      //nodeType属性获取节点的类型  
  20.      //元素节点的nodeType的属性值是1  
  21.      //属性节点的nodeType的属性值是2  
  22.      //文本节点的nodeType的属性值是3  
  23.      //alert(body_el.nodeType);  
  24.      //打印出1.用户名：，2.null，3.null，4.密码，5.null，6.null，7.aa，8.null，9.什么都没有  
  25.      //nodeValue属性获取节点的值  
  26.      //不同类型的节点有不同的返回值；  
  27.      //如果是元素节点返回null，  
  28.      //属性节点返回undefined，  
  29.      //文本节点返回文本内容。  
  30.      //alert(body_el.nodeValue);  
  31.     }  
  32.     //我们知道body元素下面有子节点  
  33.     //alert将打印的是TRUE  
  34.     //hasChildNodes();方法是判断给定的节点是否有子节点  
  35.     //如果给定的节点有子节点，则返回TRUE，如果给定的节点没有子节点则返回  
  36.     //FALSE  
  37.     var hasnod=body_elements.hasChildNodes();  
  38.     //alert(hasnod);  
  39.     var inp=document.getElementsByTagName("input");  
  40.     for(var i=0;i<inp.length;i++){  
  41.      var aa=inp;  
  42.      //使用tagName获取元素节点的标记名称  
  43.      //该元素是元素节点的独有属性，和nodeName具有相同的返回值  
  44.      //即返回标记的名称  
  45.      //var ss=aa.nodeName;  
  46.      var ss=aa.tagName;  
  47.      alert(ss);  
  48.     }  
  49.    }  
  50.   </script>  
  51.  </head>  
  52.  <body>  
  53.   用户名：<input type="text" name="username" value="" /><br>  
  54.   密码：<input type="password" name="password" value=""><br>  
  55.   aa<input type="button" value="检查" onclick="mm()">  
  56.  </body>  
  57. </html>  
posted @ 2017-01-11 16:26  天涯海角路  阅读(253)  评论(0)    收藏  举报