标签元素属性:
（1）行内标准属性：input.id（针对行内）
（2）行内自定义属性：开发追加的，html自己不能使用
（3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性
（4）行外属性
1.attribute方式
1.获取属性：元素.getAttribute ( "id" ) ==== 行内属性（元素.id）
如果是类型直接使用class，无需使用className，因为这种方式用的是字符串语法获取属性
2.设置属性：元素.setAttribute('属性名',属性值); ==== 元素.id = 值
3.删除属性：元素.removeAttribute('属性名'); ==== delete 元素.id
用attribute方式设置的属性只能使用attribute方式来获取
2.注意点
js点语法能获取到的属性：
（1）行内标准属性
（2）js点语法动态添加的自定义属性
不能获取到的属性：
（1）行内自定义属性
(2)行外属性
getAttribute能获取到的属性：
（1）行内标准属性
（2）行内自定义属性
（3）setAttribute动态添加的属性
不能获取到的属性：
（1）js点语法动态添加的自定义属性
（2）行外属性
3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)
标准属性操作：使用js点语法（代码简洁）
自定义属性操作：用attribute（易读性更高）
tab栏切换小案例
需求
鼠标点击tab栏页签，tab效果切换（被选中的紫色显示），同时对应的内容栏切换
效果图
思路分析
1. span与li有一个索引对应关系：第一个span对应第一个li 2. span有没有颜色：current类控制（排他） 3. li的显示也是通过：current类控制（排他） 1. 事件源：所有的span querySelectorAll('#box>.hd>span') 遍历才能用：forEach() 2. 事件类型：点击切换 || 鼠标移入 3. 事件处理 3.1 排他：span：两步走 3.2 排他：li：两步走
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; } .hd { height: 45px; } .hd span { display: inline-block; /*将行内元素转换成行内块元素，宽高才起作用*/ width: 90px; background-color: pink; line-height: 45px; text-align: center; cursor: pointer; } .hd span.current { /*交集选择器，标签指定式选择器*/ background-color: purple; /*紫色*/ } .bd li { height: 255px; background-color: purple; display: none; /*设置隐藏*/ } .bd li.current { display: block; /*显示*/ } </style> </head> <body> <div class="box" id="box"> <div class="hd"> <span>关羽</span> <span class="current">干将莫邪</span> <span>李白</span> <span>成吉思汗</span> </div> <div class="bd"> <ul id="list"> <li>我是上单</li> <li class="current">我是中单</li> <li id="li3">我是打野</li> <li>我是射手</li> </ul> </div> <script> // 分析 当鼠标点击span的时候current就移到点击事件的span上面 let spans = document.querySelectorAll('span'); // console.log(spans); let lis = document.querySelectorAll('li'); // console.log(lis); spans.forEach(function (span, i) { // 点击事件 span.onclick = function (); span.onclick = function () { // console.log(span); // spans首先得遍历 spans.forEach(function (span) { // 排他思想 得删除掉所有的current 需要用到删除的元素.classList.remove（'需要删除的类名'） span.classList.remove('current'); }); // 遍历完在给需要添加的元素添加属性 span.classList.add('current'); // 点击完之后下面的li也要跟着变化 需要用到下标i // 1先遍历lis lis.forEach(function (li) { // console.log(li); 不能要全部li只要其中一个li 鼠标点击到哪个li就跳转哪个li // 1也是使用排他思想 先把所有li删除 li.classList.remove('current'); }); // 2在用下标求出点击的li[i] lis[i].classList.add('current') } }) </script> </body> </html>
