本文主要是介绍Web APIs 学习归纳3---元素操作的补充，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
上一节也学习了一些有关元素操作的内容，主要集中在样式、属性、内容的修改。
一、元素操作的经典案例和思想
1.1 排他思想（排除他人、保留自己）
这个内容很重要，一般情况下如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法。
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
案例1：点击的按钮变色，其余的恢复原样
案例分析：1、获取所有的button按钮，使用getElementTagName（），返回集合。2、利用循环对每一个button绑定事件。3、每一个事件内部处理时，先遍历所有的button让所有的backgroundcolor = ‘’ ；在对自己的 this.backgroundcolor设置为想要的颜色；
<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>// 1. 获取所有按钮元素 注意这里得到也是数组var btns = document.getElementsByTagName('button');// btns得到的是伪数组 里面的每一个元素 btns[i]for (let i = 0; i < btns.length; i++) {btns[i].onclick = function () {for (let j = 0; j < btns.length; j++) {btns[j].style.backgroundColor = '';}this.style.backgroundColor = 'red'}}//2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为---排他思想</script>
</body>
1.2 鼠标经过案例
案例：鼠标在某一行，这一行会改变自己的背景颜色，当鼠标离开时就会变回原来的样子。
案例分析：1、获取所有tbody下的tr；2、循环为每一个tr设置事件，鼠标经过 onmouseover，可以通过className添加类；3、循环为每一个re设置事件，鼠标离开 onmouseout ，将className 设置为空。
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head><body><table><thead><tr><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (let i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function () {this.className = 'bg'}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function () {this.className = ''}}</script>
</body>
1.3 全选反选案例
案例分析：1、获取全选的按钮、获取单选的所有按钮。2、绑定全选按钮的事件，如果点击了onclick，那么利用循环把单选的所有的checked的值都设置的和全选按钮的一样。3、绑定单选按钮的事件，通过循环实现，每一个单选按钮中都需要做一次全部单选按钮的循环，如果有一个单选按钮的值为 false，那么设置全选的checked属性为false。
<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style></head><body><div class="wrap"><table><thead><tr><th><input type="checkbox" id="j_cbAll" /></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>iPhone8</td><td>8000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Pro</td><td>5000</td></tr><tr><td><input type="checkbox" /></td><td>iPad Air</td><td>2000</td></tr><tr><td><input type="checkbox" /></td><td>Apple Watch</td><td>2000</td></tr></tbody></table></div><script>// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可// 获取元素var btn_all = document.getElementById('j_cbAll');console.log(btn_all);var ccbs = document.getElementById('j_tb').getElementsByTagName('input');console.log(ccbs);// 注册事件btn_all.onclick = function () {for (let i = 0; i < ccbs.length; i++) {ccbs[i].checked = this.checked;}}// 2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。for (let j = 0; j < ccbs.length; j++) {ccbs[j].onclick = function () {for (let i = 0; i < ccbs.length; i++) {if (!ccbs[i].checked) {btn_all.checked = false;}}}}</script>
</body></html>二、自定义属性的操作
我们以前都是直接使用：元素.内置属性；这样的方式去设置、调用元素的内置属性。但是现时使用中可能会出现需要使用不是内置属性的情况，需要我们自己去设置一些自定义的属性，同时实现自定义属性的赋值，调用，删除。
注意：一下方法不止适用于自定义类型，一样适用于内置属性！！！
2.1 自定义属性的设置
调用方法：element.setAttribute('属性', '值');
2.2 自定义属性的调用
调用方法： element.getAttribute('属性')
2.3 自定义属性的删除
调用方法： element.removeAttribute('属性')
2.4 点击切换tab栏案例（重点）
想要实现点击不同的位置显示不同的内容
案例分析：1、上方使用ul+li的方式实现，li设置为浮动。2、设置一个类，用于改变选中导航栏的背景。3、设置对应的模块的显示界面。4、获取所有的导航栏的li，获取所有的显示界面。5、使用循环对两者进行一对一的绑定操作，使用循环对两者添加相同的自定义属性和值，保证一一对应。5、并在循环中设置li的点击事件，使用排他思想把所有人的背景变成普通，然后设置自己的背景。6、同时利用排他思想，把所有显示模块都设置为隐藏，然后获取li的自定义属性的值，传递给显示模块，设置对应的模块为block。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style>
</head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></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><script>// 获取元素var lis = document.querySelector('.tab_list').querySelectorAll('li');var items = document.querySelector('.tab_con').querySelectorAll('.item');// for循环绑定点击事件for (var i = 0; i < lis.length; i++) {lis[i].setAttribute('index', i);items[i].setAttribute('index', i);lis[i].onclick = function () {for (let i = 0; i < lis.length; i++) {lis[i].className = '';}this.className = 'current';for (var i = 0; i < lis.length; i++) {items[i].style.display = 'none';}var index = this.getAttribute('index');items[index].style.display = 'block';}}</script>
</body></html>2.5 H5的自定义属性
h5新增的获取自定义属性的方法 它只能获取data-开头！！
dataset 是一个集合里面存放了所有以data开头的自定义属性！！！
console.log(div.dataset);console.log(div.dataset.index);//获取的是data-indexconsole.log(div.dataset['index']);注意：如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
//如果含有连字符 是data-list-nameconsole.log(div.dataset['listName']);这篇关于Web APIs 学习归纳3---元素操作的补充的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
