这是我参与 8 月更文挑战的第 28 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

6.3_获取元素

在开发中，想要操作页面上的某个部分 ( 如控制一个 div 元素的显示或隐藏、修改 div 元素的内容等 )，需要先获取到该部分对应的元素，再对其进行操作。

下面我们将分别介绍获取元素的几种常见方式。

6.3.1_根据 id 获取元素

getElementById() 方法是由 document 对象提供的用于查找元素的方法。该方法返回的是拥有指定 id 的元素，如果没有找到指定 id 的元素则返回 null ，如果存在多个指定 id 的元素则返回 undefined 。需要注意的是，JavaScript 中严格区分大小写，所以在书写时一定要遵守书写规范，否则程序会报错。

案例：演示 document.getElementById(‘id’) 方法的使用，

<body>

<div id="box">你好</div>

<script>
var Obox = document.getElementById('box');
console.log (Obox);// 结果为: <div id="box">你好</div>
console.log (typeof Obox);// 结果为: object
console.dir (Obox);// 结果为: div#box
</script>

</body>

在这里插入图片描述

上述代码中，在第2行定义了一个< div>标签，由于文档是从上往下加载的，所以第 3 ~ 8 行的 < script> 标签和 JavaScript 代码要写在第 2 行代码的下面，这样才可以正确获取到 div 元素。第 4 行代码用于获取 HTML 中 id 为 box 的元素，并赋值给变量 Obox 。需要注意的是，id 值不能像 CSS 那样加 “ # ”，如 getElementByld ( “#box” ) 是错误的。第7行的 console.dir() 方法用来在控制台中查看对象的属性和方法。

6.3.2_根据标签获取元素

根据标题名获取元素有两种方式，分别是通过 document 对象获取元素和通过 element 对象获取元素。

代码如下所示，

document.getElementByTagName ('标签名');
element.getElementsByTagName ('标签名');

上述代码中的 element 是元素对象的统称。通过元素对象可以查找该元素的子元素或后代元素，实现局部查找元素的效果，而 document 对象是从整个文档中查找元素。

由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用 push() 等方法。使用 Array.isArray() 也可以证明它不是一个数组。

案例：演示，

<!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>
</ol>

<script>
	var lis = document.getElementsByTagName('li');
// 结果为: HTMLCollection(8) [li, li, li, li, li, li, li, li]
	console.log(lis);  

// 查看集合中的索引为 0 的元素，结果为: <li>苹果</li>
	console.log(lis[0]);

//遍历集合中的所有元素
	for(var i = 0; i < lis.length; i++) {
		console.log(lis[i]);
	}

//通过元素对象获取元素
	var ol = document.getElementById('ol');
// 结果为: HTMLCollection(4) [li, li, li, li]
	console.log (ol.getElementsByTagName('li'));

</script>

</body>
</html>

在这里插入图片描述

上述代码中，
定义了一个 < ul> 无序列表，
定义了一个 id 为 ol 的 < ol> 有序列表。
演示了 document.getElementsByTagName() 的用法，其中返回的是所有 < li> 标签元素对象的集合。

需要注意的是，即使页面中只有一个 li 元素，返回结果仍然是一个集合，如果页面中没有该元素，那么将会返回一个空的集合。

通过代码的输出结果可以看出，lis 是一个包含 8 个 li 元索的集合对象，这个对象的构造函数是 HTMLCollection 。
返回集合中的第 1 个 li 元素。
采用遍历的方式依次打印了集合里面的元素对象。
演示了 element.getElementsByName() 的用法，这里的 element 必须是单个对象，不能是一个集合，所以需要用 document.getElementsById() 获取元素，再调用方法。
使用 getElementsByTagName() 去获取 ol 中的所有 li 元素。

注意：
_
getElementsByTagName() 方法获取到的集合是动态集合，也就是说，当页面增加了标签，这个集合中也会自动增加元素。

6.3.3_根据 name 获取元素

通过 name 属性来获取元素应使用 document.getElementsByName() 方法，一般用于获取表单元素。

name 属性的值不要求必须是唯一的，多个元素也可以有同样的名字，如表单中的单选框和复选框。

案例：演示复选框，

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

</head>
<body>

<p>请选择你最喜欢的水果(多选)</p>
<label><input type="checkbox" name="fruit" value="苹果">苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉">香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜">西瓜</label>

<script>
	var fruits = document.getElementsByName('fruit');
	fruits[0].checked = true;
</script>

</body>
</html>

在这里插入图片描述

在上述代码中，getElementsByName() 方法返回的是一个对象集合，使用索引获取元素。fruit [0].checked 为 true，表示将 fruits 中的第1个元素的 checked 属性值设置为 true ，表示将这一项勾选。

6.3.4_HTML5 新增的获取方式

HTML5 中为 document 对象新增了 getElementsByClassName()、 querySelector() 和 querySelectorAIl() 方法，在使用时需要考虑到浏览器的兼容性问题。

1. 根据类名获取 document.ElementsByClassName()

document.ElementsByClassName() 方法，用于通过类名来获得某些元素集合。

下面通过案例代码进行演示，

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



</head>
<body>

<span class="one">英语</span>
<span class="two">数学</span>
<span class="one">语文</span>
<span class="two">物理</span>

<script>
	
	var Ospan1 = document.getElementsByClassName('one');
	var Ospan2 = document.getElementsByClassName('two');
	Ospan1[0].style.fontWeight = 'bold';
	Ospan2[1].style.background = 'red';
	
</script>

</body>
</html>

在这里插入图片描述

上述代码中，分别使用 getElementsByClassName() 方法获取类名为 one 和 two 的集合，并分别存储在 Ospan1 和 Ospan2 中。使用下标的形式，查找并设置 Ospan1 数组中下标为 0 所对应的第 1 个元素的 fontWeight 属性为 bold，Ospan2 数组中下标为 1 所对应的第 2 个元素的 backgound 属性为 red 。

2. querySelector() 和querySelectorAIl()

querySelector() 方法用于返回指定选择器的第一个元素对象。querySelectorAll() 方法用于返回指定选择器的所有元素对象集合。

案例：演示，

<!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>

	var firstBox = document.querySelector('.box');
	console.log(firstBox); // 获取class为box的第1个div
	
	var nav = document.querySelector('#nav');
	console.log(nav); // 获取id为nav的第1个div
	
	var li = document.querySelector('li');
	console.log(li); // 获取匹配到的第1个li
	
	var allBox = document.querySelectorAll('.box');
	console.log(allBox); // 获取class为box的所有div
	
	var lis = document.querySelectorAll('li');
	console.log(lis); // 获取匹配到的所有li
	
</script>

</body>
</html>

在这里插入图片描述

从上述代码可以看出，在利用 querySelector() 和 querySelectorAlI() 方法获取操作的元素时，直接书写标签名或 CSS 选择器名称即可。根据类名获取元素时在类名前面加上 “.”，根据 id 获取元素时在 id 前面加上 “#” 。

6.3.5_document 对象的属性

document 对象提供了一些属性，可用于获取文档中的元素，例如，获取所有表单标签、图片标签等。

document 对象的属性：

属性	说明
document.body	返回文档的body元素
document.title	返回文档的title元素
document.documentElement	返回文档的html元素
document.forms	返回对文档中所有Form对象的引用
document.images	返回对文档中所有Image对象的引用

document 对象中的 body 属性用于返回 body 元素，而 documentElement 属性用于返回 HTML 文档的根节点 html 元素。

案例：演示获取 body 元素和 html 元素，

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

</head>
<body>

<script>
	
	var bodyEle = document.body;
	console.dir(bodyEle);
	
	var htmlEle = document.documentElement;
	console.log(htmlEle);
	
</script>

</body>
</html>

在这里插入图片描述

上述代码中，第 3、4 行代码通过 document.body 的方式获取 body 元素，并通过 console.dir() 的方式在控制台打印出结果。第 5、6 行代码通过 document.documentElement 的方式获取 html 元素，并输出结果。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（十三）

🌊🌈关于前言：

🌊🌈关于内容：

6.3_获取元素

6.3.1_根据 id 获取元素

6.3.2_根据标签获取元素

6.3.3_根据 name 获取元素

6.3.4_HTML5 新增的获取方式

1. 根据类名获取 document.ElementsByClassName()

2. querySelector() 和querySelectorAIl()

6.3.5_document 对象的属性

🌊🌈往期回顾：

🌊🌈关于后记：