DOM 获取元素

html5小趴菜

已于 2023-01-17 23:50:47 修改

阅读量45

点赞数

文章标签：前端 html javascript Powered by 金山文档

于 2023-01-17 20:12:05 首次发布

本文链接：https://blog.csdn.net/mx0102/article/details/128718349

版权

什么是DOM

什么是DOM
                => DOM (Document Object Model) 文档对象模型
                => 就是用来操作我们的文档流的(就是用来操作页面上的元素的) 元素就是标签
                => js给我们提供的用来操作标签的一整套属性和方法
 DOM 的核心 就是 document 对象
               document 对象是 JS 内置的一个对象, 里边存储着专门用来操作元素的各种方法
DOM: 页面中的标签, 我们通过 JS 获取到以后, 就把这个对象叫做 DOM对象(DOM节点)

获取元素

非常规标签 html head body

// 获取非常规标签
        // html
         console.log(document.documentElement);

        // head
         console.log(document.head);

        // body
         console.log(document.body);

常规标签

id 类名

标签名

name属性获取到的都是元素节点（标签）

<body>
   <div id="box">我是 ID 名为 box 的 div 标签</div>
    <div class="box_cla">我是 class 为 box_cla 的 div 标签1</div>
    <div class="box_cla">我是 class 为 box_cla 的 div 标签2</div>
    <div class="box_cla">我是 class 为 box_cla 的 div 标签3</div>
     <input type="text" name="username">
</body>
        // 常规标签的获取
        // 通过id来获取
        var res = document.getElementById('box')
         console.log(res);

        // 通过类名来获取
        var res1 = document.getElementsByClassName('box——cla')
        console.log(res1);

        // 通过标签名来获取
        var res2 = document.getElementsByTagName('div')
         console.log(res2);

        // 通过name属性来获取
        var res3 = document.getElementsByName('username')
         console.log(res3);

选择器属性

  // 2.4.1 按照选择器的形式获取标签
<body>
   <div id="box">我是 ID 名为 box 的 div 标签</div>
    <div class="box_cla">我是 class 为 box_cla 的 div 标签1</div>
    <div class="box_cla">我是 class 为 box_cla 的 div 标签2</div>
    <div class="box_cla">我是 class 为 box_cla 的 div 标签3</div>
     <input type="text" name="username">
</body>
        var box2 = document.querySelector('.box_cla')
         console.log(box2)
        var box3 = document.querySelector('div')
         console.log(box3)


        // 2.4.2 
        var box4 = document.querySelectorAll('.box_cla')
        var box5 = document.querySelectorAll('div')

        console.log(box4)
        console.log(box5)