Web API 学习02 （节点操作）

一、操作元素

（1） 排他思想（运用于京东轮播图小圆点）
如果有一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1、先把所有元素全部清除样式
2、然后给当前元素添加样式

var imgs=document.querySelector('.box').querySelectorAll('img');
是找到类名为box的盒子里面的所有图片

二、自定义属性的操作

1、获取属性值

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

2、设置属性值（做到过，我还写错了)

element . 属性 设置内置属性值（元素本身自带的属性）
element . setAttribute（’ 属性’，‘属性值’ )；主要是设置自定义属性的值，

3、移除属性

element . removeAttribute（‘属性’）

4、H5自定义属性

由于有些自定义属性，很容易引起歧义，不能判断元素是自定义属性还是内置属性，
因此H5新增了自定义属性
（1)、设置H5自定义属性
H5规定自定义属性以data- 开头作为属性名并赋值

<div data-index = ' 1' >  </div>

或者使用JS设置自定义属性
element . setAttribute (’date-index‘ ，属性值’)

（2）H5自定义属性的获取
一种是：element . getAttribute（’ 属性’ )；主要是获取自定义属性的值，我们程序员自定义的属性（无兼容性问题）

新增的：element . dateset . index 或者 element . dateset [ 'index]（IE11以上才可以）
dataset 是一个集合，里面存放了所有以data开头的自定义属性
它只能获取以data 开头的值
如果自定义属性里面有多个 - 链接的单词，我们获取的时候采用驼峰命名法

三、节点操作

1、获取元素的方式

（1）利用DOM提供的方法获取元素：逻辑性不强，繁琐
（2）利用节点层级关系获取元素：利用父子兄节点获取
以上两种方法都可以获取元素，后面都会使用，但是节点操作更简单

2、节点描述

一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3 （文本节点包含文字，空格，换行等）
在实际开发里面，节点操作主要操作的是元素节点

3、父子节点

父节点 node . parentNode （得到的是离元素最近的父级节点
，如果找不到就返回为null）

子节点1 node . childNodes （得到的所有子节点是元素节点和文本节点（空格））（这种方法不提倡使用）

子节点2 node . children
node . firstElementChild ： 获取第一个子元素节点
node . lastElementChild ： 获取最后一个子元素节点
这两个有兼容性问题，IE9以上才支持

实际开发的写法：
node . children [ 0 ] ： 获取第一个子元素节点
node . children [parentNode . children . length-1 ] : 获取最后一个子元素节点

4、兄弟节点

node.nextSibling：获取下一个兄弟节点（包括元素节点和文本节点）
node.previousSibling：获取上一个兄弟节点
node.nextElementSibling：获取下一个元素兄弟节点
node.previousElementSibling：获取上一个元素兄弟节点

5、创建节点

document.createElement(‘tagName’)
document.createElement（ ）方法创建有tagName指定的HTML元素，因为这些元素原先不存在，是根据需求动态生成的，因此也叫动态创建元素节点

添加节点： node.appendChild(child)
node是父级，child是子级 默认在元素后面添加

node.insertBefore(child ,指定元素)：在某元素前面添加节点

页面想要添加一个新的元素：（1）创建元素并赋值；（2）添加元素

6、删除结点

node . removeChild( )
node是父级，child是子级

7、复制节点（克隆结点）

node . cloneNode ( )
如果括号为空或者为false，则为浅拷贝，只复制标签不复制内容
如果括号为true，则为深拷贝，既复制标签又复制内容

8、三种动态创建元素的区别（面试题！！！）

document.write()：如果页面文档流加载完毕，会导致重新创建一个新页面，新页面里只有你新增加的那个东西

element.innerHTML：创建多个元素效率更高（前提是：不要拼接字符串，采取数组的形式拼接），结构稍微有些复杂

document.createElement( )：创建多个元素，效率稍微低一点，但是结构更清晰

复习DOM：创建，增，删，改，查，属性操作，事件操作