JavaScript获取DOM元素的所有方法（表格形式）

最新推荐文章于 2024-10-18 18:45:21 发布

ShareJasmine

最新推荐文章于 2024-10-18 18:45:21 发布

阅读量705

点赞数 6

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ShawBurton/article/details/139023307

版权

方法	命中元素	描述
document.getElementById()	`<div id="id_name"></div>`	通过 ID 获取元素
document.getElementsByName()	`<div name="name_name"></div>`	通过name获取元素，返回的是一个数组集合
document.getElementsByTagName()	`<div></div>`	通过标签获取元素，返回的是一个数组集合
document.getElementsByClassName()	`<div class="class_name"></div>`	通过类名获取元素，返回的是一个数组集合
document.querySelector(“#selector_name”)	`<div id="selector_name"></div>`	通过css选择器获取元素，返回匹配到的第一个元素
document.querySelectorAll(“#selector_name”)	`<div id="selector_name"></div><div id="selector_name"></div>`	通过css选择器获取元素，返回的是一个数组集合
document.documentElement	`<html><html>`	获取html
document.body	`<body></body>`	获取body

实战代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取DOM元素</title>
  </head>
  <body>
    <div id="id_name">这是id_name</div>
    <div name="name_name">这是name_name</div>
    <p>p标签</p>
    <div class="class_name">这是class_name</div>
    <div id="selector_name">这是selector_name</div>
    <div id="selector_name">这是selector_name</div>
  </body>
  <script>
    // 1. 通过id
    var id_name = document.getElementById("id_name");
    console.log("1.  id_name:", id_name);
    // 2. 通过name
    var name_name = document.getElementsByName("name_name");
    console.log("2.  name_name:", name_name);
    // 3. 通过标签
    var p = document.getElementsByTagName("p");
    console.log("3.  p:", p);
    // 4. 通过类名
    var class_name = document.getElementsByClassName("class_name");
    console.log("4.  class_name:", class_name);
    // 5. 通过css选择器（单个）
    var selector_name = document.querySelector("#selector_name");
    console.log("5.  selector_name:", selector_name);
    // 6. 通过css选择器（多个）
    var selector_name = document.querySelectorAll("#selector_name");
    console.log("6.  selector_name:", selector_name);
    // 7. 获取html
    var html = document.documentElement;
    console.log("7.  html:", html);
    // 8. 获取body
    var body = document.body;
    console.log("8.  body:", body);
  </script>
</html>