JS 获取 HTML DOM 元素的方法

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box" class="box"></div>
    <div class="box">2</div>
</body>
<script>
    const box1 = document.getElementById("box");
    console.log("box1:", box1);
    const box2 = document.getElementsByTagName("div");
    console.log("box2:", box2);
    const box3 = document.getElementsByClassName("box");
    console.log("box3:", box3);
    const box4 = document.querySelector(".box");
    console.log("box4:", box4);
    const box5 = document.querySelectorAll(".box");
    console.log("box5:", box5);

    console.log("document.body:", document.body);
    console.log("document.documentElement:", document.documentElement);
</script>

</html>
相关推荐
m0_47119963几秒前
【JavaScript】Set 和 Map 核心区别与实战用法(ES6 集合全解析)
前端·javascript·es6
hoiii18723 分钟前
MATLAB中主成分分析(PCA)与相关性分析的实现
前端·人工智能·matlab
小白|23 分钟前
【OpenHarmony × Flutter】混合开发性能攻坚:如何将内存占用降低 40%?Flutter 引擎复用 + ArkTS 资源回收实战指南
开发语言·javascript·flutter
大波V543 分钟前
用 nvm 彻底重装 Node 12.22.12(确保干净)
前端
和和和1 小时前
React Scheduler为何采用MessageChannel调度?
前端·javascript
Ric9701 小时前
Mac上Git不识别文件名大小写修改?一招搞定!
前端
momo061171 小时前
用一篇文章带你手写Vue中的reactive响应式
javascript·vue.js
他是龙5511 小时前
第29天:安全开发-JS应用&DOM树&加密编码库&断点调试&逆向分析&元素属性操作
开发语言·javascript·安全
和和和1 小时前
前端应该知道的浏览器知识
前端·javascript
狗哥哥1 小时前
前端基础数据中心:从混乱到统一的架构演进
前端·vue.js·架构