DOM节点信息的获取

最新推荐文章于 2024-06-22 01:19:26 发布

棒老师

最新推荐文章于 2024-06-22 01:19:26 发布

阅读量771

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/htx_helloworld/article/details/40791137

版权

WEB 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

  通过js更改页面颜色的一个小例子及其js中一些属性的用法  对form表单中的一些元素进行操纵
Dom节点信息的获取  2009-11-28 23:15:58|  分类： 学习 |  标签： |举报 |字号大
中
小 订阅 
<html>
 <head>
  <title>Dom节点信息的获取</title>
  <script language="javascript">
   function mm(){
    var body_elements=document.getElementsByTagName("body")[0];
    //alert(body_elements);
    var body_el=body_elements.childNodes;
    for(var i=0;i<body_el.length;i++){
     //分别打印出//1.#text,2.input,3.br,4.#text,5.input,6.br,7.input,8.#text
     //对应的1是文本节点，2.元素节点，3元素节点
     //nodeName属性获取节点名
     //alert(body_el.nodeName);
     //打印出3，1，1，3，1，1，3，1，3
     //nodeType属性获取节点的类型
     //元素节点的nodeType的属性值是1
     //属性节点的nodeType的属性值是2
     //文本节点的nodeType的属性值是3
     //alert(body_el.nodeType);
     //打印出1.用户名：，2.null，3.null，4.密码，5.null，6.null，7.aa，8.null，9.什么都没有
     //nodeValue属性获取节点的值
     //不同类型的节点有不同的返回值；
     //如果是元素节点返回null，
     //属性节点返回undefined，
     //文本节点返回文本内容。
     //alert(body_el.nodeValue);
    }
    //我们知道body元素下面有子节点
    //alert将打印的是TRUE
    //hasChildNodes();方法是判断给定的节点是否有子节点
    //如果给定的节点有子节点，则返回TRUE，如果给定的节点没有子节点则返回
    //FALSE
    var hasnod=body_elements.hasChildNodes();
    //alert(hasnod);
    var inp=document.getElementsByTagName("input");
    for(var i=0;i<inp.length;i++){
     var aa=inp;
     //使用tagName获取元素节点的标记名称
     //该元素是元素节点的独有属性，和nodeName具有相同的返回值
     //即返回标记的名称
     //var ss=aa.nodeName;
     var ss=aa.tagName;
     alert(ss);
    }
   }
  </script>
 </head>
 <body>
  用户名：<input type="text" name="username" value="" /><br>
  密码：<input type="password" name="password" value=""><br>
  aa<input type="button" value="检查" οnclick="mm()">
 </body>
</html>