JavaScript基础操作——获取元素 id class

最新推荐文章于 2024-09-05 10:15:55 发布

失忆症患者_

最新推荐文章于 2024-09-05 10:15:55 发布

阅读量2.8k

点赞数 2

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/qq_41929578/article/details/108967917

版权

JavaScript基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

通过id的方式获取元素节点

document.getElementById(“id_name”)

<div id="shuzi">123456</div>
<script type="text/javascript">
			//文档.得到元素的id
			var a = document.getElementById("shuzi")
			console.log(a)
			//返回元素对象,更好的查看里面的属性和方法
			console.dir(a)
</script>

通过标签的方法获取,以伪数组的形式返回元素对象的集合；

document.getElementsByTagName(‘li’)

根据类名获取元素

document.getElementsByClassName（‘类名’）

querySelector/什么都能选，返回所选的第一个元素,选择类需要. id需要#

document.querySelector(’#nav’)；
document.querySelector(‘li’)；

querySelectorAll 返回所有的匹配元素；

document.querySelectorAll(‘li’)

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="shuzi">123456</div>
		<ul class="cl">
			<li>123</li>
			<li>123</li>
			<li>123</li>
			<li>123</li>
			<li>123</li>
		</ul>
		
		<ul id="nav">
			<li class="li">1234</li>
			<li>12344</li>
			<li>12344</li>
			<li>12344</li>
			<li>12344</li>
		</ul>
		<script type="text/javascript">
			//文档.得到元素的id
			var a = document.getElementById("shuzi")
			console.log(a)
			//返回元素对象,更好的查看里面的属性和方法
			console.dir(a)
			
			//通过标签的方法获取,返回元素对象的集合,以伪数组的形式
			var b = document.getElementsByTagName('li')
			console.dir(b)
			console.log(b[1])
			
			//获取某一标签下的元素
			var nav = document.getElementById('nav')
			var c = nav.getElementsByTagName('li')
			console.log(c[0])
			
			//根据类名获取元素
			var d = document.getElementsByClassName('cl')
			console.log(d)
			
			//querySelector/什么都能选 ，返回所选的第一个元素,选择类需要.  id需要#
			var e = document.querySelector('#nav')
			console.log(e)
			var f = document.querySelector('li')
			console.log(f)
			
			//querySelectorAll 返回所有的匹配元素
			var g = document.querySelectorAll('li')
			console.log(g)
			console.log(g[0])
		</script>
	</body>
</html>