获取元素节点的方法

最新推荐文章于 2024-06-15 21:20:00 发布

一览丛山小

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量243

点赞数

分类专栏：笔记文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_62024166/article/details/120536849

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML部分

<body>
		<div id="box">1</div>
		<div id="box">1</div>
		<div class="box">2</div>
		<div class="box">2</div>
		<span>3</span>
		<span>3</span>
		<p name="footer">4</p>
		<p name="footer">4</p>
	</body>

js部分

1.根据id名字获取元素节点

	console.log(document.getElementById('box'))

2.根据class名字获取元素节点获取文档上所有class名字叫box的返回值为数组

	var oBox = document.getElementsByClassName('box');
	 	console.log(oBox)
		for(var i = 0; i < oBox.length; i++){
	 		console.log(oBox[i])
		}
	 	var oBoxArr = Array.from(oBox)
	 	oBoxArr.forEach(function(item,index,arr){
			console.log(item)
	 	})
		oBox.push(2)
	 	console.log(typeof oBox) 
		var oBoxArr = Array.from(oBox)         //Array.from()   将伪数组 转换成真数组
	 	console.log(typeof oBoxArr)

3.根据标签名字获取文档上所有该标签节点

var oSpan = document.getElementsByTagName('span')[0];
    console.log(oSpan)

4.根据name名字获取文档上所有 name名字为footer 元素节点

var oFooter = document.getElementsByName('footer');
		console.log(oFooter[1])

5.获取元素节点 id节点 #+id名字 class => .+class名字标签 => 直接写标签名字

console.log(document.querySelector("span"))    //只会获取第一个

console.log(document.querySelectorAll("span"))   //获取所有的

一览丛山小

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取元素节点的方法

HTML部分<body> <div id="box">1</div> <div id="box">1</div> <div class="box">2</div> <div class="box">2</div> <span>3</span> <span>3</span> <p name="footer">4
复制链接

扫一扫