DOM

文档对象模型 (浏览器拿到一份html代码之后, 到最终显示的过程, 叫dom解析)

从代码中抽象出一种逻辑关系-- dom结构 (对象引用关系)

代码--------不是直接关联的--------显示

代码- dom结构(对象引用关系结构)(实际上是对象)---- 页面显示

Dom Tree：

•文档对象模型(document object model )。
•HTML DOM 将 HTML 文档视作树结构。
这种结构被称为节点树：DOM Tree

Dom的加载顺序：

就是一个页面从代码开始,一直到最终显示的过程


我们什么时候拿到代码的?  请求服务器服务器返回的html页面

•解析HTML结构(从上向下的过程)。
•加载外部脚本和样式表文件。(加载外部文件)
•
•解析并执行脚本代码。(解析外部文件)
•构造HTML DOM模型。 (dom模型结构-- 构建对象引用的关系)

当dom结构的对象关系构建完成, 那么就已经可以在页面上显示了


•加载图片等外部文件。
•页面加载完毕。

•dom树中的节点彼此拥有层级关系
•父、子 和同胞(兄弟或姐妹）专指元素节点。
•在节点树中，顶端节点被称为根（root）
•每个节点都有父节点、除了根（它没有父节点）
•一个节点可拥有任意数量的子节点
•同胞是拥有相同父节点的节点
•整个文档是一个文档节点
•每个 HTML 元素是元素节点
•HTML 元素内的文本是文本节点
•每个 HTML 属性是属性节点
•注释是注释节点

操作引用关系：

获得节点：

•获得节点的常用方法
•getElementById():  固定id对应的节点
•var div1 = document.getElementById('div1')
•
•getElementsByName():  获得节点数组, 根据name属性
•var div2 = document.getElementsByName('div2')
•
•数组
•getElementsByTagName(): 获得节点数组, 根据标签名
var  div3  = document.getElementsByTagName('div')

添加一个节点：

AppendChild():  添加子节点

删除一个节点：

RemoveChild():   删除一个子节点

替换一个节点：

ReplaceChild() :  替换一个节点

Inner：

•innerText&innerHTML

innerText：

改变一个节点的内部文本
var div1  = document.getElementById('div1')
 div1.innerText = '123'

innerHTML：

也是向一个节点中插入内容, 但是可以插入html代码(html代码在这个插入过程中是可以解析的)