javascript获取页面元素的方式

谁践踏了优雅 2023-10-03 00:43 1阅读 0赞

#### （1）根据ID获取 ####

使用 document.getElementById() 方法

<div id = "time">2021-12-13</div>
    <script>
    	var t = document.getElementById('time');
    </script>

#### （2）根据标签名获取 ####

使用document.getElementsByTagName()方法可以返回带有指定标签名的对象集合 注意这里是Elements，复数

<ul>
    	<li> </li>
    	<li> </li>
    	<li> </li>
    	<li> </li>
    	...
    </ul>
    <script>
    	var lis = document.getElementsByTagName('li');
    	console.log(lis);
    	console.log(lis[0]);
    	//反回的是获取过来元素对象的集合，以伪数组的形式存储
    	//我们想要一次打印里面的元素就需要循环
    	for (var i = 0; i < lis.length; i++) {
          
    		console.log(lis[i]);
    	}
    	
    	//如果页面中只有一个li，返回的还是伪数组形式
    	//如果没有这个元素则返回的是空的伪数组的形式
    </script>

但是页面中可能不是只有ul里面有li，ol等里面也有li

这时我们还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象）获取的时候不包括父元素自己

var ol = document.getElementById('ol');
    var lis = ol.getElementsByTagName('li');

#### （3）通过h5新增方法获取 ####

document.getElementsByClassName(‘类名’);根据类名获取某些元素集合

document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象，切记里面的选择器需要加符号 .box \#nav

document.querySelectorAll(‘选择器’); 返回指定选择器的所有元素对象

<div class = "box">div1</div>
    <div class = "box">div2</div>
    <div id = "nav">
    	<ul>
    		<li>首页</li>
    		<li>产品</li>
    	</ul>
    </div>
    <script>
    	//通过类名
    	var boxs = document.getElementsByClassName('box');
    	//querySelector
    	var firstBox = document.querySelector('.box');
    	//id
    	var nav = document.querySelector('#nav');
    	//标签名
    	var li = document.querySelector('li');//返回’首页‘盒子
    	//querySelectorAll
    	var lis = document.querySelectorAll('li');
    </script>

#### （4）特殊元素获取 ####

##### 1、获取body元素 #####

var bodyEle = document.body;//返回body元素对象

##### 2、获取html元素 #####

var htmlEle = document.documentElement;//返回html元素对象

###  ###