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>
相关推荐
晴殇i几秒前
《效率翻倍!12个被90%前端忽视的CSS神技》
前端·css·面试
NiKo_W3 分钟前
Linux 重定向与Cookie
linux·运维·服务器·前端·网络·线程·协议
Mr_汪12 分钟前
离线工程集成其他推送
前端
惜茶20 分钟前
使用前端框架vue做一个小游戏
前端·vue.js·前端框架
普通码农35 分钟前
Vue 3 接入谷歌登录 (小白版)
前端·vue.js
Ric97040 分钟前
Object.fromEntries 实操
前端
用户40993225021244 分钟前
Vue3响应式系统中,对象新增属性、数组改索引、原始值代理的问题如何解决?
前端·ai编程·trae
阿明Drift1 小时前
使用 CSS `perspective` 实现 3D 卡片效果
前端·css
若安程序开发1 小时前
web京东商城前端项目4页面
前端
申阳1 小时前
Day 8:06. 基于Nuxt开发博客项目-我的服务模块开发
前端·后端·程序员