JS获取DOM元素的八种方法(含代码,简单易懂)

简介: JS获取DOM元素的八种方法(含代码,简单易懂)

让我为大家介绍一下获取DOM元素的方法吧!

1.document.getElementsByClassName(“元素类名”)[下标]

通过class类名获取元素,返回一个伪数组不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        我是第一个box
    </div>
    <div class="box">
        我是第二个box
    </div>
</body>
<script>
    // 因为我们可能有多个类名叫做box的div,使用此方法获取时添加需要获取的元素下标,0开始
    // 返回一个伪数组,不能使用数组的操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    var box = document.getElementsByClassName("box")[0]//返回第一个class类名叫做box的元素
</script>
</html>

2.document.getElementById(“元素id名”)

通过元素id获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box">
        id名不能重复哦
    </div>
</body>
<script>
    // 因为id就像人们的身份证一样,id名不能重复,所以不会像有的方法返回一个伪数组
    var box = document.getElementById("box")//返回一个id名叫box的元素
</script>
</html>

3.document.getElementsByTagName(“元素标签名”)[下标]

通过元素标签名获取元素,返回一个伪数组不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>我是第一个div标签</div>
    <div>我是第二个div标签</div>
</body>
<script>
    // 返回一个伪数组,不能使用数组的操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    var div = document.getElementsByTagName("div")[0]//返回第一个标签名为div的元素
</script>
</html>

4.document.getElementsByName(“元素name属性名”)[下标]

通过元素name属性名获取元素,返回一个伪数组不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="text" name="inp" value="我是name1">
    <input type="text" name="inp" value="我是name2">
</body>
<script>
    // 返回一个伪数组,不能使用数组操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    var inp = document.getElementsByName("inp")[0]//返回第一个name属性叫inp的元素
</script>
</html>

5.document.querySelector(“css选择器”)

通过css选择器获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        我是第一个叫box的孩子
    </div>
    <div class="box">
        我是第二个box的孩子
    </div>
    <div id="boss">
        我是id选择器
    </div>
</body>
<script>
    // 注意是第一个
    // class获取
    var box = document.querySelector(".box")//获取第一个class类叫box的元素
    // id获取
    var boss = document.querySelector("#boss")//获取id叫做boss的元素
    // 标签获取
    var div = document.querySelector("div")//获取第一个div标签
    // 还有许多选择器方法都可以获取,但要注意是获取的第一个元素
</script>
</html>

6.document.querySelectorAll(“css选择器”)[下标]

通过css选择器获取元素,返回一个伪数组不能使用数组操作方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="box">
        我是第一个叫box的孩子
    </div>
    <div class="box">
        我是第二个box的孩子
    </div>
</body>
<script>
    // 放回一个伪数组,不能使用数组操作方法
    // 记得在后面加下标,或者变量名[下标]都是可以的
    // class获取
    var box = document.querySelectorAll(".box")[0]//获取第一个class类叫box的元素
    // 标签获取
    var div = document.querySelectorAll("div")[0]//获取第一个div标签
</script>
</html>

七、document.body

获取body标签

// 获取body标签
    var body = document.body
    console.log(body);

八、document.documentElement

获取整个html标签

// 获取html
    var html = document.documentElement
    console.log(html)

感谢各位阅读,如有什么错误的地方,可以向我指出,谢谢大家!

相关文章
|
3天前
|
XML JavaScript 前端开发
属性和方法向 XML DOM 定义了编程接口
XML DOM 提供编程接口,通过属性和方法操作XML结构。使用JavaScript等语言,可访问和修改节点。属性如nodeName、nodeValue揭示节点信息,方法如getElementsByTagName、appendChild、removeChild实现查找、添加和删除节点功能。节点对象x的应用示例贯穿其中。
|
5天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
11 1
|
6天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
7天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
14 1
|
12天前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
14 0
|
14天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
27 1
|
15天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
5天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
7 2
|
15天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
16 2
|
15天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
15 0