获取页面元素

最新推荐文章于 2022-12-14 22:07:25 发布

shiliye_csdn

最新推荐文章于 2022-12-14 22:07:25 发布

阅读量154

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/shiliye_csdn/article/details/117334068

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

■ 获取元素

DOM在实际开发中是操作元素的，可以通过以下几种方式获取元素：

根据ID获取
根据标签名获取
通过HTML5新增方法获取
特殊元素获取

■ 根据ID获取

通过getElementById() 方法可以获取带有id的元素对象
因为文档是从上往下加载，所以标签要在script标签之上

<body>
	<div id='Time'>20210526</div>
	<script>
		var timer = document.getElementById('Time');  //id的大小写是敏感的
		console.log(timer); //输出： <div id='time'>20210526</div>，输出了完整的标签内容
		console.log(typeof timer);  //输出： object
		console.dir(timer); //输出： div#Time, console.dir用于打印返回的元素对象，更好的查看里面的属性和方法
	</script>
</body>

■ 根据标签名获取

通过getElementsByTagName() 方法可以返回带有指定标签名的对象集合
这些元素对象的集合，以伪数组的形式存储
因为得到的是一个对象的集合，所以想要操作里面的元素需要遍历
得到的元素是动态的，就是里面的内容变化，获取的结果也是变化后的

<body>
	<ul>
		<li>选项1</li>
		<li>选项2</li>
		<li>选项3</li>
	</ul>
	<script>
		var list = document.getElementsByTagName('li');
		console.log(list);  //输出： 包含获取元素的伪数组，即便值获取一个元素，返回的还是伪数组，如果没有获取任何元素，返回的是一个空的伪数组
		console.log(list[0]);  //输出：<li>选项1</li>
	
		//依次循环遍历
		for(var i = 0; i <list.length; i ++) {
			console.log(list[i]);  
		}
	</script>
</body>

还可以获取某个元素(父元素)内部所有指定标签名的子元素
父元素必须是单个对象(必须指明是哪一个元素)，获取的时候不包括父元素自己

<body>
	<ul id='ul'>
		<li>选项1</li>
		<li>选项2</li>
		<li>选项3</li>
	</ul>
	<ol>
		<li>选项11</li>
		<li>选项22</li>
		<li>选项33</li>
	</ol>

	<script>
		var ol = document.getElementsByTagName('ol');
		console.log(ol[0].getElementsByTagName('li'));  //ol是伪数组，必须要指定元素索引
	
		var ul = document.getElementById('ul');
		console.log(ul.getElementsByTagName('li'));
	
	</script>
</body>

■ 通过HTML5新增方法获取

通过getElementsByClassName() 方法，根据类名获取某些元素集合
通过querySelector() 方法，根据指定选择器返回第一个元素对象
通过querySelectorAll() 方法，根据指定选择器返回所有元素对象集合

<body>
	<div class='box' >盒子1</div>
	<div class='box' >盒子2</div>
	<div id='nav'>
		<ul>
			<li>产品</li>
			<li>首页</li>
		</ul>
	</div>
	<script>
		var boxes = document.getElementsByClassName('box');
		console.log(boxes);  //输出：class是box的所有元素对象集合
	
		var firstBox = document.querySelector('.box'); //返回指定选择器的第一个对象，类前要加'.'
		console.log(firstBox); //输出：class是box的第一个元素对象
	
		var nav = document.querySelector('#nav'); //id前要加#
		console.log(nav);  //输出：id是nav的第一个元素对象
	
		var li = document.querySelector('li');
		console.log(li);  //输出： <li>产品</li>
	
		var allBox = document.querySelectorAll('.box');
		console.log(allBox); //输出：class是box的所有元素对象集合
	
		var allLi = document.querySelectorAll('li');
		console.log(allLi); //输出：标签是li的所有元素对象集合
	</script>
</body>

■ 特殊元素获取

通过document.body 和document.documentElement ，获取body和html元素对象

获取html

var bodyEle = document.body;
console.log(bodyEle); //输出：body的元素对象

获取body

var htmlEle = document.documentElement;
console.log(htmlEle); //输出：html的元素对象

shiliye_csdn

关注

0
点赞
踩
0

收藏

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

■ 获取元素DOM在实际开发中是操作元素的，可以通过以下几种方式获取元素：根据ID获取根据标签名获取通过HTML5新增方法获取特殊元素获取■ 根据ID获取通过getElementById() 方法可以获取带有id的元素对象因为文档是从上往下加载，所以标签要在script标签之上<body> <div id='Time'>20210526</div> <script> var timer = document.getElement
复制链接

扫一扫