文章目录
一、前提概念理解
1. doctype
一般我们说的DOM默认是指html document。
部分人就会以为document文档,指的就是html文档。事实上不正确的。
doctype (文档类型)有多种类型,并且针对不同类型的文档提供相应的API。
document是html的上级
只有我们在html页面的头部声明<!DOCTYPE html>
的时候,这时候浏览器才会将页面以html的模式进行渲染,而不是其他的怪异模式。
有关doctype的更多详情: 请参考博客 Doctype的几种类型
或者 搜索 doctype MDN
2. Node类型
- DOM(Document Object Model)— 直译就是文档对象模型
- 在声明
<!DOCTYPE html>
时,每个载入浏览器的 HTML 文档都会成为 document 对象。Document 提供API供我们进行访问html页面内的元素 - 而这个Model,在html的结构中就类似于树结构模型,如下图所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="div1"> <!-- 我是注释 --> </div>
<p id="tt">hello world</p>
</body>
</html>
- 所有的节点都是node类型,即都是node构造函数的实例对象。其相关的关系结构图如下
知道这个后,可以帮助我们理解document 提供给我们的api;
//在控制台打印以下语句,
console.log(document.body) //body的构造函数是Element
console.dir(tt.firstChild) //hello world 的构造函数是 Text
//注意我在id为div1中写注释,中间没有换行。如果换行了,换行符算一个文本节点,只是在浏览器上不会显示换行符
console.dir(div1.firstChild) // 注释的 构造函数是Comment
二、EventTarget 接口
EventTarget是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。
常用方法有(可支持用on来设置事件处理程序)
- EventTarget.addEventListener() //注册事件
- EventTarget.removeEventListener() //删除事件侦听器
div.addEventListener("click",function(){ })
div.onClick = function(){}
三、Node 的接口
1、Node的属性(常用)
1.1节点结构关系属性
- 获取子元素
- Node.childNodes //返回子节点 ,包括换行(回车)符,一个换行符算一个节点
- Node.children //返回子标签,
- Node.firstChild (第一个孩子元素)
- Node.lastChild (最后一个孩子元素)
- 获取父元素
Node.parentElement,
Node.parentNode, - 获取兄弟元素
- Node.nextSibling (返回同级的下一个元素)
- Node.previousSibling(返回同级的上一个元素)
1.2 节点自身特征属性
- Node.nodeName(获取节点名称)获取的节点名称都是大写的。例外:svg(小写)
- Node.nodeType(获取节点类型)
详情:nodeType MDN
常量 | 值 | 描述 |
---|---|---|
Node.ELEMENT_NODE | 1 | 一个 元素 节点,例如<p> 和 <div> |
Node.TEXT_NODE | 3 | Element 或者 Attr 中实际的 文字 |
Node.PROCESSING_INSTRUCTION_NODE | 7 | 一个用于XML文档的 |
Node.COMMENT_NODE | 8 | 一个 Comment 节点 |
Node.DOCUMENT_NODE | 9 | 一个 Document 节点 |
Node.DOCUMENT_TYPE_NODE | 10 | 描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。 |
Node.DOCUMENT_FRAGMENT_NODE | 11 | 一个 DocumentFragment 节点 |
-
Node.ownerDocument(区分该元素是在那个document,用于有iframe的情况)
-
获取元素内的文本(Node.innerText / Node.textContent )
textContent 会获取所有元素的内容,包括
<script> 和 <style>
元素,然而 innerText 不会。
innerText 受 CSS 样式的影响,并且不会返回隐藏元素的文本,而textContent会。具体差别 参考 textContent MDN
2、Node的方法
(如果一个属性是函数,那么这个属性就也叫做方法;换言之,方法是函数属性)
- appendChild() — 插入子节点
- cloneNode() — 拷贝节点
Node.cloneNode() — 只拷贝元素本身(浅拷贝)
Node.cloneNode(true) — 拷贝元素本身及其元素下所有的子元素。(深拷贝) - contains()
- hasChildNodes() — 返回Boolean值,判断是否有子节点
- insertBefore()
- isEqualNode() / isSameNode() 这两个有细微的差别。但一般用不到
- removeChild()
- replaceChild()
- normalize() // 常规化
四、Document 接口
1、Document 的属性
- 用于指向其他节点(快捷获取某些特殊节点)的属性
document.documentElement指向 DOM 的 html节点
document.activeElement指向获得焦点的那个节点 - 返回文档特定元素的伪数组集合的属性
document.links
document.forms
document.images
document.embeds
等等 - 返回文档信息的属性
document.location
document.readyState返回的是当前文档的状态,
等等
2、Document 的方法
方法 | 方法 |
---|---|
getElementById() | getElementsByClassName() |
getElementsByName() | getElementsByTagName() |
getSelection() | querySelector() |
querySelectorAll() | |
open() | write() |
五、Element 接口
…
其他
- window对象于Document对象的区别
window 对象表示浏览器中的内容,而 document 对象是文档本身的根节点(html)。 - 元素插入文本的写法
div.appendChild(document.createTextNode('文本文本')) //推荐这种 div.innerText = "文本文本" //不推荐这种。innerText会将元素的内容清空再写入文本