webAPI中的排他思想、自定义属性操作、节点操作（配大量案例练习）

一、排他操作

1.排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1.所有的元素全部清除样式

2.给当前的元素设置样式

注意顺序能不能颠倒，首先清除全部样式，再设置自己当前的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>01排他思想</title>
</head>
<body><button class="btn">按钮1</button><button class="btn">按钮2</button><button class="btn">按钮3</button><button class="btn">按钮4</button><button class="btn">按钮5</button><script>//1.获取到所有的元素var btns = document.getElementsByClassName('btn');//console.log(btns);//2.遍历  btns是一个数组（有length和根据索引获取元素，但是不具备数据中push等方法）for(var i = 0; i < btns.length; i++){//给所有的button都注册点击事件btns[i].onclick = function(){//alert('ok');//1)清除所有按钮的样式(重新再遍历一遍所有的btns)for(var j = 0; j < btns.length; j++){btns[j].style.backgroundColor = '';}//2)添加样式this.style.backgroundColor = 'pink';}}</script>
</body>
</html>

2.案例

案例一

百度换肤

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02百度换肤</title><style>*{margin: 0; padding: 0;}body{background: url(images/1.jpg) no-repeat center top;}li{list-style: none;}.baidu{overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li{float: left;}.baidu img{width: 100px;}.baidu:hover{cursor: pointer; /*手的形状*/}</style>
</head>
<body><ul class="baidu" id="baidu"><li><img src="images/1.jpg" alt=""></li><li><img src="images/2.jpg" alt=""></li><li><img src="images/3.jpg" alt=""></li><li><img src="images/4.jpg" alt=""></li></ul><script>//1.获取元素//1-1 获取到ul (通过id获取，就是只获取了一个对象)var ulObj = document.getElementById('baidu');//1-2 通过ul对象，找ul中的imgvar imgs = ulObj.getElementsByTagName('img')//console.log(imgs);//2.循环imgsfor(var i = 0; i < imgs.length; i++){//给每一个都注册事件imgs[i].onclick = function(){//console.log(this.src);document.body.style.backgroundImage = 'url('+this.src+')'}}</script>
</body>
</html>

案例二：隔行变色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03隔行变色</title><style>*{margin: 0; padding: 0;}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 tr td{border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: #999;}</style>
</head>
<body><table id="mytable"><thead><tr><th>代码</th><th>名称</th><th>最近公布净产值</th><th>净产值增长率</th></tr></thead><tbody><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr><tr><td>0121213</td><td>农银金穗3个月订气开放债券</td><td>1.09</td><td>1.09</td></tr></tbody></table><script>//1.获取到所有的tr（每一个tr就是一行）var mytable = document.getElementById('mytable');var trs = mytable.getElementsByTagName('tr');//console.log(trs);//2.遍历trfor(var i = 0; i < trs.length; i++){//隔行变色// if(i != 0 && i % 2 ==0){ //偶数//     trs[i].style.backgroundColor ='pink'// }if(i== 0){continue}//鼠标放在tr上，有一个背景颜色,给每个tr都注册一个鼠标放上去的事件trs[i].onmouseover = function(){this.className = 'bg';}//鼠标移开，移除背景样式trs[i].onmouseout = function(){this.className = ''}}</script>
</body>
</html>

案例三：全选全不选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04全选和全部选</title><style>*{margin: 0; padding: 0;}.wrap {width: 300px;margin: 100px auto;}table {border-spacing: 0;border: 1px solid #c0c0c0;}th,td{border: 1px solid #d0d0d0;color: #404040;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><table class="wrap"><thead><tr><th><input type="checkbox" id="j_chAll" /></th><th>商品</th><th>价格</th></tr></thead><tbody><tr><td><input type="checkbox" class="other"/></td><td>Iphone16</td><td>8000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>华为mate70</td><td>9000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>小米17</td><td>5000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>vivo</td><td>4000</td></tr></tbody></table><script>//1.获取元素//1-1 全选复选框var all = document.getElementById('j_chAll');//1-2 所有的其它复选框var others = document.getElementsByClassName('other');//通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态//通过复选框对象.checked = true/false 可以设置复选框的状态//给全选和全部选复选框注册点击事件all.onclick = function(){var flag = all.checked; //复选框的状态console.log(flag);//2.遍历所有的其它复选框for(var i = 0; i < others.length; i++){others[i].checked = flag; //设置复选框的状态}}// //看看all复选框，点击的时候发生了什么// var flag = all.checked;// console.log(flag);// all.onclick = function(){//     var flag = all.checked;//     console.log(flag);// }</script>
</body>
</html>

升级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05全选和全部选升级</title><style>*{margin: 0; padding: 0;}.wrap {width: 300px;margin: 100px auto;}table {border-spacing: 0;border: 1px solid #c0c0c0;}th,td{border: 1px solid #d0d0d0;color: #404040;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><table class="wrap"><thead><tr><th><input type="checkbox" id="j_chAll" /></th><th>商品</th><th>价格</th></tr></thead><tbody><tr><td><input type="checkbox" class="other"/></td><td>Iphone16</td><td>8000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>华为mate70</td><td>9000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>小米17</td><td>5000</td></tr><tr><td><input type="checkbox" class="other"/></td><td>vivo</td><td>4000</td></tr></tbody></table><script>//1.获取元素//1-1 全选复选框var all = document.getElementById('j_chAll');//1-2 所有的其它复选框var others = document.getElementsByClassName('other');//通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态//通过复选框对象.checked = true/false 可以设置复选框的状态//给全选和全部选复选框注册点击事件all.onclick = function(){var flag = all.checked; //复选框的状态console.log(flag);//2.遍历所有的其它复选框for(var i = 0; i < others.length; i++){others[i].checked = flag; //设置复选框的状态}}//2.遍历所有的其它复选框for(var i = 0; i < others.length; i++){others[i].onclick = function(){var ch = checkCheckbox(others); //会返回一个truefalse//console.log(ch);all.checked = ch;//给全选或全部选复选框设置值}}//检查其它的复选框的状态，如果全选就返回true，只要有一个不选就返回falsefunction checkCheckbox(chks){var ch = true;// 遍历for(var i = 0; i < chks.length; i++){//检查每一个的状态if(chks[i].checked == false){ch = false;break}}return ch;}// //看看all复选框，点击的时候发生了什么// var flag = all.checked;// console.log(flag);// all.onclick = function(){//     var flag = all.checked;//     console.log(flag);// }</script>
</body>
</html>

二、自定义属性操作

1.获取属性值

有两种方式：

element.属性，就可以获取到该元素属性的值
element.getAttribute(‘属性’)

区别：

element.属性，获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)；主要是获取自定义属性（我们程序自定义的属性）

2.设置属性的值

有两种方式：

element.属性 = 值
element.setAttribute(‘属性名’,'属性值);

区别：

element.属性 = 值设置内置属性的值
element.setAttribute(‘属性名’,'属性值); 主要设置自定义属性的值

3.移除属性

element.removeAttribute(‘属性’);

4.案例

案例一：讲课案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06.获取属性值</title>
</head>
<body><div id="demo" index="1" class="nav">123</div><script>//1.获取到div对象。根据id获取是获取到一个对象var div = document.getElementById('demo');console.log(div.id);    //获取div对象中id属性的值console.log(div.getAttribute('id')); //获取div这个对象中id这个属性的值console.log(div.index);    //***获取失败，对象.属性名只能获取本身自有属性，不能获取自定义属性console.log(div.getAttribute('index')); //获取div这个对象中index这个属性的值//2.设置对象的属性值值//2-1 element.属性 = '值'div.id = 'test'console.log(div.id);div.className = 'navs'console.log(div.className);//2-2 element.setAttribute('属性名','值').主要针对的是自定义属性div.setAttribute('index',222)console.log(div.getAttribute('index'));div.setAttribute('class','abded')console.log(div.className);//3.移除自定义属性    removeAttribute('属性名')div.removeAttribute('index')div.removeAttribute('class');</script>
</body>
</html>

案例二：tab栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07tab</title><style>*{margin: 0; padding: 0;}ul li{list-style: 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: 0px 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item {display: none;}</style>
</head>
<body><div class="tab"><div class="tab_list" id="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">手机收到了。特别特别棒，货比三家才买的，店主人很好，回答问题很有耐心，也很详细，有需要还会再来的</div><div class="item">手机社区：心中疑惑就问问买过此商品的同学吧~我要提问</div></div></div><script>//1.获取元素var tab_list = document.getElementById('tab_list');var lis = tab_list.getElementsByTagName('li');var items = document.getElementsByClassName('item');//console.log(lis);//2.利用for循环给li绑定点击事件for(var i = 0; i < lis.length; i++){//给每个li设置一个索引号lis[i].setAttribute('index',i);//注册事件lis[i].onclick = function(){//2-1 li点击有红色样式//其它要干掉for(var j = 0; j < lis.length; j++){lis[j].className = '';}//给当前点击的红色样式this.className = 'current'//2-2 点击li下面显示的内容模块变化var index = this.getAttribute('index');console.log(index);//其它的要隐藏for(var k = 0; k < items.length; k++){items[k].style.display = 'none'}items[index].style.display = 'block'}}</script>
</body>
</html>

5.H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存在页面中而不用保存在数据库中

自定义一属性获取是通过getAttribute(‘属性名’) 获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

h5给我们新增了自定义属性

设置自定义属性
h5规定自定义属性data- 开头作为属性名并赋值
如：
设置：element.setAttribute(‘data-index’,1);

获取自定义属性
兼容属性获取：element.getAttribute(‘data-index’);
h5新增了获取方式：element.dataset.index 或者 element.dataset(‘index’)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>08.H5自定义属性</title>
</head>
<body><div id="my" getTime="20" data-index="2" data-list-name="admin"></div><script>//1.获取元素var div = document.getElementById('my');console.log(div.getAttribute('getTime'));//设置一个h5属性div.setAttribute('data-time',20);console.log(div.getAttribute('data-time'));//h5新增的自定义属性的方法(  只能是data-  开头)//dataset：是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index); //2console.log(div.dataset['index']); //2//如果自定义属性里面有多个链接的单词，我们获得时候采用驼峰写法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script>
</body>
</html>

三、节点操作

1.节点概述

节点：网页中所有的内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用node表示

html DOM 树种所有的节点都可以通过javaScript来进行访问，所有的HTML元素（节点）均可被修改，也可以创建或删除

一般地：节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09节点概述</title>
</head>
<body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div id="box"><span class="erweima">我是二维码</span></div><script>var box = document.getElementById('box');console.dir(box);</script>
</body>
</html>

在这里插入图片描述

元素节点 nodeType 为 1
元素节点 nodeType 为 2
元素节点 nodeType 为 3 (文本节点内包含文字、空格、换行等等)

我们实际开发种，节点操作主要是操作元素节点

2.父节点

node.parentNode

属性可以返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点，返回null

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>10父节点</title>
</head>
<body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div id="box"><span class="erweima" id="erweima">我是二维码</span></div><script>//获取到二维码对象var erweima = document.getElementById('erweima');//node.parentNode 得到的是离元素最近的父节点，如果找不到父节点就返回nullconsole.dir(erweima.parentNode);  //div#box</script>
</body>
</html>

3.子节点

所有的子节点：

parentNode.childNodes

返回的是包含指定节点的子节点的集合，该集合即时更新的集合

**注意：**返回值里面包含了所有的子节点，包括元素节点、文本节点等

如果只需要获取到里面的元素节点，则需要专门的处理，所以我们一般不提倡使用childNodes

parentNode.children

是一个只读属性，返回的是所有的子元素节点，它只返回子元素节点，其它节点不返回（终点掌握这个）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11子节点</title>
</head>
<body><div>我是div</div><span>我是span</span><ul id="ul"><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div id="box"><span class="erweima" id="erweima">我是二维码</span></div><script>//获取ulvar ul = document.getElementById('ul');//获取ul中所有的li//var lis = ul.getElementsByTagName('li');var lis = ul.childrenconsole.log(lis);//1.字节点console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType); //3console.log(ul.childNodes[1].nodeType); //1console.log(ul.children);</script>
</body>
</html>

3.1 获取子节点

第一个节点和最后一个

parentNode.firstNode ;返回第一个子节点，找不到就返回null，通过也页包含所有的节点

parentNode.firstElementNode: 返回一个子元素节点，找不到就是null

parentNode.lastChild :最后一个子节点

parentNode.lastElementChild: 返回最后一个子元素节点，找不到就是null

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13.新浪下拉菜单</title><style>*{margin: 0; padding: 0;}li{list-style: none;}a{text-decoration: none;font-size: 14px;}#nav{margin: 100px;}#nav>li{position: relative;float: left;width: 80px;height: 40px;text-align: center;}#nav li a{display: block;width: 100%;height: 100%;line-height: 40px;color: #333;}#nav ul{display: none;}#nav>li>a:hover{background-color: #eee;}#nav ul li a:hover{background-color: #fff5da;}</style>
</head>
<body><ul id="nav"><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li></ul><script>//1.获取元素var nav = document.getElementById('nav');//2.获取livar lis = nav.children;console.log(lis);//3.循环注册事件for(var i = 0;i < lis.length; i++){lis[i].onmouseover = function(){//this.children[1] 表示当前这个li种的ulthis.children[1].style.display = 'block'}lis[i].onmouseout = function(){this.children[1].style.display = 'none'}}</script>
</body>
</html>

3.2 兄弟节点

下一个兄弟 : nextElementSibling

上一个兄弟 : previousElementSibling

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>我是h2</h2><div id="div">我是div</div><span>我是span</span><script>var div = document.getElementById('div');//1.nextSibling   下一个兄弟节点，包含了元素节点或者是文本节点等等  (了解)console.log(div.nextSibling); //下一个console.log(div.previousSibling); //上一个//2.nextElementSibling 下一个兄弟  previousElementSibling 上一个兄弟  [掌握]div.nextElementSibling.style.backgroundColor='pink'console.log(div.nextElementSibling); //下一个console.log(div.previousElementSibling); //上一个div.previousElementSibling.style.backgroundColor = 'red'</script>
</body>
</html>

4.创建添加节点

创建节点：docuemnt.createElement(tagName’);
java添加节点：node.appendChild(child);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul id="ul"><li>123</li></ul><script>//1.创建节点var li = document.createElement('li');//2.添加节点到父节点var ul = document.getElementById('ul');//加入到父节点里子元素的最后ul.appendChild(li);//ul.children[1].innerHTML = '456'//添加节点var li2 = document.createElement('li');//用insertBefore(参数一是创建的新元素，参数二添加的位置)ul.insertBefore(li2,ul.children[0]); //将新的节点，加入到ul的第一个孩子的位置console.log(li);</script>
</body>
</html>

5.案例

发布留言

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16.留言板</title><style>*{margin: 0; padding: 0;}body{padding: 100px;}textarea{width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;  /*不让修改大小*/}ul{width: 300px;padding: 5px;background-color: rgb(245,209,243);color: #fff;font-size: 14px;margin: 15px 0;}</style>
</head>
<body><textarea name="" id="comment"></textarea><br/><button id="btn">发布</button><ul id="ul"></ul><script>//1.获取元素var btn = document.getElementById('btn');var comment = document.getElementById('comment');var ul = document.getElementById('ul');//2.注册事件btn.onclick = function(){//判断是否有输入内容if(comment.value == ''){alert('请输入内容');return false;} else {//2-1 创建元素var li = document.createElement('li');//设置内容li.innerHTML = comment.value//2-2 添加元素//ul.appendChild(li); //添加到后面ul.insertBefore(li,ul.children[0]);//添加完成后清除输入框种的内容comment.value = ''}}</script>
</body>
</html>