DOM（2）

1. 排他思想：如果有一组元素，想要某个元素实现某种样式，需要用到循环的排他思想算法       （1）所有元素全部清除样式                                                                                                     （2）给当前元素设置样式（顺序不能颠倒） 
2. 自定义属性的操作：                                                                                                                   （1）获取属性值：                                                                                                                              ①element.属性：获取内置属性值（元素本身自带的属性）                                                      ②element.getAttribute('属性')：主要获得自定义的属性                                                （2）设置属性值：                                                                                                                              ①element.属性='值'：设置内置属性值                                                                                      ②element.setAttribute('属性','值')： 设置自定义的属性值                                             （3）移除属性：                                                                                                                                  ①element.removeAttribute('属性')       
3. 自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中   
4. H5新增自定义属性（判断是内置属性还是自定义属性）：                                                         （1）设置H5自定义属性：H5自定义属性data-开头作为属性名并且赋值，例：<div data-index="1"></div>或通过JS设置：element.setAttribute('data-index',2)                                        （2）获取H5自定义属性：①兼容性获得 element.getAttribute('data-index')                                                                       ②H5新增element.dataset.index或element.dataset['index']                                                       ③ 如果自定义属性里面有多个-链接的单词 获取时采取驼峰命名法    
5. 获取元素的两种方法：①利用DOM提供的方法获取元素，②利用节点层级关系获取元素（利用父子兄节点关系获取元素）     
6. 节点基本属性：nodeType（节点类型）、nodeValue（节点名称）和nodeName（节点名称）
7. 节点类型nodeType:①元素节点 nodeType为1                                                                                                         ②属性节点 nodeType为2                                                                                                         ③文本节点 nodeType为3（文本节点包含文字、空格、换行）                                                 注：实际开发中，节点操作主要操作的是元素节点    
8. 节点层级：利用DOM树将节点划分为不同层级关系，常见的是父子兄层级关系                        （1）父级节点：node.parentNode   （返回最近的一个父节点，如果指定的节点没有父元素则返回null）                                                                                                                            （2）子节点：①parentNode.childNodes （标准）                                                                             注：返回值里面包含所有子节点，包括元素节点、文本节点，想要只获取元素节点，需专门处理，不提倡使用childNodes                                                                                                                 ②parentNode.children（非标准）：是一个只读属性，返回所有的子元素节点。只返回子元素节点，其余节点不返回                                                                                                          ③parentNode.firstChild（返回第一个子节点，找不到则返回null，同样，也是包含所有的节点）                                                                                                                                          ④parentNode.lastChild                                                                                                              ⑤parentNode.firstElementChild                                                                                                ⑥parentNode.lastElementChild                                                                         （3）兄弟节点：①node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，同样包含所有节点                                                                                                                                        ②node.previousSibling：返回当前元素的上一个兄弟节点                                                        ③node.nextElementSibling：返回当前元素下一个兄弟元素节点，找不到返回null                                                                                                                                                                  ④node.previousElementSibling：             
9. （1）创建节点：document.createElement('tagName')（创建由tagName指定的HTML元素，因为原先不存在，称为动态创建元素节点）                                                                              （2）添加节点：①node.appendChild(child)（将一个节点添加到指定父节点列表末尾                                      ②node.insertBefore(child,指定元素)（将一个节点添加到父节点的指定子节点前面                                                                                                                                         （3）删除节点：node.removeChild(child)：（从DOM中删除一个子节点，返回删除节点）   
10. 阻止链接跳转：阻止链接跳转需要添加javascript:void(0);或者javascript:;     
11. 复制节点（克隆节点）：node.cloneNode()  （返回该方法的节点的一个副本，也称克隆节点/拷贝节点                                                                                                                                   注：①如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点                                                                                                                                                  ②如果括号里面是true，则是拷贝，复制标签和内容
12. 三种动态创建元素区别：                                                                                                           （1）document.write() ：直接将内容写入页面的内容流，但文档流执行完毕，则它会导致页面全部重绘                                                                                                                                  （2）innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘                                   （3）innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂                                                                                                                                         （4）createElement()创建多个元素效率稍低一点点，但结构更清晰