js 的常用选择器

时间：2024-04-29 00:59:19
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>$永远保存学习的心态$</title>

</head>

<body>

    <div>我是通过标签获取(紫色)</div>

    <div id="box">我是通过id获取(橙色)</div>

    <div class="box1">我是通过class获取(黄色)</div>

    <form action="" name="box2">

        我是通过name获取(绿色)

    </form>

    <div class="box3">

        我是通过querySelector获取(青色)

    </div>

    <div class="box4">我通过querySelectorAll获取(蓝色)</div>

    <script src="common.js"></script>

    <script>

        var div = document.getElementsByTagName("div")[0];

        //根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

        //document.getElementsByTagName("标签名字");

        var box = document.getElementById("box");

        //根据id属性的值获取元素,返回来的是一个元素对象

        //document.getElementById("id属性的值");

        var box1 = document.getElementsByClassName("box1")[0];

        //根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)

        //document.getElementsByName("name属性的值")

        var box2 = document.getElementsByName("box2")[0];

        //根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)

        //document.getElementsByClassName("类样式的名字")

        var box3 = document.querySelector('.box3');

        //根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)IE8以上支持

        //document.querySelector("选择器的名字");

        var box4 = document.querySelectorAll('.box4')[0];

        //根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)IE8以上支持

        //document.querySelectorAll("选择器的名字")

        div.style.color = '#8B00FF';

        box.style.color = '#ff7f00';

        box1.style.color = '#ff0';

        box2.style.color = '#00ff00';

        box3.style.color = '#0ff';

        box4.style.color = '#00f';

    </script>

</html>

</script>

</body>

</html>

相关文章