DOM-获取页面元素

最新推荐文章于 2023-01-12 08:15:41 发布

夏大爷耶耶耶

最新推荐文章于 2023-01-12 08:15:41 发布

阅读量164

点赞数 1

分类专栏： JS笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/121192853

版权

JS笔记专栏收录该内容

39 篇文章 3 订阅

订阅专栏

文档对象模型(Document Object Model)，是W3C阻止推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

获取页面元素的方法：1.根据id获取(getElementById()获取元素)

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>

</head>

<body>
	<div id="time">2021-10-11</div>
	<script>
		//1.文档页面从上往下加载，所以先得有标签  所以我们的script写到标签下面
		//2.get获得element元素by通过驼峰命名法
		//3.参数id是大小写敏感的字符串
		//4.返回的是一个元素对象
		var result = document.getElementById('time');
		console.log(result);
		console.log(typeof result);
		//5.console.dir打印我们返回的元素对象更好的查看里面的属性和方法
		console.dir(result);

	</script>
</body>

</html>

2.根据标签名获取(getElementsByTagName('标签名')返回带有指定标签名的对象的集合)

注意：1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。

2.得到元素对象是动态的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取某类标签元素</title>
	</head>
	<body>
		<ul>
			<li>知否知否，应是绿肥红瘦</li>
			<li>知否知否，应是绿肥红瘦</li>
			<li>知否知否，应是绿肥红瘦</li>
			<li>知否知否，应是绿肥红瘦</li>
		</ul>
		<ol id='ol'>
			<li>昨夜雨疏风骤</li>
			<li>昨夜雨疏风骤</li>
			<li>昨夜雨疏风骤</li>
			<li>昨夜雨疏风骤</li>
			<li>昨夜雨疏风骤</li>
		</ol>
		<script>
			//1.返回的是获取元素对象的集合 以伪数组的形式存储的
			var lis=document.getElementsByTagName('li');
			console.log(lis);
			console.log(lis[0]);
			//2.依次打印里面的元素对象可以采用遍历的方式
			for(var i=0;i<lis.length;i++){
				console.log(lis[i]);
			}
			//3.如果页面中只有一个li 返回的还是伪数组的形式
			//4.如果页面中没有这个元素返回的空的伪数组的形式
			//5.element.getElementsByTagName('标签名');
			//var ol=document.getElementsByTagName('ol');
			//console.log(ol[0].getElementsByTagName('li'));
			var ol=document.getElementById('ol');
			console.log(ol.getElementsByTagName('li'));
			
			            //getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别
			//getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。
			//getElementsByName():方法可返回带有指定名称的对象的集合。
			//getElementsByTagName():方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。这个理解起来有点拗口。
			//W3school中是这样定义的：此方法可返回带有指定标签名的对象的集合。
			//getElementsByClassName():方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
		</script>
	</body>
</html>

3.通过HTML5新增的方法获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">盒子1</div>
		<div class="box">盒子2</div>
		<div id="nav">
			<ul>
				<li>首页</li>
				<li>产品</li>
			</ul>
		</div>
		<script>
			//1.getElementsByClassName根据类名获得某些元素集合
			var boxs=document.getElementsByClassName('box');
			console.log(boxs);
			//2.querySelector 返回指定选择器的第一个元素对象
			var firstBox=document.querySelector('.box');
			console.log(firstBox);
			var nav=document.querySelector('#nav');
			console.log(nav);
			var li=document.querySelector('li');
			console.log(li);
			//3.querySelectorAll('选择器') 返回选择器所有元素
			var allBox=document.querySelectorAll('.box');
			console.log(allBox);
			//获取body元素
			var bodyEle=document.body;
			console.log(bodyEle);
			//获取HTML元素
			var htmlEle=document.documentElement;
			console.log(htmlEle);
			
		</script>
	</body>
</html>

getElementById, getElementsByName, getElementsByTagName, getElementsByClassName四者之间的区别

getElementById(): 这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。

getElementsByName(): 方法可返回带有指定名称的对象的集合。

getElementsByTagName(): 方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。这个理解起来有点拗口。

W3school中是这样定义的：此方法可返回带有指定标签名的对象的集合。

getElementsByClassName(): 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

夏大爷耶耶耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-获取页面元素

文档对象模型(Document Object Model)，是W3C阻止推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。获取页面元素的方法：1.根据id获取(getElementById()获取元素)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></titl
复制链接

扫一扫