页面中有相同id,DOM对节点的获取

    xiaoxiao2021-03-25  197

    当一个web页面中,有多个id相同的元素,DOM的根据id查询节点的操作是怎么进行的呢?

    首先,要明确的是id选择器规则上是不允许有相同的,要保证id是唯一的。如果是有共同属性的某类元素进行操作时,用class选择器。

    其次,页面当中是可以存在多个相同id,页面能正常显示,且不会出现错误。

    鉴于这个问题被面试官提及,虽然感觉工作上不会如此使用,但还是做了一下测试。

    公共js代码:

    <script type="text/javascript"> function t1(){ var p = document.getElementById("first"); console.log(p.innerHTML); } </script>

    测试1:同级标签,赋上相同的id

    body部分:

    <div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <div> <p id="first">1111111</p> </div> <div> <p id="first">22222</p> </div> 结果:

    测试2:父子级标签,赋上相同id

    body部分:

    <div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <div id="first"> 3333333 <p id="first">1111111</p> </div> 结果: 测试3:“叔侄”级标签,赋上相同的id,“叔”级标签在前 body部分: <div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <p id="first">444444</p> <div> <p id="first">1111111</p> </div> 结果: 测试4:“叔侄”级标签,赋上相同的id,“叔”级标签在后 body部分: <div> <input type="button" value="按钮1" οnclick="t1();"/> </div> <div> <p id="first">1111111</p> </div> <p id="first">555555</p> 结果:

    综上,在一个web页面中,存在多个相同id的元素时,DOM的根据id查询节点,读取到的是 从上至下读取到的第一个id的元素节点,与其他相同id的元素无关。但在使用时,仍然建议按规定来一个页面中的id是唯一的,避免发生不必要的错误。

    转载请注明原文地址: https://ju.6miu.com/read-326.html

    最新回复(0)