Dom中的选择器

最新推荐文章于 2024-01-19 20:42:22 发布

一只顾小白

最新推荐文章于 2024-01-19 20:42:22 发布

阅读量789

点赞数

分类专栏： Java Script

本文链接：https://blog.csdn.net/weixin_46673313/article/details/108728119

版权

Java Script 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

DOM（Document Object Model）文档对象模型
在js中要获取一个元素，可以用类似于css3中的选择器来获取
一个html页面就是一个文档，也就是document

不常用

使用的html代码段

<a href="./BOM.html"></a>
    <div id="app">simba
        <div class="demo">sjjsj</div>
        <div class="demo">sjjsj</div>
        <div class="demo">sjjsj</div>
        <div class="demo">sjjsj</div>
    </div>

html自带标签获取

<script>
    document.body.style.background = 'red'//页面背景色设置为“红色”
    document.title = 'hello'//页面标题设置为“hello”
</script>

通过id名来获取

<script>
let app = document.getElementById('app') //id选择器
console.log(app);
</script>

通过class名来获取

<script>
let demos = document.getElementsByClassName('demo')//获取标签名为demo的元素
        for (let i = 0; i < demos.length; i++) {
           console.log(demos[i]);
</script>

通过标签名来获取

<script>
let divs = document.getElementsByTagName('div')
     for (let i = 0; i < divs.length; i++) {
         console.log(divs[i]);

       }
</script>

常用querySelector选择器
querySelector选择可以查找单个或多个元素，具体取决于querySelector(’ ')中的选择器是什么，引号中的选择器写法和css的写法一致。注意的是获取单个的时候用querySelector，而获取多个的时候用querySelectorAll

<body>
   <script>
        let app = document.querySelector('#app') //查找单个
        console.log(app);
        let demo = document.querySelector('.demo') //查找单个
        console.log(demo);
        let demos = document.querySelectorAll('.demo') //查找多个
        console.log(demos);
        //获取id=app元素里面的class为demo的元素
        let demos1 = document.querySelectorAll('#app .demo')
        console.log(demos1);
    </script>
</body>