获取DOM元素_requests拿dom-CSDN博客

本文链接：https://blog.csdn.net/html_z/article/details/128773185

获取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对象  获取到的是一个DOM对象
    var box = document.getElementById("box");
    console.log(box);
    // 2. 开始获取内容
    var text = box.innerHTML;
    console.log(text);

    box.innerHTML = "今天又是炎热的一天";
  </script>
</html>

在这里插入图片描述

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

<!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>
    <div>Hello JavaScript!</div>
  </body>
  <script>
    // 通过标签的方式进行获取
    // 获取到的是一个DOM对象数组
    var div = document.getElementsByTagName("div");
    console.log(div);
  </script>
</html>

在这里插入图片描述

通过class的方式获取DOM元素：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>
    <div class="box">Hello JavaScript</div>
  </body>
  <script>
    // 通过class类的方式进行获取元素的DOM对象
    
    var boxs = document.getElementsByClassName("box");
    console.log(boxs);
  </script>
</html>

在这里插入图片描述