js 选取节点的几种方式

最新推荐文章于 2025-02-23 21:18:22 发布

Serein　

最新推荐文章于 2025-02-23 21:18:22 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/x94410891/article/details/117595228

版权

本文介绍了JavaScript中选取节点的几种常见方法，包括getElementById、getElementsByClassName、getElementsByTagName和getElementsByName。特别强调了更推荐使用querySelector和querySelectorAll，前者返回一个匹配的节点，后者返回所有匹配的节点集合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选取节点

document.getElementById()

通过 id 选取

<div id="menu"></div>

<script>
    let menuNode = document.getElementById('menu')
    console.log( menuNode ) // 节点对象
    
    // 也可以直接通过 id 操作, 因为兼容问题,所以不太推荐
    console.log( menu )
</script>

document.getElementsByClassName()

通过类名选取

<div class="book"></div>
<script>
	let books = document.getElementsByClassName('book')
    
    console.log( books )    // 返回一个类似数组的集合
    console.log( books[0] ) // 集合中的每一个
</script>

document.getElementsByTagName()

通过标签名选取

<div></div>
<script>
	let divs = document.getElementsByTagName('div')
    
    console.log( divs )    // 返回一个类似数组的集合
    console.log( divs[0] ) // 集合中的第一个
</script>

document.getElementsByName()

通过 name 属性值选取

<input type="text" name="uname" value="哈哈">
<script>
	let inputs = document.getElementsByName('uname') // 返回一个类似数组的集合
    
    console.log( inputs )    // 返回一个类似数组的集合
    console.log( inputs[0] ) // 集合中的第一个
</script>

更推荐的方式

和写 CSS选择器 一致

document.querySelector( ) 只返回一个

let s1 = document.querySelector('#s1')  // 选择 id = s1 的
let c1 = document.querySelector('.c1')  // 选择所有class=c1元素中  的第一个
let li = document.querySelector('li')   // 选择所有li标签中 的第一个

let aa = document.querySelector('div a') // 选中div标签中的 第一个a元素

document.querySelectorAll( ) 返回所有

let imgs = document.querySelectorAll('img') // 选取所有的img元素