Web前端基础—Web API基础(DOM的使用（二））

1. 排他思想

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

1. 所有元素全部清除样式（干掉其他人）；
2. 给当前元素设置样式（留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己。
   1. 自定义属性的操纵

1.获取属性值

1. element.属性   获得属性值
   1. 获取内置属性（元素本身自带的）
2. element.getAttribute（‘属性’） get 得到获取  attribute  属性的意思
   1. 获取我们自定义的属性

2.设置元素属性值

1. element.属性 = ‘值’   设置内置属性值
2. element.setAttribute（‘属性’,’值’） 主要针对于自定义属性

3.移除元素属性值

1. element.removeAttribute（‘属性’）
   1. H5自定义属性

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

自定义属性可以通过getAttribute(‘属性’)获取；

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

1. 设置H5自定义属性

H5规定：自定义属性必须以data-开头作为属性名并赋值。

比如 <div data-index=”1”></div>

或者使用JS设置

element.setAttribute(‘data-index’,2)

1. 获取H5自定义属性

1. 兼容性获取  element.getAttribute(‘data-index’);
2. H5新增element.dataset.index或者element.dataset[‘index’]  （ie 11才开始支持）--------千万不能加前面的data。
   1. 这种方法获取到的是一个集合里面存放了所有以data开头的自定义属性.

1. 节点操作

5.1为什么要学节点操作（获取元素）

获取元素通常使用的两种方法：

1. 利用DOM提供的方法获取元素

1. docum.getElementById（）
2. docum.getElementByTagName（）
3. document.querySelector（）
4. 逻辑性不强，繁琐

1. 利用DOM提供的方法获取元素

1. 利用父子兄节点关系获取元素
2. 逻辑性强，但是兼容性稍差

这两种方法都可以获取元素节点，我们后面都会使用，但是节点操作更简单

5.2节点概述

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

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

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

1. 元素节点 nodeType为1
2. 属性节点 nodeType为2
3. 文本节点 nodeType为3（文本节点包含文字、空格、换行等）

在实际开发过程中，节点操作主要操作的是元素节点。

5.3节点层级

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

1. 父级节点-------node.parentNode

1. 得到的是离元素最近的父级节点（亲爸爸）  
2. 如果找不到父级节点，返回null

1. 子节点-------parentnode.childNodes（标准）
   1. parentNode.childNodes（标准）

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

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

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

1. 1. parentNode.children（非标准）获取所有的子元素节点，也是我们实际开发常用的

parentNode.children是一个只读属性，返回所有的子元素节点，他只返回子元素节点，其余节点不返回（这个需要重点掌握）。

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

1. 1. parentNode.firstChild
      • firstChild  获取第一个子节点  不管是文本节点还是元素节点
   2. parentNode.firstElementChild

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

1. 1. parentNode.lastElementChild

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

注意：（4）（5）两个方法有兼容性问题，IE9以上才支持

★实际开发中的写法：

返回第一个子元素： parentnode.children[0] ;

返回最后一个子元素：  parentnode.children[parentnode.children.length-1] ;

1. 兄弟节点-------node.nextSibling

1. node.nextSibling

nextSibling返回当前元素的下一个兄弟节点（包含元素节点或者文本节点），找不到则返回null。同样，也是所有的节点。

1. node.previousSibling

previousSibling返回当前元素的上一个兄弟节点（包含元素节点或者文本节点），找不到则返回null。同样，也是所有的节点。

1. node.nextElementSibling

nextElementSibling返回当前元素的下一个兄弟元素节点

1. node.previousElementSibling

previousElementSibling返回当前元素的下一个兄弟元素节点

5.4创建节点----------document.createElement(‘tagName’)

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

1. 添加节点------node.appendChild(child)    追加元素 不会影响原先的内容

1. node.appendChild()  

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

1. node.insertBefore(child,指定元素)

是将一个节点添加到指定父节点的子节点列表前面，类似于css里面的before伪元素。