DOM全称为 文档对象模型(Document Object Model)。
是JS操作网页的接口,它的作用是将网页转为一个JS对象,从而可以用脚本进行各种操作。
一、层级节点
DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。节点的类型有七种:Document、DocumentType、Element、Text、Comment、DocumentFragmen。
document 节点表示每个文档的根节点。而根节点的唯一子节点是<html>元素,我们称之为文档元素(documentElement)。文档元素始终都是<html>元素。
- document 文档节点
- Element 元素节点
- Attribute 属性节点
- Text 文本节点
- DocumentType doctype标签
- Comment 注释节点
- DocumentFragment 文档片段
二、Node类型
Node接口是由所有DOM节点类型实现。Node接口在js中作为Node类型实现,所有节点类型都继承Node类型。所有类型都共享相同的基本属性和方法。
1、属性
属性使用法:(例:console.log(text.nodeType) // 返回:3; 其返回值是3表示文本节点)
(例: console.log(div.nodeValue); // null;其返回值为null表示该节点没有文本值)
nodeType 返回值为一个整数值,以此表示节点的类型
nodeName 返回节点名称
nodeValue 返回一个字符串,表示当前节点本身的文本值,该属性只读写text(文本节点)、comment(注释节点)、attr(属性节点)。
textContent 返回当前节点和它的所有后代节点的内容
nextSibling 返回紧跟在当前节点后面的第一个同级节点,如果没有同级节点,则返回null。
prevIoUsSibling 返回当前节点前面的、距离最近的一个同级节点。如果没有,则返回null。
parentNode 返回当前节点的父节点(一个节点的父节点只会有元素节点、文档节点、文档片段节点这三种类型)
parentElement 返回当前节点父元素节点(注意:与父节点不一定相同,父元素节点的节点类型是元素),如果当前节点没有父节点,或者父节点类型不是元素节点,则返回null。
firstChild 返回当前节点的第一个子节点,如没有返回null。
lastChild 返回当前节点的最后一个节点,如没有则返回null。
childNodes 返回一个NodeList几何(类似数组的对象),其成员是当前节点的所有子节点。
2、方法
appendChild 将一个节点作为最后一个节点插入当前节点, 参数为要插入的新节点。
<script>
var a1 = document.createElement('a'); // 创建元素节点p
a1.innerHTML = 'a标签链接'; // 向a标签插入内容
document.body.appendChild(a1); // 将节点插入到body中
</script>
insertBefore 将某个节点插入父节点内部的指定位置,参数为两个:分别为新节点 、要插入位置的后面节点(因为新节点将会插入到此节点的前面;此节点为父节点内部的一个子节点)。
var insertednode = parentNode.insertBefore(newNode, referenceNode);
removeChild 将一个子节点作为参数,用于从当前节点移除该子节点。返回值是移除的子节点。
var 克隆生成的副本节点名称 = 将要被克隆的节点 . cloneNode(deep);
如果deep的位置是true则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。
三、Document类型
getElementById 方法
通过id查找元素
innerHTML 属性
方法 | 描述 |
---|---|
document.getElementById(id) | 通过元素 id 来查找元素 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过类名来查找元素 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.createElement(element) 创建一个新元素
要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
document.write() 写入
向文档写入文本或 HTML 表达式 或 JavaScript 代码。