DOM之获取节点

　　DOM定义了许多方式来选取元素，包括getElementsByTagName(),getElementById(),getElementsByName(),querySelector(),querySelectorAll()等等，下面我们来分别介绍。

一、getElementById()

　　通过id名称去获取一个元素，它只有一个主语document。任何THML元素可以有一个id属性，在文档中这个值必须是唯一的。如果浏览器出现多个id名，css样式对所有该id名的元素都生效，但js脚本仅对第一个出现该id名的元素生效。这个方法接收一个参数，要取得元素的id，如果找到则返回这个元素，如果不存在则返回null。

<body>
    <style>
        #box {color: red}
    </style>
    <div id="box">第一行文字</div>
    <div id="box">第二行文字</div>
    <script>
        var box = document.getElementById('box');
        box.style.color = 'green';
    </script>
</body>

二、getElementsByTagName()

　　通过标签名称去获取一组元素，它获取到的是一组元素。接收的参数为要取元素的标签名，返回的是包含0个或者多个元素的类数组。主语为document(从整个文档中获取一组元素)或者是父级(从父级下面去获取一组元素)它具备length属性，每个数据都会有自己对应的下标。我们可以用下标的方法来获取其串的一个元素。

<body>
    <div id="box">第一行文字</div>
    <div id="box">第二行文字</div>
    <script>
        var box = document.getElementsByTagName('div');
        console.log(box);//HTMLCollection(2) [div#box, div#box, box: div#box]
        box[1].onclick = function () {
            box[1].style.color = 'green';
        }
    </script>
</body>

四、getElementsByClassName()

　　通过class去获取一组元素。HTML元素的class属性值是一个以空格隔开的列表，可以包含多个标识符。由于js中class是保留字，所以用className属性来保存HTML的class属性值。

　　getElementsByClassName()方法接收一个参数，返回带有指定类的类数组。传入多个类名时，类名的先后顺序不重要。主语为document或者是父级。

<body>
    <ul id="color">
        <li>red</li>
        <li>green</li>
        <li class="blue">blue</li>
    </ul>
    <!-- <script>
        var blues = document.getElementsByClassName('blue')
        blues[0].onclick = function () {
            blues[0].style.background = 'pink';
        }
    </script> -->
    <script>
        var color=document.getElementById('color');
        var blue1=color.getElementsByClassName('blue');
        blue1[0].onclick = function () {
            blue1[0].style.background = 'pink';
        }
    </script>
</body>

五、getElementsByName()

　　这个方法返回带有给定name特性的所有元素。不常用。

<body>
    <div name="box">第一行文字</div>
    <div name="box">第二行文字</div>
    <script>
        var box = document.getElementsByName('box');
        box[1].style.color = 'blue';
    </script>
</body>

六、querySelect()

扫描二维码关注公众号，回复： 10036691 查看本文章

　　通过css选择器去获取一个元素。querySelect()方法接收一个css选择符，返回与这个模式匹配的第一个元素，如果没有找到则返回null。这个方法可用于document也可以用于元素element。

七、querySelectAll()

　　通过css选择器获取到一组元素。querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例。如果没有找到返回一个空类数组对象。这个方法可用于document也可以用于元素element。

<body>
    <ul id="color">
        <li>red</li>
        <li>green</li>
        <li>pink</li>
        <li>
            <ul>
                <li>orange</li>
                <li>gold</li>
                <li class="blue">blue</li>
            </ul>
            </il>
    </ul>
    <script>
        var lis = document.querySelectorAll('#color ul li');
        lis[2].style.background = 'blue'
    </script>
</body

猜你喜欢