DOM元素的获取方式

最新推荐文章于 2024-07-23 12:35:43 发布

BloggerM

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量437

点赞数 2

分类专栏： HTML DOM 事件文章标签： javascript html 前端

本文链接：https://blog.csdn.net/HTML_Z/article/details/124367960

版权

HTML DOM 事件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM元素

什么是DOM元素

就是网页（文档）中标签或者元素

获取DOM元素的方式

通过id的方式获取:document.getElementById("id名称")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">hello world</div>
  </body>
  <script>
    // 获取box中的内容
    // 1. 获取box这个div的DOM对象
    // 1.1 根据 id 的方式获取(获取到是一个DOM对象)

    var box = document.getElementById("box");
    console.log(box); // <div id="box">hello world</div>

    // 2. 开始获取内容
    var text = box.innerHTML;
    console.log(text); // hello world

    // 重新给div标签赋值
    box.innerHTML = "今天又是炎热的一天";
  </script>
</html>

通过tag标签的方式获取:document.getElementsByTagName("tag标签")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>hello world</div>
  </body>
  <script>
    // 获取box中的内容
    // 1. 获取box这个div的DOM对象
    // 1.1 根据 tag标签 的方式获取(获取到的一个DOM对象数组)

    var divs = document.getElementsByTagName("div");
    console.log(divs); // HTMLCollection [div]

    // 2. 开始获取内容
    // divs[0].innerHTML 通过获取到的 divs 数组下标获取内容
    var text = divs[0].innerHTML;
    console.log(text); // hello world

    // 重新给div标签赋值
    divs[0].innerHTML = "今天又是炎热的一天";
  </script>
</html>

通过class类的方式获取:document.getElementsByClassName("class类名")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">hello world</div>
  </body>
  <script>
    // 获取box中的内容
    // 1. 获取box这个div的DOM对象
    // 1.1 根据 class类的 的方式获取元素DOM对象(获取到的一个DOM对象数组)

    var boxs = document.getElementsByClassName("box");
    console.log(boxs); // HTMLCollection [div.box]

    // 2. 开始获取内容
    // div[0].innerHTML 通过获取到的 boxs 数组下标获取内容
    var text = boxs[0].innerHTML;
    console.log(text); // hello world

    // 重新给div标签赋值
    boxs[0].innerHTML = "今天又是炎热的一天";
  </script>
</html>