文档对象模型(DOM,Document Object Model)是针对XML但经过扩展用于HTML的应用程序编程接口。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。
Node类型
DOM1级定义了一个Node接口,该接口将由DOM中的节点类型实现。这个接口在JS中是作为Node类型实现的。所有节点类型都继承自Node类型。
节点类型相关属性:
nodeType:节点类型
nodeName:与节点类型有关,元素节点保存元素的标签名
nodeValue:与节点类型有关,元素节点为空
节点关系相关属性:
childNodes:所有子节点
parentNode:父节点
previousSibling:前一个同胞节点
nextSibling:后一个同胞节点
firstChild:第一个子节点
lastChild:最后一个子节点
ownerDocument:指向文档节点。
操作节点相关方法
appendChild():在childNodes末尾添加一个节点并返回新增的节点
insertBefore():在指定节点前添加一个节点并返回新增的节点
replaceChild():替换指定节点为新节点
removeChild():移除节点
cloneNode():复制节点,参数true是深复制,false是浅复制
Document
JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。
document.documentElement引用<html>元素
document.body引用<body>元素
document.doctype引用<!DOCTYPE>元素
document.title文档标题
document.URL完整的URL
document.domain域名
document.referrer来源页面的URL
查找元素
getElementById()
getElementsByTagName()
getElementsByName() --HTMLDocument特有
文档写入
write()、writeln()、open()、close()
选择符API
querySelector()返回第一个匹配的元素。
querySelectorAll()返回所有匹配的元素。
事件
事件就是用户或浏览器自身执行的某种动作。响应事件的函数是事件处理程序。
为事件指定事件处理程序的方式:
HTML事件处理程序
<input type="button" value="Click me" οnclick="alert('clicked')"》
DOM0级事件处理程序
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("Clicked");
};
DOM2级事件处理程序
var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert("Clicked");
},false);
btn.addEventListener("click",function(){
alert("Hello");
},false);
第三个参数为true表示在捕获阶段触发,为false表示在冒泡阶段触发。