导言
Dom(文档对象模型)是 针对 HTML 文档的一个 API. DOM 描述了一个层次化的节点树。
Node 类型
javaScript中的所有节点类型都继承自 Node类型 , 因此所有节点类型都共享者相同的基本属性和方法
每个节点都有一个 nodeType 属性, 用于表明节点的类型。 节点类型由 Node 类型中定义的下列 12 个数值常量来表示 , 任何节点类型必须是其中一个。
- Node.ELEMENT_NODE(1) 元素节点
- Node.ATTRIBUTE_NODE(2) 属性节点
- Node.TEXT_NODE(3) 文本节点
- Node.COMMENT_NODE(8) 注释节点
- Node.DOCUMENT_NODE(9) Document 根节点
- Node.DOCUMENT_FRAGMENT_NODE(11) 碎片化文档
1.nodeName 和 nodeValue 属性
这两个属性的值完全取决于节点的类型。
if(someNode.nodeType === 1) {
let value = someNode.nodeName;
}
对于元素节点, nodeName 中保存的始终都是元素的标签名.
Document 类型
js通过 Document 类型表示文档。 在浏览器中 , document 对象是 HTMLDocument 的一个实例, 表示整个 HTML 页面。 而且, document对象是 window对象的一个属性 , 因此可以将其作为全局对象来访问。Document 节点具有下列特性:
- nodeType 的值为 9
- nodeName 的值为 "#document"
- nodeValue 的值为 null
- parentNode 的值为 null
通过 Document对象,不仅仅可以获取与页面有关的信息,而且还能操作页面的外观及其底层结构
1.文档的子节点
- documentElement 属性 --- 该属性始终指向 HTML 页面中的 元素
- body 属性 --- 取得对 的引用
- doctype 属性 --- 取得对<!DOCTYPE> 的引用
2. 文档信息
- document.title 文档标题
- document.URL 文档域名
- document.referrer 文档来源页面的 URL
3. 查找元素
其中 , Document 类型为此提供了两个方法 :
- getElementById
<div id="myDiv">hello world</div>
var div = document.getElementById('myDiv');
- getElementsByTagName
这个方法接受一个参数, 即要取得元素的标签名, 而返回的是包含 零 或多个元素的 NodeList。在HTML文档中, 这个方法会返回一个 HTMLCollection 对象, 作为一个 动态集合。
获取页面中收邮件的 元素, 并返回一个 HTMLCollection
var images = document.getElementsByTagName('img');
console.log(images.length); // 输出图像的数量
console.log(images[0].src); // 输出第一个图像元素的 src 特性
- getElementsByName 顾名思义, 这个方法会返回带有给定 name 特性的所以元素。
4.特殊集合
document对象还有一些特殊的集合。
-
document.anchors - 包含文档中所有带 name 特性的 <\a>元素
-
document.forms - 包含文档中所有的
元素, document.getElementsByTagName('form')相同 -
document.images - 包含文档中所有的 元素, 与document.getElementsByTagName('img')相同
-
document.links - 包含文档中所有带 href 特性的 <\a> 元素
Element类型
除了 Document类型之外, Element类型就要算是 Web编程中最常用的类型了。 Element节点具有以下特征:
- nodeType 的值为1
- nodeName 的值为元素标签名
- nodeValue 的值为 null
- parentNode 可能是 Document 或 Element
- 其子节点可能是 Element , Text
1.HTML元素
所有HTML元素都由 HTMLElement 类型表示, 不是直接通过这个类型,也是通过它的类型来表示。HTMLElement 类型直接继承自 Element 并添加了一些属性,元素中都存在的下列标准特性:
- id,元素在文档中的唯一标识符
- title, 有关元素的附加说明信息, 一般通过工具提示条显示出来。
- className: 与元素的 class 特性对应,即为元素指定的 CSS 类。
2.取得特性
操作特性的DOM方法主要有3个:
- getAttribute()
- setAttribute()
- removeAttribute()
<div id="myDiv" class="bd" title="Body text" lang="en" dir="auto">hello world</div>
<script>
var div = document.getElementById('myDiv');
console.log(div.getAttribute('id')); // myDiv
console.log(div.getAttribute('class')); // bd
</script>
3.设置特性
所谓的自定义属性
- setAttribute(),接收两个参数:要设置的特性名和值 如果特性已经存在,setAttribute()会以指定的值替代现有的值
4.attributes 属性
Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。拥有下列方法:
5.创建元素
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button onclick="append()">添加</button>
const div = document.createElement('div');
const ul = document.querySelector('.ul');
ul.appendChild(div);
把节点添加到DOM有以下方法
- appendChild --- 可向节点的子节点列表的末尾添加新的子节点。
- insertBefore --- 方法在您指定的已有子节点之前插入新的子节点
- replaceChild --- 方法可将某个子节点替换为另一个。
6.元素的子节点
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const element = document.getElementById('myList');
function display(element) {
const cNodes = element.childNodes;
for(let i = 0 ; i < cNodes.length ; i ++) {
if(cNodes[i].nodeType === 1) {
console.log(cNodes[i].nodeName)
}
}
}
</script>
Text类型
文本节点由 Text 类型表示, 包含的是可以照字面解释的纯文本内容。 纯文本中可以包含转义后的 HTML 字符, 但不能包含 HTML代码。
- nodeType的值为 3
- nodeName 的值为 #text
- nodeValue 的值为节点所包含的文本
- parentNode 是一个 Element
1.创建文本节点
- document.createTextNode()
DocumentFragment类型
在所有节点.只有 DocumentFragment 在文档没有对应的标记。DOM 规定了文档片段 是 一种 轻量级的文档。
- nodeType 的值为 11
- nodeName 的值为 "#document-fragment"
虽然不能把文档片段直接添加到文档中,但可以将它作为一个 仓库来使用
要创建文档片段
- document.createDocumentFragment()
<ul id="myList"></ul>
<script>
let fragment = document.createDocumentFragment();
let ul = document.getElementById('myList');
let li = null;
for(let i = 0 ; i < 3 ; i ++) {
li = document.createElement('li');
li.appendChild(document.createTextNode('hello'));
fragment.appendChild(li)
}
console.log(fragment)
ul.appendChild(fragment)
</script>
DOM扩展
对于 DOM 扩展主要有两个方面:
- Selector (选择符)API
- HTML5
querySelector()
众多 javaScript 库中最常用的一项功能 , 就是根据 CSS 选择符选择与某个模式匹配的 DOM元素。 从而抛开了 getElementById() 和 getElementsByTagName()
- querySelector()方法
querySelector()方法接收一个 CSS选择符, 返回与该模式匹配的第一个元素, 如果没有找到匹配的元素,返回 null.
常见的CSS选择符
- .class 通过类名选择节点
- #id 通过 id 名选择节点
- 选择所有元素 *
- element p 选择所有
元素
- element,element div,p 选择所有 元素和所有
元素
- element element div p 选择 元素内部的所有
元素
- element > element div > p 选择父元素为 元素的所有
元素
- element+element div + p 选择紧接在 元素之后的所有
元素
- [attribute] [target] 选择带有 target 属性的所有元素
- [attribute=value] [target=_blank] 选择 target="_blank" 的所有元素
querySelectorAll()
querySelectorAll()方法接收从参数与 querySelector() 方法一样, 都是一个 CSS 选择符 , 但返回的是所有匹配的元素而不仅仅是一个元素。
通过元素类型的方法查找节点
- document.getElementById
- document.getElementsByTagName
- document.getElementsByClassName
- document.getElementsByName
- document.querySelector
- document.querySelectorAll