[TOC]
1.定义：
DOM全称为“Document Object Model” 文档对象模型。其实说白了就是针对HTML文档的一个API(应用程序接口)
DOM 把HTML文档描绘成一个层次化的节点数(树形结构) ，以便开发人员增删改查 进行各种操作
DOM Tree
如上图所述 DOM 树形结构 而元素 标签(<a>) 就是节点 也是DOM最小组成单位。
2.节点（Node）
DOM1定义了一个node接口，以实现所有node节点类型
其中nodetype属性，可以知道属于哪种节点类型
3.查找元素的常用三个方法
getElementById // 通过id查找
getElementsByTagName //通过标签名查找
getElementsByClassName // 通过类名查找
4.获取元素的常用属性
- parentNode //父节点
- childNodes //字节点[]
- offsetParent //获取当前元素定位的父级元素节点
- firstChild //获取父元素下的第一个子节点
- lastChild //获取父元素下的最个一个子节点
- nextSibling //获取紧跟在当前节点后面的第一个同级节点，没有为null
- previousSibling //获取当前节点前面的、距离最近的一个同级节点 没有则为null
5.操作节点常用方法
- appendChind() //填加子节点为最后
- insertBefore() //插入节点为指定的位置（接受两个参数：插入的节点，作为参照的节点）
- replaceChind() //替换节点
- removeChind() //移除节点
- cloneNode() //复制节点 参数是布尔值 就是false 和true(深复制)
- hasChildNodes() //是否有子节点
6.做个DOM操作的小例子
比如像发微博一样 需要一个文本框 一个按钮 然后 输入内容 点一下按钮就会出现 下面就会出现写的内容
<textarea id="text"> </textarea>
<input id = "button" type="button" value="发布">
<ul id ="ul">
<li>今天真开心</li>
</ul>
window.onload=function ()
{
var Btn=document.getElementById('button');
var Txt=document.getElementById('text');
var Ul=document.getElementById('ul');
Btn.onclick=function ()
{
var Li=document.createElement('li');//创建元素标签
Li.innerHTML=Txt.value;
Ul.appendChild(Li);//添加到最后一个子标签
}
}
