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>
相关推荐
RiemannHypo2 分钟前
Vue3.x 全家桶 | 12 - Vue 的指令 : v-bind
前端
弹简特6 分钟前
【Java web】HTTP 与 Web 基础教程
java·开发语言·前端
海拥16 分钟前
AI 编程实践:用 Trae 快速开发 HTML 贪吃蛇游戏
前端·trae
sorryhc29 分钟前
H5大视频上传治理
前端·javascript·性能优化
ts码农37 分钟前
model层实现:
java·服务器·前端
修仙的人42 分钟前
【开发环境】 VSCode 快速搭建 Python 项目开发环境
前端·后端·python
泡芙牛牛1 小时前
CSS动画:animation、transition、transform、translate的区别
前端·css
shenyi1 小时前
openlayers实现高德地图区划+撒点+点击
前端
wwy_frontend1 小时前
不想装 Redux?useContext + useReducer 就够了!
前端·react.js
前端老鹰1 小时前
HTML <link rel="preload">:提前加载关键资源的性能优化利器
前端·性能优化·html