2020-09-04---DOM

一、创建对象

1. 元素节点对象
   document.createElement()
2. 文本节点对象
   document.createTextNode()
3. 文档碎片
   document.createDocumentFragment()

二、添加节点对象

1. 父节点.appendChild(子节点) //追加节点
2. 父节点.insertBefore(新子节点，指定的子节点) //插入节点

三、修改节点对象

父节点.replcae(新节点，旧节点)

四、删除节点对象

1. 父节点.removeChild(子节点) //删除子节点
2. 当前节点.remove() //删除自己 （有兼容）

五、克隆节点对象

节点对象.cloneNode([true])

• false 默认值 ,只克隆当前节点，不包含内容
• true 克隆当前节点，包含内容

六、常见节点及节点属性

	nodeName	nodeType	nodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容（纯文本）

七、访问或设置元素节点中的属性

1. 支持
   对象.属性
   对象[‘属性’]
2. 不支持
   对象.setAttribute(‘属性’,‘值’)
   对象.getAttribute(‘属性’)
   对象.removeAttribute(‘属性’)

八、outerHTML、innerHTML、innerText

1. outerHTML : 设置或获取当前标签及所有内容
2. innerHTML : 设置或获取当前标签中的内容（包含超文本，会解析超文本）
3. innerText ： 设置或获取当前标签中的内容（只有纯文本，不会解析超文本）

九、获取所有的子节点

1. childNodes : 获取元素子节点和文本子节点
2. children：只获取元素子节点

十、高级选项

• parentNode : 父节点
• firstChild：第一个子节点
• lastChild：最后一个子节点
• previousSibling：前一个兄弟节点
• nextSibling：下一个兄弟节点

下面的有兼容

• firstElementChild：第一个元素子节点
• lastElementChild：最后一个元素子节点
• previousElementSibling：前一个元素兄弟节点
• nextElementSibling：后一个元素兄弟节点

十一、offsetWidth、offsetHeight

offsetWidth : 元素的相对宽度 width + padding+ border
offsetHeight ： 元素的相对高度 height + padding + border

十二、获取非行内样式

标准浏览器 ： getComputedStyle(ele,1) [‘属性’]
IE9以下 ： ele.currentStyle[‘属性’]
兼容

十三、offsetLeft、offsetTop