DOM获取元素方法总结

最新推荐文章于 2022-05-23 19:10:50 发布

古塔前端

最新推荐文章于 2022-05-23 19:10:50 发布

阅读量408

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45321331/article/details/106112783

版权

1.通过id来获取元素

语法:document.getElementByid(id);
作用:根据id获取元素(标签)对象
参数：id是一个字符串，区分大小写
返回值：元素对象(object) 或 null(空)

1.1演示代码

<body>
	<div id="test">通过id获取元素</div>
 	<script>
		var id=document.getElementById('test');
		//返回的是一个匹配特定 ID的元素，<div id="test">通过id获取元素</div>
		console.log(id);
		//打印我们返回的元素对象 更好的查看里面的属性和方法
		console.dir(id);
		//返回元素数据类型，object
		console.log(typeof id);
 		</script>
</body>

2.根据标签名来获取元素

语法:doucument.getElementsTagName('标签名')或者Element.getElementsByTagName('li');
作用：根据标签名获取元素对象集合
参数:标签名，字符串格式，区分大小写
返回值:元素对象集合（伪数组，数组元素是元素对象）

2.1演示代码

<body>
	<ul>
		<li>我是小1</li>
		<li>我是小2</li>
		<li>我是小3</li>
		<li>我是小4</li>
		<li>我是小5</li>
	</ul>
	<ol id="ele">
		<li>我是ElementA</li>
		<li>我是ElementB</li>
		<li>我是ElementC</li>
		<li>我是ElementD</li>
	</ol>
	<script>
		//1.document.getElementsByTagName(‘标签名’);
		var element=document.getElementsByTagName(‘li’);
		//返回的是一个元素(li)对象集合,伪数组，字面的参数是元素对象
		console.log(element);
		//返回的是伪数组中第0个元素
		
		//2.通过Element.getElementsByTagName(‘标签名’);方法获取元素
		console.log(element[0]);
		var nav=doucument.getElementById('ele');
		//Element.getElementsByTagName('li');
		//Element是在元素中搜索，document在整个网页中查找
		var test=nav.getElementByTagName('li');
		//遍历每个元素对象
		for (var i=0;i<test.length;i++)
		{
			console.log[test[i]];
		}
	</script>
<body>

注意：getElementsByTagName()返回一个包括所有给标签名称的元素的集合。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName() 。

3.H5新增获取元素方式

3.1 通过类名获取元素对象集合

语法：document.getElementsByClassName('类名')；
用途: 通过类名获取元素对象集合
参数:类名
返回值:返回的是类的元素对象集合
兼容问题:支持ie9以上版本，包括ie9。

3.1.1 演示代码

<body>
	<div class="apple">大苹果</div>
	<div class="apple">小苹果</div>
	<script>
		var eat=document.getElementsByClassName('apple');
		//返回的是一个伪数组，里面是所有相同类名的元素
		console.log(eat);
	</script>
</body>

3.2通过指定选择器，选择第一个元素对象

语法:document.querySelector('选择器');
用途:根据指定选择器选择第一个元素对象
参数:选择器 ,类选择器前面加.(点),id选择器前面加#号
兼容问题:支持ie9以上版本，包括ie9。

3.2.1 演示代码

<body>
	<div class="banana">香蕉1</div>
	<div class="banana">香蕉2</div>
	<div id="zfb">1000万</div>
	<ul>
		<li>早上好</li>
		<li>晚上好</li>
	</ul>
	<script>
		//1.通过类选择器，选则第一个元素对象
		var eat=document.querySelector('.banana');
		// return: 香蕉1
		console.log(eat);
		
		//2.通过id选择器，选择第一个元素对象
		var zfbs=document.querySelector('#zfb');
		//return: 1000万
		console.log(zfbs);
		
		//3. 通过标签，选择第一个元素对象
		var li=document.querySelector('li');
		//return: 早上好
		console.log(li);
		
		
	</script>
</body>

3.3通过指定选择器，选择所有元素对象

语法:document.querySelectorAll('选择器');
作用:选择所有指定选择器的元素对象
参数:选择器是一个字符串，区分大小写。
兼容问题:支持ie9以上版本，包括ie9。

3.3.1 案例代码

<body>
	<ul>
		<li>早上好</li>
		<li>中午好</li>
		<li>下午好</li>
		<li>晚上好</li>
	</ul>
	<script>
		//选择所有li
		var li=document.querySelectorAll('li');
		//return: 返回的是伪数组，里面是所有元素对象
		console.log(li);
	</script>
</body>

总结:querySelector()和querySelectorAll()得区别，querySelector()是选择第一个元素对象，querySelectorAll()是选择所有相同名称元素。

4.获取特殊元素(HTML/body)

//1.获取html标签
var html=document.documentElement;
//return: <html></html>
console.log(html);

//2.获取body标签
var body=document.body;
//return: <body></body>
console.log(body);

古塔前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM获取元素方法总结

1.通过id来获取元素语法:document.getElementByid(id);作用:根据id获取元素(标签)对象参数：id是一个字符串，区分大小写返回值：元素对象(object) 或 null(空)1.1演示代码<body> <div id="test">通过id获取元素</div> <script> var id=document.getElementById('test'); //返回的是一个匹配特定 ID的元素，<
复制链接

扫一扫