DOM本质，基础操作API，结构

DOM本质

DOM是Document Object Module的缩写。大概意思是浏览器给Javascript操作网页Html文档的一种树状数据结构，可以通过浏览器给Javascript设置的可以访问网页文档的全局变量如document、window来创建、获取、添加、删除浏览器Html文档上的节点。

DOM基础操作API

var divList = document.getElementsByTagName('div') //获取节点集
divList[0].className = 'abc'
var p = document.createElement('p') //创建节点
divList[0].appendChild(p) //添加节点
divList[0].removeChild() //删除节点
var parentElement = p.parentElement //获取父节点
var childNodes = divList[0].childnodes //获取子节点

过滤子节点元素
nodeType: number || nodeName: string
var pList = childNodes.filter(function(item, index){
  if(item.nodeType === 3) {
    return true
  }
})

property和attr的区别
property是浏览器提供给Javascript的可以用来获取或者修改节点的属性值，如className。

var div1 = document.getElementById('div1')
div1.className = 'banner'

attr是通过getAttributes和setAttributes来获取或者修改Html文档标签上的任意属性值。

var p1 = document.getElementById('p1')
var attr = p1.getAttribute('data-name')
p1.setAttribute('data-name', '123')