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

不知不觉也来掘金快两个月了，为了感谢掘金读者这段时间的支持，在主页放上了私人微信，有需要技术交流等可直接加阿ken微信与我交流哦

感激相遇你好我是阿ken

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

🌊🌈关于前言：

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

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

🌊🌈关于内容：

DOM下

7.2_属性操作

在 HTML 中，元素有一些自带的属性，如 div 元素的属性有 id、class、title、style 。开发者也可以为元素添加自定义属性。在实际开发中，自定义属性有很广泛的应用，例如：保存一些需要在 JavaScript 中用到的数据。

7.2.1_获取属性值 element.属性

在 DOM 对象中可以使用 " element.属性 " 的方式来来获取内置的属性值，但是 DOM 对象并不能直接使用点语法获取到自定义属性的值，那么如何获取收自定义属性值呢?在 DOM 中，可以使用 getAttribute(‘属性’)方法来返回指定元素的属性值。

案例：演示如何获取属性值，

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="demo" index="1" class="nav"></div>
		
		<script>
			
			var div = document.querySelector('div');
			console.log(div.id); // 结果为:demo
			console.log(div.getAttribute('id')); // 结果为:demo
			console.log(div.getAttribute('index')); // 结果为:1
			
		</script>
		
	</body>
</html>

在这里插入图片描述

上述代码中，分别使用 element.属性和 element.getAttribute 两种方式获取 div 元素的内置属性 id ,输出结果为 demo 。虽然以上两种方式都可以获取内置属性值，但是在实际运用中推荐使用 ” element. 属性 “ 这种较为简洁的方式。
使用 getAttribute(‘index’) 方式来获取开发者自定义的 index 属性，输出结果为 1 。

7.2.2_设置属性值 element.setAttribute(‘属性’,’ 值’)

在 DOM 对象中可以使用 " element.属性 = ‘值’ " 的方式设置内置的属性值，并且针对于自定义属性，提供了 " element.setAttribute(‘属性’,’ 值’) " 的方式进行设置。
值得一提的是，设置了自定义属性的标签，在浏览器中的 HTML 结构中可以看到该属性。

案例：演示如何设置属性值，

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div></div>
		
		<script>
			
			var div = document.querySelector('div');
			div.id = 'test';
			div.className = 'navs';
			div.setAttribute('index', 2);
			
		</script>
		
	</body>
</html>

上述代码中，使用 " element.属性 = ‘值’ " 的方式设置 div 元素内置属性，设置 id 值为 test , class 类名为 navs 。
使用 setAttribute() 方法，设置属性名为 index ，值为2。

另外，如果想要使用 setAttribute() 方式设置元素的类名，则可以添加以下代码。

div.setAttribute ('class', 'footer');

因为 class 比较特殊，在这里使用的属性值为 class , 值为 footer。

7.2.3_移除属性 element.removeAttribute( 属性)

掌握了元素属性的获取和设置之后，还有一个要学习的操作，就是元素属性的移除。
在DOM中使用 " element.removeAttribute( 属性) " 的方式来移除元素属性。

案例：演示如何移除属性值，

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="test" class="footer" index="2"></div>
		
		<script>
			
			var div = document.querySelector('div');
			div.removeAttribute('id');
			div.removeAttribute('class');
			div.removeAttribute('index');
			
		</script>
		
	</body>
</html>

上述代码中，使用 removeAttribute() 方法移除 div 元素的id、class、index 属性。

7.2.4_[ 案例 ] Tab栏切换

标签栏在网站中的使用非常普遍，它的优势在于可以在有限的空间内展示多块的内容，用户可以通过标签在多个内容块之间进行切换。

接下来我们使用自定义属性相关知识实现 Tab 栏切换效果。

(1) 编写 HTML 页面，示例代码如下，

<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</u1>
</div>
<div class="tab_con">
<div class="item" style=" display: block; ">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价(50000)模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>

上述代码中，class 为 tab 的元素用于实现标签栏的外边框。第 2 ~ 10 行和第 11 ~ 17 行代码分别实现标签栏的标签部分和内容部分。其中，标签部分第 1 个 li 添加了 current 样式，用于实现当前标签的选中效果。同样的，将该标签下对应的内容块 div 也添加了 display: block 样式，用于显示当前标签下的内容，隐藏其他标签下的内容。

(2) 实现标签栏切换，具体代码如下。

<script>
// 获取标签部分的所有元素对象
var tab_list = document.querySelector (' .tab_llst ');
var lis = tab_list.guerySelectorAll('li');
// 获取内容部分的所有内容对象
var items = document.querySelectorAll ('.item');
for (var i = 0;i < lis.length; i++) {  // for循环绑定点击事件
lis[i].setAttribute ('index',i);
lis[i].className = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
// 下面的显示内容模块
var index = this.getAttribute('index');
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
items[index].style.display = 'block';
};
}
</script>

上述代码中，第 3、4 行通过 querySeletorAIl() 方法获取元素。第 7 ~ 21 行代码用于遍历标签部分的每个元素对象 lis[i] ，并绑定单击事件。在事件处理函数中，第 10 ~ 12 行代码利用排他思想实现单击当前项，清除所有 li 的 class 类，并且在第 13 行给自己设置 current 类。同时当事件发生时执行第 15 ~ 19 行代码，显示当前鼠标单击的标签及其对应的内容，隐藏其他标签的显示。

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

🌊🌈往期回顾：

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

🌊🌈关于后记：

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

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

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