js中获取节点和针对节点的操作以及类名操作

获取节点

• 孩子节点

1. childNodes 获取所有子元素节点和文本节点
2. children 获取所有子元素节点
3. firstChild 获取第一个子元素节点或文本节点
4. firstElementChild 获取第一个子元素节点
5. lastChild 获取最后一个子元素节点或文本节点
6. lastElementChild 获取最后一个子元素节点

• 父节点

1. parentNode 获取父节点
2. parentElement 获取父节点，用于ie浏览器

• 兄弟节点

1. previousSibling 获取前一个文本节点和元素节点
2. previousElementSibling 获取前一个元素节点
3. nextSibling 获取下一个元素节点和文本节点
4. nextElementSibling 获取下一个元素节点

• 文本节点

1. innerText 获取该元素和其所有子元素的文本，当设置时会以指定文本替代其所有子节点
2. innerHTML 获取该元素的所有内容，当设置时会以指定内容替代其所有子节点,区别于innerText，innerHTML会渲染文本中的html标签，而innerText则原样输出文本
3. outerText 获取文本时与innerText一致，当设置文本时，会将包含当前元素及其子元素全部被指定文本代替，而innerText只会将指定文本将该元素的子元素代替
4. outerHTML 获取时，会得到包含当前元素及其子元素，而设置时会将指定内容代替当前元素及其子元素，区别于outerText，outerHTML在进行设置时会渲染文本中的html，而outerText则会原样插入
5. textContent效果同innerText一致，获取所有子元素的文本内容
6. value 获取input值

节点操作

• 创建节点

1. document.createElement 创建元素节点
2. document.createTextNode 创建文本节点
3. document.createAttribute 创建属性节点
4. 元素节点对象.setAttribute(属性名，属性值) 创建或修改元素对象对应属性的属性值

• 删除节点

1. 父节点对象.removeChild 删除指定节点对象的某个子节点
2. 父节点对象.removeAttribute 删除指定节点对象的属性节点

• 替换节点

1. 父节点对象.replaceChild(新子节点对象，被代替的子节点对象)) 将指定的新子节点对象代替指定节点对象的子节点对象

• 插入节点

1. 父节点对象.appendChild 将指定节点插入到父节点对象的最后一个子节点尾部
2. 父节点对象.insertBefore(将插入的子节点对象，被插入的子节点对象) 将指定节点插入到父节点的指定子节点前面

• 获取节点

1. document.getElementById 根据节点的id值获得指定节点对象
2. document.getElementsByClassName 根据节点的类名获得指定节点对象集合
3. document.getElementsByTagName 根据节点的标签名获得指定节点对象集合
4. document.getElementsByName 根据节点的name属性的属性值获得指定节点对象集合
5. document.querySelector 根据选择器名称获取指定节点对象
6. document.querySelectorAll根据选择器名称获取指定节点对象集合
7. document.forms 获取html中的form标签对象集合
8. document.documentElement 获取html标签对象
9. document.body 获取body标签对象
10. 元素节点对象.getAttribute 获取元素节点对象的指定属性的属性值

• 克隆节点

1. 元素节点对象.cloneNode(true) 若参数为true，克隆包含了属性和第一个子文本的元素节点对象，若为false，则克隆包含了属性的空元素节点对象，注意无论true还是false，都会克隆元素节点对象的属性

节点属性

1. 节点对象.nodeName 获取节点名称
2. 节点对象.nodeType 获取节点类型

• 节点类型

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

类名操作

• 获取类

1. 元素节点对象.className 获取或设置对于元素节点对象的类名字符串
2. 元素节点对象.classList 获取元素节点的类的伪数组
3. 元素节点对象.classList.value 等价于className

• 添加类

1. 元素节点对象.classList.add 为元素节点对象添加指定的类名

• 删除类

1. 元素节点对象.classList.remove 为元素节点对象删除指定的类名

• 替换类

1. 元素节点对象.classList.toggle 若元素节点对象有指定类，则删除该类名，若没有则添加该类名
2. 元素节点对象.classList.replace(旧类名，替换的类名) 为元素节点对象删除指定的类名，注意与之前的那些区别开，第一个参数旧类名，第二个参数是新类名

• 查找类

1. 元素节点对象.classList.contains 为元素节点对象查找指定的类名，返回布尔值
2. 元素节点对象.classList.item 根据指定的number类型参数，返回元素节点对象指定的下标值对应的类名