DOM
是JavaScript
操作网页的接口,全称为“文档对象模型”(Document Object Model
)。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问,以改变文档的结构,样式和内容。
浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构,都有规范的对外接口。所以,DOM可以理解成网页的编程接口。
DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说,它将web 页面和脚本或编程语言连接起来了。
要改变页面的某个东西,JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口,连同对 HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过DOM来获得的
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息,我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
DOM
的最小组成单位叫做节点(node
)。文档的树形结构(DOM
树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
节点的类型有七种。
Document
:整个文档树的顶层节点DocumentType
,声明节点 :doctype
标签(比如<!DOCTYPE html>
)Element
,元素节点:网页的各种HTML
标签(比如<body>、<a>
等)Attribute
,属性节点:网页元素的属性(比如class="right"
)Text
,文本节点:标签之间或标签包含的文本Comment
,注释节点:注释DocumentFragment
,文档节点:文档的片段这七种节点都属于浏览器原生提供的节点对象的派生对象,具有一些共同的属性和方法。
一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是DOM
。
最顶层的节点就是document
节点,它代表了整个文档。文档里面最高一层的HTML
标签,一般是<html>
,它构成树结构的根节点(root node
),其他HTML
标签节点都是它的下级。
除了根节点以外,其他节点对于周围的节点都存在三种关系。
1.父节点关系(
parentNode
):直接的那个上级节点 2.子节点关系(childNodes
):直接的下级节点 3.同级节点关系(sibling
):拥有同一个父节点的节点
DOM
提供操作接口,用来获取三种关系的节点。其中,子节点接口包括firstChild
(第一个子节点)和lastChild
(最后一个子节点)等属性,同级节点接口包括nextSibling
(紧邻在后的那个同级节点)和previousSibling
(紧邻在前的那个同级节点)属性。
<body>
<div id="test">
<span style="color:red">test1</span> test2
</div>
<script>
var test=document.getElementById('test');
console.log(test.innerHTML);//输出 <span style="color:red">test1</span> test2
console.log(test.innerText);//输出test1 test2
</script>
innerHTML
可以用來取得从对象的起始位置到终止位置的全部内容,包括HTML
标签;innerText
也可以用來取得从对象的起始位置到终止位置的全部内容,但是会把其中的 HTML
标签去除掉。特别说明: innerHTML
是符合W3C
标准的属性,而innerText
只适用于IE
浏览器,因此,尽可能地去使用innerHTML
,而少用innerText
。
举例:
<div id="ct">asdad
<p class="p1">段落
<a href="#">链接</a>
</p>
</div>
<script>
console.log(ct.children);
console.log(ct.childNodes);
console.log(ct.children[0]);
console.log(ct.childNodes[0]);
</script>
image.png
document.getElementById()
:返回匹配指定ID属性的元素节点对应的对象,如果没有发现匹配的节点,则返回null。document.getElementsByClassName()
:返回一个对象数组(HTMLCollection类型的对象),包括了所有class名字符合指定条件的元素(搜索范围包括本身),元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。document.getElementsByTagName()
:返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。返回值是一个HTMLCollection对象,也就是说,搜索结果是一个动态集合,任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用,也可以在任何元素节点上调用。document.getElementsByName()
:用于选择拥有name属性的HTML元素,比如form、img、frame、embed和object,返回一个NodeList格式的对象,不会实时反映元素的变化。ES5的方法:
document.querySelector()
:返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。document.querySelectorAll()
:返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。document.elementFromPoint()
:返回位于页面指定位置的DOM元素,如果该元素不可返回(比如文本框的滚动条),则返回它的父元素(比如文本框)。如果坐标值无意义(比如负值),则返回null。创建元素:
给元素设置属性:
元素的添加:
元素的删除:
如下为一个创建元素、设置元素属性、添加元素、删除元素的例子:
<div id="ct">
<p class="p1">一个段落</p>
<a href="#">一个链接</a>
</div>
<script>
var ct = document.getElementById("ct");
//获取id名为ct的元素,命名为ct
var ct2 = document.createElement("div");
//创建新的div元素,命名为ct2
ct2.setAttribute("class","ct2")
//给ct2元素设置属性class名ct2
var newcontent = document.createTextNode("in div");
//创建一段文本内容,命名为newcontent
ct.appendChild(ct2);
//将ct2元素添加到父元素ct内的末尾位置
ct2.appendChild(newcontent);
//将newcontent文本内容添加到其父元素ct2内
var newspan = document.createElement("span");
//创建新的span元素,命名为newspan
ct2.insertBefore(newspan,ct2.childNodes[1]);
//将newspan插入其父元素ct2下第一子元素newcontent之前,并占据第一子元素位置。
ct2.removeChild(ct2.childNodes[1]);
//将ct2元素下的第一子元素删除,即删除newspan
</script>
<div class="one two three" id="myDiv"></div>
<script>
console.log(document.getElementById('myDiv').classList);
// {
// 0: "one"
// 1: "two"
// 2: "three"
// length: 3
// value: "one two three" }
</script>
从上面代码可以看出,classList属性指向一个类似数组的对象,该对象的length属性(只读)返回当前元素的class数量。
classList对象有下列方法。
myDiv.classList.add('myCssClass');
myDiv.classList.add('foo', 'bar');
myDiv.classList.remove('myCssClass');
myDiv.classList.toggle('myCssClass');
myDiv.classList.contains('myCssClass'); // true
myDiv.classList.item(0); // "one"
myDiv.classList.toString();//"one two three foo bar myCssClass"
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
//选中所有的<li>元素
document.getElementsByTagName("li")
document.querySelectorAll("li")
//选中btn元素
document.getElementsByClassName("btn")[0]
document.getElementsByTagName("button")[0]
document.querySelector(".btn")
document.querySelectorAll(".btn")[0]