JavaScript的DOM_获取元素方法_getElementsByName()获取相同名称(name)的节点列表

一、通过标签的name属性获取节点

  1、getElementsByName()方法通过标签的name属性获取节点,因为name有相同,所以返回一个对象数组HTMLCollection(NodeList)。

<script type="text/javascript">

    window.onload = function () {                         

        if(document.getElementsByName){   

            var box = document.getElementsByName('text')[0];

            alert(box); 

            box.style.color="red";            

        }else{

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

        }

    };



</script>

</head>



<body>

    <div name='text' id="box">测试Div</div>

</body>

</html>

 

 

   2、对于并不是 HTML 合法的属性,那么在 JS 获取的兼容性上也会存在差异,IE 浏览器支持本身合法的 name 属性,而不合法的就会出现不兼容的问题。

    (IE浏览器在获取不合法的HTML中的name时,会获取不到,也就是说name属性本身不是div的属性,所以IE就被忽略掉了)

<script type="text/javascript">

    window.onload = function () {                         

        if(document.getElementsByName){   

            var input = document.getElementsByName('test')[0];

            alert(input);            //HTMLInputElement]

            alert(input.name);

            alert(input.value);

            //input中有合法的name属性,所以IE也就支持了

        }else{

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

        }

    };



</script>

</head>



<body>

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

    <input type="checkbox" name="test" value="测试" checked="checked"/>

</body>

</html>

 

你可能感兴趣的:(JavaScript)