1.DOM document object model
节点树状图
document>documentElement>body>Tagname
2.常用的节点类型
元素节点（标签）
文本节点（文本）
属性节点（标签里的属性）
3.document有个属性叫node type返回的数字
1.代表元素节点 2.代表属性节点 3.代表文本节点
4.节点的获取
元素节点获取有很多方法
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByTagName()
Document.querySelector()
Document.querySelectorAll()
属性节点的获取:
元素.attributes 获取元素身上所有属性构成的集合（数组）
得到里面的值 元素.attributes[1].value
元素.getAttribute(“属性名”) 获取属性值的方法
元素.setAttribute(“属性名”,”属性值”) 给元素设置属性和属性值
文本节点
没有获取的方法，没有意思
5.获取元素的子节点
元素.childNodes 这个属性有兼容性 标准浏览器会获取到文本节点
而低版本浏览器不会。所以建议使用children这个属性。
标准下 元素.firstElementChild
非标准下 元素.firstChild
兼容下写法
var list=document.getElementById("list")
var fist=list.firstElementChild||list.firstChild
console.log(fist)
获取最后一个子节点
元素.lastElementChild 元素.lastchild
获取上一个节点
元素.previousSibling
元素.previousElementSibling
获取下一个节点
元素.nextSibling
元素.nextElementSibling
6.获取父节点
元素.parentNode 没有兼容性
--------------------------------------------------------------------------------------
DOM2动态的创建节点
1.生成节点的方法 document.createElement("div")
2.插入节点的方法 父元素.appendChild（新节点）
在父节点中的子节点后面插入新的节点
3.在指定的位置插入新的节点
父元素.insertBefore（新节点，谁的前面）将新节点插入指定的元素前面
4.删除元素节点 父元素.removeChild（）
超链接a的属性href分析
<a href=""> 点击会刷新页面，相当于向后台发送一次请求
<a href="#s"> 锚点跳转 跳转到某一个id叫s的位置上
<a href="javascript:;"> 取消刷新页面的功能
拓展：
字符串拼接和Dom创建都是渲染的方式
字符串拼接
优点：简单、层次感强、可以处理大量数据
缺点：字符串拼接会影响到原有子元素的事件
Dom创建
优点：是一个独立的个体
缺点：处理数据量过大会比较麻烦，会造成Dom回流
Dom回流
页面渲染时，我们会对html结构简单是增删查改时，浏览器会对所有的Dom进行重新排列，
这就是Dom回流，严重影响浏览器的性能。