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>
相关推荐
excel几秒前
webpack 格式化模块工厂 第 三 节
前端
小石潭记丶1 分钟前
sqlalchemy查询json
java·前端·json
好_快2 小时前
Lodash源码阅读-baseMatchesProperty
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-hasPath
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-hasIn
前端·javascript·源码阅读
Jasmin Tin Wei2 小时前
蓝桥杯 web 展开你的扇子(css3)
前端·css·css3
好_快2 小时前
Lodash源码阅读-basePropertyDeep
前端·javascript·源码阅读
vvilkim5 小时前
深入理解 TypeScript 中的 implements 和 extends:区别与应用场景
前端·javascript·typescript
GISer_Jing5 小时前
前端算法实战:大小堆原理与应用详解(React中优先队列实现|求前K个最大数/高频元素)
前端·算法·react.js
写代码的小王吧7 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh