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>
相关推荐
掘金安东尼19 分钟前
Caddyfile:用最简单的方式配置最现代的 Web 服务器
运维·服务器·前端
菠萝+冰31 分钟前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code33 分钟前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
云中雾丽37 分钟前
react中 所有给 children 传值的方式
前端
加蓓努力我先飞38 分钟前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端40 分钟前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
李剑一41 分钟前
vite框架下大屏适配方案
前端·vue.js·响应式设计
有点笨的蛋42 分钟前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
UIUV42 分钟前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
文心快码BaiduComate1 小时前
冰城码力全开,共赴AI Coding英雄之旅!CEDxCNCC百度文心快码Meetup圆满落幕!
前端·后端·程序员