码迷,mamicode.com
首页 > Web开发 > 详细

js 的常用选择器

时间:2019-03-14 18:00:25      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:签名   蓝色   ora   comm   action   多个   cto   for   pre   

<!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>

 

js 的常用选择器

标签:签名   蓝色   ora   comm   action   多个   cto   for   pre   

原文地址:https://www.cnblogs.com/wanguofeng/p/10531767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!