DOM属性的基本操作

元素的属性分为：
内置属性：
操作：innerHTML/Text //返回值是当期元素的内容
id //返回值是当期元素的id
title //获取title的标签值，这个title是从document中获取
classNmae //返回值是当前元素的class
href //返回值是当前元素的href值
以上属性可以获取，也可以设置
属性的获取：链接（待补充）

非内置属性（自定义属性）：
getAttribute(name)：获取指定对象的属性名的属性值
setAttribute(name,value)：给指定对象设置属性名和属性值
removeAttribute(name)：移除指定对象的属性

如何获取DOM节点：
obj.parentNode //获得父元素节点
obj.children //获得子元素节点的集合，不包含空白节点
obj.childNodes //获得所有子节点的集合，包含空白节点
obj.firstChild //返回第一个子节点，包含空白节点
(obj.firstElementChild) //返回第一个子节点（兼容）
obj.lastChild //返回最后一个子节点
(obj.lastElementChild) //返回最后一个子节点（兼容）
obj.nextSibling //获得下一个兄弟节点
（obj.nextElementSibling）//返回下一个兄弟节点（兼容）
obj.previousSibling //获得上一个兄弟节点
(obj.previousSibling) //返回上一个兄弟节点（兼容）

如何获取属性节点：
obj.attributes //获得所有属性节点，返回一个数组

过滤空白节点：
obj.childNodes //获得子节点的集合

节点属性 nodeType 返回值为数值
节点类型（nodeType） 节点名字（nodeName） 节点值（nodeValue）
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值

注：通过遍历所有子节点，将空白节点过滤掉，得出所有的元素节点

节点的增删改查：
节点创建：
元素节点：document.createElement(tag标签名称)
文本节点：document.creatTextNode(文本内容)
属性设置：node.setAttribute(名称，值)
节点追加：
父节点.appendChild(子节点) //向父节点添加最后一个子节点
父节点.insertBefore(newnode,oldnode) //将newnode放到oldnode的前面
节点删除：
父节点.removeChild(子节点)
父节点.remove()

CSS DOM(拓展)
功能：使js可以动态给HTML添加css样式属性（行内样式）
语法：obj.style.css属性转化为js后的名称=属性值

注：css属性转化为js后的名称规则
一个单词直接写;
多个单词，第二个单词去掉“-”并且“首字母大写”;
通过js操作css样式时，要加“px”;
通过js添加的样式都会以行内样式追加