当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js 的常用选择器

js 的常用选择器

2019年03月15日  | 移动技术网IT编程  | 我要评论 
<!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>

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网