通过原生js获取dom元素的九种方式

最新推荐文章于 2023-03-27 21:42:30 发布

王~子聪

最新推荐文章于 2023-03-27 21:42:30 发布

阅读量2.1k

点赞数

文章标签： javascript js dom chrome

本文链接：https://blog.csdn.net/qq_44852893/article/details/115444348

版权

获取dom元素

<body>
    <!-- <div id="box">我是一个DIV</div>
    <p class="item">这是一个p标签1</p>
    <p class="item">这是一个p标签2</p>
    <span name="x1">我是一个span标签</span>
    <span name="x1">我是一个span标签</span> -->
    <h1 class="box1">hello DOM 1 ~</h1>
    <h1 class="box1">hello DOM 2 ~</h1>
</body>

获取DOM元素：
通过JS获取页面中的元素，进行操作，js代码通常都写在

1） document.documentElement 得到整个文档（html元素）（较多使用）

 document.documentElement // 得到整个文档（html元素）
       let html = document.documentElement;
       console.log(html);

2）document.head 得到head元素

document.head //得到head元素
        let head = document.head
        console.log(head);

3）document.body 得到body元素

document.body //得到body元素
        let body = document.body
        console.log(body);

4） getElementById() 根据一个ID获取DOM元素（较多使用）

                  仅仅是获取一个，因为ID是唯一，如果有对应的ID，就获取这个元素，如果没有这个ID，得到null。

  getElementById() //根据一个ID获取DOM元素
    let div = document.getElementById("box")
    console.log(div);

5）document.getElementsByClassName() 根据class名字获取页面上的DOM元素（获取多个）

                  得到的是一个类数组（伪数组，长的像数组，本质不是数组），如果多个元素都有相同的class名字，得到多个DOM元素， 如果就一个标签有class名字，得到的也是一个伪数组，里面只有一个元素， getElementsByClassName 用的不多  对于低版本的浏览器兼容性不太好。

 document.getElementsByClassName()// 根据class名字获取页面上的DOM元素（获取多个）  得到的是一个类数组（伪数组）
    let ps = document.getElementsByClassName("item")
    console.log(ps);

6）let ps = document.getElementsByTagName(“p”);根据标签名来获取DOM元素（较多使用）

                  得到的也是一个伪数组  只要是一个伪数组，就可以通过下标得到具体的元素

document.getElementsByName() //根据标签名来获取DOM元素
   let ps = document.getElementsByTagName("p");
   console.log(ps);

7）document.getElementsByName() 根据标签上的name属性得到的对应的DOM元素

document.getElementsByName() //根据标签上的name属性得到的对应的DOM元素
        let spans = document.getElementsByName("x1")
        console.log(spans[0]);
        console.log(spans[1]);

8）document.querySelector(“选择器”); 根据选择器查找页面上对应的DOM元素（较多使用）

                  .box1是一个class选择器  如果有多个，得到的满足条件的第1个。

 document.querySelector("选择器"); // 根据选择器查找页面上对应的DOM元素， .box1是一个class选择器  如果有多个，得到的满足条件的第1个。
    let box = document.querySelector(".box1");
    console.log(box);

9）document.querySelectorAll(".box1") 获取多个元素也是一个伪数组（较多使用）

document.querySelectorAll(".box1") //获取多个元素 也是一个伪数组
        let h1s = document.querySelectorAll(".box1");
        console.log(h1s);

王~子聪

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
通过原生js获取dom元素的九种方式

获取dom元素<body> <!-- <div id="box">我是一个DIV</div> <p class="item">这是一个p标签1</p> <p class="item">这是一个p标签2</p> <span name="x1">我是一个span标签</span> <span name="x1">我是一个span标签</sp
复制链接

扫一扫