用dir展开一个元素 上面的都是属性 方法都在__proto__中
1.dom节点 （document object model 文档对象模型）
document>documentElement>body>TagName
clidNodes (获取子节点列表的集合) （白话：孩子节点的总数）
firstchild （第一个节点）
2.我们常用的节点类型：
1.元素节点（标签）
2.属性节点（标签里面的属性）
3.文本节点（标签里面的内容）
案例： <div id="aa">
hello world
</div> (div代表的是元素节点 id代表的是属性节点 hello world代表的文本节点)
元素中有一个nodetype 的属性来判断节点 返回值为数字
1代表元素节点
2代表属性节点
3代表文本节点
4.节点的获取（重中之重）
获取元素节点的很多方法
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()属性节点获取
元素.getAttribute("属性名") 获取元素的属性值
元素.attributes 获取元素身上所有属性构成的集合 如果想得到里面的属性值 元素.attributes[1].value
元素.setAttribute("属性名","属性值") 给元素设置属性和属性值
元素.setAttribute("id","aa")
元素.removesetAttribute("属性") 删除元素属性
文本节点
没有获取的方法（无意义）
标准浏览器（ie8以上的高版本浏览器） 非标准浏览器（ie8以下的低版本浏览器）
标准浏览器会把文本节点也当成他的子节点
5.兼容性：
获取元素子节点的
元素.childNodes 这个属性有兼容性，标准浏览器会获取到文本节点，而低版本不会， 所以建议使用children这个属性 （这个属性：只读）
元素.children
获取单个子节点；
获取第一个子节点
标准浏览器下：元素.firstElementChild;
非标准浏览器下：元素.firstchild
兼容性写法：元素.firstElementChild||元素.firstchild
获取最后一个子节点：元素.lastElementChild
标准浏览器下：元素.lastElementChild
非标准浏览器下：元素.lastchild
兼容性写法：元素.lastElementChild||元素.lastchild
获取上一个节点： 元素.nextElementSibling
标准浏览器下：元素.nextElementSibling
非标准浏览器下：元素.nextsibling
兼容性写法：元素.nextElementSibling||元素.nextsibling
获取上一个子节点：元素.previousElementSibling
标准浏览器下：元素.previousElementSibling
非标准浏览器下：元素.previoussibling
兼容性写法：元素.previousElementSibling||元素.previoussibling
6.获取父节点：parentNode
元素.parentNode (不会涉及到兼容性问题，放心使用)
7.区分offsetparent和parentNode的区别？
案例：
<div id="ha"> {position：relative}
<div id="he">
<div id="zhang"> {position：absolute}
</div>
</div>
</div>offsetparent是跟定位有关的 所以他的父级是ha parent Node的父级就是他的上一级he
二。动态创建节点： 在空的div中添加内容
添加内容的几种方法；
1. 字符串拼接 （添加事件不起作用）
2.动态创建 （消耗性能最大）
3.模板创建 （字符串拼接的封装版）
4.文档碎片 （最好用的 方法一和方法二的结合）
创建节点
1.生成节点的方法：document.creatElement("div")
2.插入节点： fu元素.appendchild(新节点) 在父节点的后面添加新的节点
3.在指定的位置中插入新的节点
父元素.insertBefore(新节点，谁的前面) 将新的节点插入到指定元素的前面
4.删除元素节点
父级.removechild(要删除的节点)
