DOM即(Document Object Model)文档对象模型,文档是超文本文档(超文本标记文档),对象提供了属性和方法,模型即使用属性和方法操作超文本标记文档。
一、对标记型文档进行操作步骤
1,对将标记型文档的所有内容封装城对象(需要将HTML里的标签,属性,文本内容都放装成对象)
2,解析标记型文档
解析过程:根据HTML的层级结构,在内存中分配一个树形结构,把HTML中的每部分封装成对象
- document对象:整个文档
- element对象:标签对象
- 属性对象
- 文本对象
- Node节点对象:该对象是这些对象的父对象
解析如下图
二、document对象常用方法
1,向网页输出变量或HTML代码
document.write( )
2,获取元素(标签)
#通过id获取元素
getElementById( )
#通过标签的name属性值获取标签 (返回的是一个数组,传递的参数是标签里的name值)
getElementsByName( )
#通过标签的名称获取元素 (返回的是一个数组,传递的参数是标签名)
getElementsByTagName( )
三、element对象
要操作element对象,应先获取到element,使用document里相应的方法获取。
1,常用方法
#获取属性里的值
getAttribute("属性名称")
#设置属性值
setAttribute("属性","属性值")
#删除属性 (不可以删除value属性)
removeAttribute("属性值")
eg;
<input type="button" id="inputid" value="anniu"/>
var input1=document.getElementById("inputid");
input1.getAttribute("value"); //得到value属性的值
input1.setAttribute("class","haha"); //设置class属性值为haha
input1.removeAttribute("name"); //删去name属性
2,获取标签下的子标签
(1):使用属性:childNodes ,但是这个属性兼容性差
(2):获取标签下的子标签唯一有效方法,使用getElementsByTagName( )方法
四、操作DOM树
1,插入节点
#添加子节点到末尾,类似剪切粘贴效果
appendChild( )
#在一个节点之前插入一个新节点(通过父节点添加)
insertBefore(newNode,oldNode)
2,删除节点
removeChild( ) //通过父节点删除
3,替换、复制节点
replaceChild(newNode,oldNode) //替换节点,通过父节点替换
cloneNode(Boolean) //复制节点