【Web前端学习之路】JavaScript必会DOMBOM *** 作02（黑马课程笔记）

1、排他思想

例：一排按钮，点击谁谁变色，但是其他按钮不变

思路：获取所有按钮元素，为每一个元素绑定事件，在执行当前元素之前，把所有的按钮颜色去掉，再给自己赋值

排他思想：首先排除其他人，再设置自己

但是此处有一个小问题，无论点击哪个按钮，最终控制台输出的都是“按钮5”

此处插入一个知识点：JS中for循环中的绑定事件（元素伪数组与this不能替换）

上述for代码执行流程：1、for那一行是遍历获取每一个元素对象 2、onclick那一行是为每个元素对象绑定onclick事件（只是绑定，并未执行）3、当for循环结束后，i的值变为length才会触发事件

简单来说，for循环此处仅是为了给每个元素绑定事件（因为只有绑定了事件的元素才能被触发），并不执行内部代码（只有触发事件才执行内部代码）

2、表单全选复选框案例

 注：若想消除表格单元之间的间隙，添加以下属性即可

3、元素内置属性的 *** 作

获取元素属性：getAttribute('属性');

修改元素属性：setAttribute('属性'，'值'); 

 移除元素属性：removeAttribute('属性')；

 H5中统一规定，自定义属性名以data-开头并赋值，以区分内置属性和自定义属性。

例：element.getAttribute('data-time');

H5新增的获取自定义属性的方法：element.dataset.time;

4、tab栏切换制作案例

 

这个案例的重点在于，如何实现点击不同的title出现不同的内容板块，此处给每一个title设置了一个属性值show，以用于判断当前点击的是哪一个title，将值传送给items用于显示。在每一次点击之前会先清除要显示的样式，用的是排他思想。 

5、节点 *** 作

我们之前的笔记学习中，获取元素的方法采用的是DOM提供的方法，如document.getElementById()等，但是该方法较繁琐，且逻辑性不强。

于是我们可以采取利用节点层级关系获取元素。

回顾知识点：网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

元素节点nodeType为1属性节点nodeType为2文本节点nodeType为3

父节点 parentNode

 子节点 childNodes

childNodes返回的是指定节点的子节点合集，合集中包含所有子节点，包括元素节点，文本节点等。如果想获得里面的元素节点，则需要进行判断，若取得的节点的节点类型为1，则为元素节点，专门处理较为繁琐，故不提倡使用childNodes。

 父节点.children(伪数组形式)：获得（同级）子元素节点，实际开发中常用。

 父节点.firstChild:获得第一个子节点               父节点.firstElementChild:获得第一个子元素节点  

 父节点.lastChild:获得最后一个子节点           父节点.lastElementChild:获得最后一个子元素节点

下一个兄弟节点 nextSibling (包含元素节点或者文本节点等)（换行也算文本节点）

上一个兄弟节点 previousSibling (包含元素节点或者文本节点等)

下一个兄弟元素节点 nextElementSibling

上一个兄弟元素节点 previousElementSibling

动态创建元素节点

document.creatElement（）

创建节点之后要添加进某个节点后面

添加节点

node（父元素）.appendChild()   默认是追加在原先子元素的后面

若想要在原先子元素的前面插入新节点，使用node.insertBefore(child，指定元素)

删除父元素中的一个子节点

node.removeChild(child)

克隆（复制）节点(记住要再添加)

node.cloneNode();

括号为空或者是括号里面是false 则为浅拷贝，只复制标签不复制内容

括号里面为true，则为深拷贝，复制标签和内容

 简易留言板案例（运用节点 *** 作知识点）：