Document对象的使用：hasChildNodes()方法，nodeName、nodeValue、nodeType的简单介绍

最新推荐文章于 2022-09-21 16:24:46 发布

helloweb前端网

最新推荐文章于 2022-09-21 16:24:46 发布

阅读量538

点赞数 1

分类专栏： JavaScript 文章标签：对象

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Document对象的使用：hasChildNodes()方法，nodeName、nodeValue、nodeType的简单介绍

三、hasChildNodes()

说明：

（1）该方法用来判断一个元素是否有子节点

（2）返回值为true或者false

（3）文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用ChildNodes()方法返回值永远为false

（4）如果hasChildNodes()返回值为false，则childNodes，firstChild，lastChild将为空数组或者空字符串

四、nodeName----------节点名称

说明：

（1）文档中的每一个节点都有这个属性

（2）为给定节点的名称

（3）如果节点是元素节点，nodeName返回元素的名称

如果给定节点为属性节点，nodeName返回属性的名称

如果给定节点为文本节点，nodeName返回#text的字符串

五、nodeType----------节点的类型值

说明：

（1）该节点表明节点类型，返回值为一个整数

（2）常用的节点类型有三种：

a) 元素节点类型值为1

b) 属性节点类型值为2

c) 文本节点类型值为3

六、nodeValue----------节点的value值

说明：

（1）返回给定节点的当前值（字符串）

（2）如果给定节点是属性节点，返回值是这个属性的值

如果给定节点是文本节点，返回值是这个文本节点的内容

如果给定节点是元素节点，返回值是null

（3） nodeValue是一个读写属性

案例：

[html] view plaincopyprint?

    Example03.html  
      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
      
    <html>  
      
      <head>  
      
        <title>example01.html</title>  
      
      </head>    
      
      <body>  
      
            <div align="center">  
      
               <div id="head">  
      
                   <select name="edu" id="edus">  
      
                      <option value="篮球">篮球</option>  
      
                      <option value="足球">足球</option>                                   <option value="羽毛球">羽毛球</option>  
      
                      <option value="游泳">游泳</option>  
      
                   </select>  
      
               </div>  
      
            </div>  
      
      </body>  
      
    </html>  
      
    <script type="text/javascript">  
      
    <!--  
      
        //当窗体加载完毕后触发匿名函数  
      
        window.onload = function(){  
      
        //获取id=edus下面所有的option节点的 value值  
      
        //根据id名称 获取指定的节点对象  
      
        var edus = document.getElementById("edus");  
      
        //调用getElementsByTagName("option");获取edus下面的所有option节点对象  
      
        var options = edus.getElementsByTagName("option");  
      
           var msg="";  
      
               for(var i=0;i<options.length;i++){  
      
                  msg+=" value="+options[i].value+"----";  
      
               }  
      
               //打印出所有的属性值  
      
               //alert(msg);  
      
        edus.onchange = function(){  
      
               var options = this.getElementsByTagName("option");  
      
               //遍历  
      
               for(var i=0;i<options.length;i++){  
      
               //判断是否被选中  
      
                  if(options[i].selected){  
      
                  //打印出结果  
      
                      alert("你改变了选择："+options[i].value);  
      
                  }  
      
               }  
      
            }  
      
        }  
      
    //-->  
      
    </script>

helloweb前端网

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Document对象的使用：hasChildNodes()方法，nodeName、nodeValue、nodeType的简单介绍

Document对象的使用：hasChildNodes()方法，nodeName、nodeValue、nodeType的简单介绍三、hasChildNodes() 说明：（1）该方法用来判断一个元素是否有子节点（2）返回值为true或者false（3）文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用Child
复制链接

扫一扫

专栏目录