排他思想

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

①．所有元素全部清除样式（干掉其他人）

②．给当前元素设置样式（留下我自己）

③．注意顺序不能颠倒，首先干掉其他人，再设置自己

button按钮1/buttonbutton按钮2/buttonbutton按钮3/buttonbutton按钮/buttonbutton按钮5/buttonscript//1.获取所有按钮元素varbtns=document.getElementsByTagName(button);//btns得到的是伪数组里面的每一个元素btns[i]for(vari=0;ibtns.length;i++){btns[i].onclick=function(){//(1)我们先把所有的按钮背景颜色去掉干掉所有人for(vari=0;ibtns.length;i++){btns[i].style.backgroundColor=;}//(2)然后才让当前的元素背景颜色为pink留下我自己this.style.backgroundColor=pink;}}

案例：百度换肤

案例分析：

①．这个案例练习的是给一组元素注册事件

②．给个小图片利用循环注册点击事件

③．当我们点击了这个图片，让我们页面背景改为当前的图片

④．核心算法：把当前图片的src路径取过来，给body作为背景即可。

bodyulclass="baidu"liimgsrc="images/1.jpg"/liliimgsrc="images/2.jpg"/liliimgsrc="images/3.jpg"/liliimgsrc="images/.jpg"/li/ulscript//1.获取元素varimgs=document.querySelector(.baidu).querySelectorAll(img);//console.log(imgs);//2.循环注册事件for(vari=0;iimgs.length;i++){imgs[i].onclick=function(){//this.src就是我们点击图片的路径images/2.jpg//console.log(this.src);//把这个路径this.src给body就可以了document.body.style.backgroundImage=url(+this.src+);}}/script/body

案例：表格各行变色

案例分析：

①．用到新的鼠标事件，鼠标经过onmouseover鼠标离开onmouseout

②．核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标经过去掉当前的背景颜色

③．注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行。

script//1.获取元素获取的是tbody里面所有的行vartrs=document.querySelector(tbody).querySelectorAll(tr);//2.利用循环绑定注册事件for(vari=0;itrs.length;i++){//3.鼠标经过事件onmouseovertrs[i].onmouseover=function(){//console.log(11);this.className=bg;}//.鼠标离开事件onmouseouttrs[i].onmouseout=function(){this.className=;}}/script

案例：全选

案例分析：

①、全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随，全选按钮即可

②、下面复选框需要全部选中，上面全选才能选中做法：给下面所有的复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。

③、可以设置一个变量，来控制全选是否选中

script//1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可//获取元素varj_cbAll=document.getElementById(j_cbAll);varj_tbs=document.getElementById(j_tb).getElementsByTagName(input);//全选按钮注册事件j_cbAll.onclick=function(){//this.checked当前复选框的选中状态console.log(this.checked);for(vari=0;ij_tbs.length;i++){j_tbs[i].checked=this.checked;}}//给所有的子复选框注册单击事件for(vari=0;ij_tbs.length;i++){j_tbs[i].onclick=function(){//flag控制全选按钮是否选中varflag=true;//每次点击下面的复选框都要循环检查者个小按钮是否全被选中for(vari=0;ij_tbs.length;i++){if(!j_tbs[i].checked){flag=false;break;}}//设置全选按钮的状态j_cbAll.checked=flag;}}/script

自定义属性操作

element.属性获取属性值

element.getAttribute(‘属性’)；

区别：

element.属性获取内置属性值（元素本身自带的属性）

element.getAttribute(‘属性’)；主要获得自定义饭属性（标准），我们程序员自定义的属性

divid="demo"index="1"class="nav"/divscriptvardiv=document.querySelector(div);//1.获取元素的属性值//(1)element.属性console.log(div.id);//(2)element.getAttribute(属性)get得到获取attribute属性的意思我们程序员自己添加的属性我们称为自定义属性indexconsole.log(div.getAttribute(id));console.log(div.getAttribute(index));/script设置属性值

设置属性值

element.属性=‘值’设置内置属性值

element.setAttribute(‘属性’，’值’)；

区别：

element.属性设置内置属性值

element.setAttribute(‘属性’)；主要设置自定义的属性（标准）

//2.设置元素属性值//(1)element.属性=值div.id=test;div.className=navs;//(2)element.setAttribute(属性,值);主要针对于自定义属性div.setAttribute(index,2);div.setAttribute(class,footer);//class特殊这里面写的就是移出属性

element.removeAttribute(‘属性’);

//class不是className//3移除属性removeAttribute(属性)div.removeAttribute(index);

案例：tab栏

案例分析：

①、tab栏切换有2个大的模块

②、上岗的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式

③、下面的模块内容，会跟随上面的选项卡变换，所以下面模块变化写到点击事件里面

④、规律：下面的模块显示内容和上面的选项卡一一对应，相匹配

⑤、核心思路：给上面的tab_list里面所有的小li添加自定义属性，属性值从0开始

⑥、当我们点击tab_list里面的某个小li，让tab_con里面对应序号的内容显示，其余隐藏（排他思想）

script//获取元素vartab_list=document.querySelector(.tab_list);varlis=tab_list.querySelectorAll(li);varitems=document.querySelectorAll(.item);//for循环，给选项卡绑定点击事件for(vari=0;ilis.length;i++){//开始给5个小li设置索引号lis[i].setAttribute(index,i);lis[i].onclick=function(){//1.上的模块选项卡，当前这一个底色会是红色，其余不变（排他思想）//干掉所有人其余的li清除class这个类for(vari=0;ilis.length;i++){lis[i].className=;}//留下我自己this.className=current;//2.下面的显示内容模块varindex=this.getAttribute(index);console.log(index);//干掉所有人让其余的item这些div隐藏for(vari=0;iitems.length;i++){items[i].style.display=none;}//留下我自己让对应的item显示出来items[index].style.display=block;}}/scriptH5自定义属性

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

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

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

H5给我们新增了自定义属性：

①、设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如：

比如：divdata-index=”1”/div或者使用JS设置element.setAttribute(‘data-index’,2)

②、获取H5自定义属性

●兼容获取element.getAttribute（‘data-index’）；

●H5新增element.dataset.indexhuozelement.dataset[‘index’]，ie11才开始支持。

divgetTime="20"data-index="2"data-list-name="andy"/divscriptvardiv=document.querySelector(div);//console.log(div.getTime);console.log(div.getAttribute(getTime));div.setAttribute(data-time,20);console.log(div.getAttribute(data-index));console.log(div.getAttribute(data-list-name));//h5新增的获取自定义属性的方法它只能获取data-开头的//dataset是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset);console.log(div.dataset.index);console.log(div.dataset[index]);//如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法console.log(div.dataset.listName);console.log(div.dataset[listName]);/script

节点操作

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

HTMLDOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

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

●元素节点nodeType为1

●属性节点nodeType为2

●文本节点nodeType为3（文本节点包括文字、空格、换行等）

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

node.removeChild(child)

node.removeChild()方法从node节点中删除一个子节点，返回删除的节点

button删除/buttonulli熊大/lili熊二/lili光头强/li/ulscript//1.获取元素varul=document.querySelector(ul);varbtn=document.querySelector(button);//2.删除元素node.removeChild(child)//ul.removeChild(ul.children[0]);//3.点击按钮依次删除里面的孩子btn.onclick=function(){if(ul.children.length==0){this.disabled=true;}else{ul.removeChild(ul.children[0]);}}/script

案例：删除留言

案例分析：

①、当我们吧文本域里面的值赋值给li的时候，多添加一个删除的链接

②、需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li

③、阻止链接跳转需要添加Javascript：void(0);或者javascript:;

textareaname=""id=""/textareabutton发布/buttonul/ulscript//1.获取元素varbtn=document.querySelector(button);vartext=document.querySelector(textarea);varul=document.querySelector(ul);//2.注册事件btn.onclick=function(){if(text.value==){alert(您没有输入内容);returnfalse;}else{//console.log(text.value);//(1)创建元素varli=document.createElement(li);//先有li才能赋值li.innerHTML=text.value+"ahref=javascript:;删除/a";//(2)添加元素//ul.appendChild(li);ul.insertBefore(li,ul.children[0]);//(3)删除元素删除的是当前链接的li它的父亲varas=document.querySelectorAll(a);for(vari=0;ias.length;i++){as[i].onclick=function(){//删除的是li当前a所在的lithis.parentNode;ul.removeChild(this.parentNode);}}}}/script节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

父级节点

node.parentNode

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

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

divclass="demo"divclass="box"spanclass="erweima"×/span/div/divscript//1.父节点parentNodevarerweima=document.querySelector(.erweima);//varbox=document.querySelector(.box);//得到的是离元素最近的父级节点(亲爸爸)如果找不到父节点就返回为nullconsole.log(erweima.parentNode);子节点

所有子节点

parentNode.childNodes(标准)

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：

返回值里面包含了所有的子节点，包括元素节点，文本节点等。

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

子元素节点

parentNode.childNodes(非标准)

parentNode.childNodes是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

ulli我是li/lili我是li/lili我是li/lili我是li/li/ulscript//DOM提供的方法（API）获取varul=document.querySelector(ul);varlis=ul.querySelectorAll(li);//1.子节点childNodes所有的子节点包含元素节点文本节点等等console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType);console.log(ul.childNodes[1].nodeType);//2.children获取所有的子元素节点也是我们实际开发常用的console.log(ul.children);/script

第一个子节点：

parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null，同样，也是包含所有的节点

最后一个子节点

parentNode.lastChild

lastChild返回最后一个子节点，找不到则返回null，同样，也是包含所有的节点。

第一个子元素节点：

parentNode.firstElementChild

firstElementChild返回第一个子元素节点，找不到则返回null。

最后一个子元素节点：

parentNode.lastElementChild

lastElementChild返回最后一个子元素节点，找不到则返回null。

注意，这两个方法有兼容性问题，IE9以上才支持

实际开发中，firstChild和lastChild包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案：

①．如果想要第一个子元素节点，可以使用parentNode.children[0]

②．如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length-1]

olli我是li1/lili我是li2/lili我是li3/lili我是li/lili我是li5/li/olscriptvarol=document.querySelector(ol);//1.firstChild第一个子节点不管是文本节点还是元素节点console.log(ol.firstChild);console.log(ol.lastChild);//2.firstElementChild返回第一个子元素节点ie9才支持console.log(ol.firstElementChild);console.log(ol.lastElementChild);//3.实际开发的写法既没有兼容性问题又返回第一个子元素console.log(ol.children[0]);console.log(ol.children[ol.children.length-1]);/script案例：新浪下拉菜单

案例分析：

①．导航栏里面的li都要有鼠标经过的效果，所以需要循环注册鼠标事件

②．核心原理：当鼠标经过li里面的第一个ul显示，当鼠标离开，则ul隐藏。

代码：

script//1.获取元素varnav=document.querySelector(.nav);varlis=nav.children;//得到个小li//2.循环注册事件for(vari=0;ilis.length;i++){lis[i].onmouseover=function(){this.children[1].style.display=block;}lis[i].onmouseout=function(){this.children[1].style.display=none;}}/script兄弟节点

下一个兄弟节点：

node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。

上一个兄弟节点：

node.previousSibling

previousSibling返回单签元素上一个兄弟节点，找不到则返回null。

div我是div/divspan我是span/spanscriptvardiv=document.querySelector(div);//1.nextSibling下一个兄弟节点包含元素节点或者文本节点等等console.log(div.nextSibling);console.log(div.previousSibling);//2.nextElementSibling得到下一个兄弟元素节点console.log(div.nextElementSibling);console.log(div.previousElementSibling);/script

下一个兄弟元素节点（有兼容性问题）

node.nextElementSibling

nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。

上一个兄弟元素节点（有兼容性问题）

node.previousElementSibling

previousElementSibling返回当前元素上一个兄弟节点，找不到则返回null。

注意：nextElementSibling和previousElementSibling有兼容性问题，IE9以上才支持。

问：如何解决兼容性问题？

答：自己封装一个兼容性函数

functiongetNextElementSibling(element){varel=element;while(el=el.nextSibling){if(el.nodeType===1){returnel;}}returnnull;}创建节点

document.createElement(‘tagName’)

document.createElement()方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点。

node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里面的after伪元素。

node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于CSS里面的before伪元素。

ulli/li/ulscript//1.创建节点元素节点varli=document.createElement(li);//2.添加节点node.appendChild(child)node父级child是子级后面追加元素varul=document.querySelector(ul);ul.appendChild(li);//3.添加节点node.insertBefore(child,指定元素);varlili=document.createElement(li);ul.insertBefore(lili,ul.children[0]);//.我们想要页面添加一个新的元素：1.创建元素2.添加元素/script案例：简单版发布留言

案例分析：

①、核心思想：点击按钮之后，就动态创建一个li，添加到ul里面

②、创建li的同事，把文本域里面的值通过li.innerHTML赋值给li

③、如果想要新的留言后面显示就用appendChild如果想要前面显示就用insertBefore

bodytextareaname=""id=""/textareabutton发布/buttonul/ulscript//1.获取元素varbtn=document.querySelector(button);vartext=document.querySelector(textarea);varul=document.querySelector(ul);//2.注册事件btn.onclick=function(){if(text.value==){alert(您没有输入内容);returnfalse;}else{//console.log(text.value);//(1)创建元素varli=document.createElement(li);//先有li才能赋值li.innerHTML=text.value;//(2)添加元素//ul.appendChild(li);ul.insertBefore(li,ul.children[0]);}}/script/body复制（克隆）节点

node.cloneNode()

node.cloneNode()方法犯规调用该方法的节点的一个副本，也成为克隆节点/拷贝节点

注意：

①、如果括号参数为空或者flase，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

②、如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点

ulli/lili2/lili3/li/ulscriptvarul=document.querySelector(ul);//1.node.cloneNode();括号为空或者里面是false浅拷贝只复制标签不复制里面的内容//2.node.cloneNode(true);括号为true深拷贝复制标签复制里面的内容varlili=ul.children[0].cloneNode(true);ul.appendChild(lili);/script

案例：动态生成表格

案例分析：

①、因为里面的学生数据都是动态的，我们需要js动态生成，这里我们模拟数据，自己定义好的数据，数据我们采取对象形式存储；

②、所有的数据都是放到tbody里面的行里面

③、因为行很多，我们需要玄幻创建多个行（对应多少人）

④、每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格

⑤、最后一列单元格是删除，需要单独创建单元格

最后添加删除操作，点击删除，可以删除当前行。

script//1.先去准备好学生的数据vardatas=[{name:魏璎珞,subject:JavaScript,score:},{name:弘历,subject:JavaScript,score:98},{name:傅恒,subject:JavaScript,score:99},{name:明玉,subject:JavaScript,score:88},{name:大猪蹄子,subject:JavaScript,score:0}];//2.往tbody里面创建行：有几个人（通过数组的长度）我们就创建几行vartbody=document.querySelector(tbody);//遍历数组for(vari=0;idatas.length;i++){//1.创建tr行vartr=document.createElement(tr);tbody.appendChild(tr);//2.行里面创建单元格td单元格的数量取决于每个对象里面的属性个数//使用forin遍历学生对象for(varkindatas[i]){//创建单元格vartd=document.createElement(td);//把对象里面的属性值datas[i][k]给tdtd.innerHTML=datas[i][k];tr.appendChild(td);}//3.创建有删除2个字的单元格vartd=document.createElement(td);td.innerHTML=ahref="javascript:;"删除/a;tr.appendChild(td);}//.删除操作开始varas=document.querySelectorAll(a);for(vari=0;ias.length;i++){as[i].onclick=function(){//点击a删除当前a所在的行(链接的爸爸的爸爸)node.removeChild(child)tbody.removeChild(this.parentNode.parentNode)}}/script创建元素的三种方式

document.write()

element.innerHTML

document.createElement()

区别：

①、document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘；

②、innerHTML是将内容写入某个人DOM节点，不会导致页面全部重绘；

③、innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂；

④、createElement（）创建多个元素效率稍低一点点，但是结构更清晰。

总结：

不同浏览器下，innerHtml效率比createElement高

script//三种创建元素方式区别//1.document.write()创建元素如果页面文档流加载完毕，再调用这句话会导致页面重绘varbtn=document.querySelector(button);btn.onclick=function(){document.write(div/div);}//2.innerHTML创建元素varinner=document.querySelector(.inner);for(vari=0;i=;i++){inner.innerHTML+=ahref="#"百度/a}vararr=[];for(vari=0;i=;i++){arr.push(ahref="#"百度/a);}inner.innerHTML=arr.join();//3.document.createElement()创建元素varcreate=document.querySelector(.create);for(vari=0;i=;i++){vara=document.createElement(a);create.appendChild(a);}/scriptinnerHTML和createElement效率对比

innerHTML字符串拼接方式（效率低）

scriptfunctionfn(){vard1=+newDate();varstr=;for(vari=0;i0;i++){document.body.innerHTML+=divstyle="width:px;height:2px;border:1pxsolidblue;"/div;}vard2=+newDate();console.log(d2-d1);}fn();/script

createElement方式（效率一般）

scriptfunctionfn(){vard1=+newDate();for(vari=0;i0;i++){vardiv=document.createElement(div);div.style.width=px;div.style.height=2px;div.style.border=1pxsolidred;document.body.appendChild(div);}vard2=+newDate();console.log(d2-d1);}fn();/script

innerHTML数组方式（效率高）

scriptfunctionfn(){vard1=+newDate();vararray=[];for(vari=0;i0;i++){array.push(divstyle="width:px;height:2px;border:1pxsolidblue;"/div);}document.body.innerHTML=array.join();vard2=+newDate();console.log(d2-d1);}fn();/script预览时标签不可点收录于话题#个上一篇下一篇

欢迎转载,转载请注明原文网址：http://www.hnqianxun.com/bsss/16787.html