JavaScript的DOM_获取元素方法_getElementsByTagName()获取相同元素的节点列表

不管是 getElementById 还是 getElementsByTagName,在传递参数的时候,并不是所有浏览器都必须区分大小写,为了防止不必要的错误和麻烦,我们必须坚持养成区分大小写的习惯。

一、通过标签名获取节点

  1、getElementsByTagName()方法通过标签名获取节点,因为标签名会重复,所以返回一个对象数组 HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。

<script type="text/javascript">

     window.onload = function () {                         

        if(document.getElementsByTagName){                //判断是否支持 getElementsByTagName

            var li = document.getElementsByTagName('li');                 //参数传入一个标签名即可,传入*表示获取所有元素

            alert(li);                                        //返回的是一个数组集合HTMLCollection

            alert(li.length);                            //返回数组的数量

            alert(li[0]);                            //    HTMLHtmlElement节点对象,这里是第一个li标签

            alert(li.item(0));                            //同上

            

            //获取到了节点对象后就可以通过节点对象来获取内容等等属性

            alert(li[0].tagName);

            alert(li[0].innerHTML);

        }else{

            alert("浏览器不兼容,请更换")

        }

    };

</script>

</head>

<body>

     <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

     </ul>

</body>

</html>

 

 

   2、通过通配符获取HTML中的所以标签元素,IE 浏览器在使用通配符的时候,会把文档最开始的 html 的规范声明当作第一个元素节点。火狐浏览器的firebug会算上一个,关闭掉就不算了

<script type="text/javascript">

    window.onload = function () {                         

        if(document.getElementsByTagName){                //判断是否支持 getElementsByTagName

            var li = document.getElementsByTagName('*');                 //参数传入一个标签名即可,传入*表示获取所有元素

            alert(li);                                        //返回的是一个数组集合HTMLCollection

            alert(li.length);                            //返回数组的数量

            alert(li[0]);                            //    返回第一个HTMLHtmlElement节点对象

            alert(li.item(0));                            //同上

            alert(li[0].tagName);                         //在IE浏览器中第一个元素是文档的声明  !

        }else{

            alert("浏览器不兼容,请更换")

        }

    };

</script>

</head>



<body>

    <div id="box">测试Div</div>

</body>

</html>

 

 

    

   3、获取body节点对象;因为在一个HTML文档中只能有一个body节点对象,所以可以这样获取:

  window.onload = function () {                         

        if(document.getElementsByTagName){                //判断是否支持 getElementsByTagName

            var body = document.getElementsByTagName('body')[0];                 //如果没有加[0]返回的是数组,加上[0]返回的是body节点对象

            alert(body);                                        

        }else{

            alert("浏览器不兼容,请更换")

        }

    };

 

 

  4、也可以先通过getElementById获取id后,再通过getElementByTagName获取这个id下面的的指定的元素,而不是获取整个文档中的那个元素

   JavaScript的DOM_获取元素方法_getElementsByTagName()获取相同元素的节点列表

 

你可能感兴趣的:(JavaScript)