DOM 文档对象模型
1. Web API 的概念
api
:应用程序接口。是基于编程语言构建的结构,使开发人员更容易地创建复杂的功能
Web API
:是 Web
的应用程序编程接口,浏览器 API
可以扩展 Web
浏览器的功能,服务器 API
可以扩展 Web
服务器的功能
js
组成:ECMAScript
、DOM
、BOM
ECMAScript
:定义了JavaScript
的语法规范BOM
:浏览器对象模型,提供用于处理文档之外的所有内容的其他对象DOM
:文档对象模型,提供用于处理文档的对象
2. DOM 基础知识
2-1 window 对象
- 所有浏览器都支持
window
对象,它代表浏览器的窗口,不同窗口对应着不同的window
对象 - 在
javascript
中,window
为全局对象,全局函数和全局变量为window
对象的属性,document
对象也是window
对象属性
var user = "jsx";
console.log(window.user); // jsx
function username() {
console.log('hello dom')
}
window.username()
// 获取浏览器窗口高度
console.log(window.innerHeight)
2-2 文档对象模型
文档对象模型 DOM
是 HTML
和 XML
文档的编程接口
- 提供了对文档的结构化的表述,
- 定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容
DOM
将文档解析为一个由节点和包含属性和方法的对象组成的结构集合
可以通过 document
对象去访问改变文档结构、样式和内容
console.log(window.document);
window.onload = function() {
// 给body标签添加样式
document.body.style.background = '#2ecc71'
}
2-3 DOM 自动修正
浏览器遇到格式不正确的 HTML
,它会在形成 DOM
时自动更正它
html
根标签即使它不存在于文档中 — 它也会出现在DOM
中- 在生成
DOM
时,浏览器会自动处理文档中的错误,关闭标签等 </body>
标签后的所有元素,DOM
都会修正添加到<body>
标签内- 表格必须具有
<tbody>
标签,忽略时浏览器在创建DOM
时,自动地创建了<tbody>
<ul><li>修复未闭合标签</ul>
// 补充闭合标签
<ul> <li>修复未闭合标签</body></ul>
<table>
<tr><td>自动补充tbody标签</tr>
</table>
// 补充tbody标签
<table>
<tbody>
<tr><td>自动补充tbody标签</td></tr>
</tbody>
</table>
2-4 控制台交互
Stylel
样式 — 我们可以看到按规则应用于当前元素的CSS
规则Computed
计算属性 — 按属性查看应用于元素的CSS
:对于每个属性,我们可以都可以看到赋予它的规则包括CSS
继承等Event Listeners
事件监听 — 查看附加到DOM
元素的事件侦听器
- 在控制台中获取节点,可以通过点击左上角的小图标按钮可以让我们使用鼠标从网页中选择一个节点
- 也可以在元素
Elements
选项面板中选择元素节点 - 也可以通过
document
对象来获取元素节点 - 按下
Esc
— 它将在元素Elements
选项面板下方打开控制台Console
- 最后选中的元素可以通过
$0
来进行操作,先前选择的是$1
等
3. DOM 节点类与树结构
3-1 DOM 节点类
EventTarget
:该类的对象从未被创建,由可以接收事件、并且可以创建侦听器的对象实现,提供addEventListener
、removeEventListener
等事件支持方法Element
元素节点、document
文档节点和window
对象部署了该类XMLHttpRequest
,AudioNode
,AudioContext
也部署了该类
Node
:是所有DOM
节点的基础(包含所有节点类型)Node
类的对象从未被创建,提供firstChild
、parentNode
等节点操作方法
Element
:是DOM
元素的基本类(包含所有元素节点)- 提供
getElementsByTagName
、querySelector
等方法
- 提供
HTMLElement
:是所有HTML
元素的基本类(包含所有HTML
元素节点)- 提供
childNodes
、nodeType
、nodeName
、className
、nodeName
等方法
- 提供
SVGElement
:是所有SVG
元素的基本类(包含所有SVG
元素节点)XMLElement
:是所有XML
元素的基本类(包含所有XML
元素节点)
console.dir(window)
// window对象包含了所有节点类
console.log(window.Node);
console.log(window.Element)
console.log(window.HTMLElement)
console.log(HTMLElement.__proto__ === Element); // true
console.log(Element.__proto__ === Node) // true
console.log(Node.__proto__ === EventTarget) // true
console.log(EventTarget.__proto__.__proto__.__proto__) // true
3-2 DOM 树
DOM
树:将 HTML
表示为标签的树形结构
根据文档对象模型,每个 HTML
元素都是一个节点对象,嵌套的元素是闭合元素的子元素,元素内的文本也是一个文本节点对象
document
文档节点:document
是DOM
操作的起始节点element
元素节点:HTML
元素被称为元素节点,<html>
为根节点,<head>
和<body>
为相对于<html>
内的子节点attribute
属性节点:HTML
元素中元素的属性attributes
则为属性节点text
文本节点:HTML
元素内的文本被称为文本节点- 一个文本节点只包含一个字符串
- 换行符和空格在
HTML
元素中不会被忽略都是有效字符,它们会形成文本节点
comment
注释节点:在HTML
中注释<!-- -->
为注释节点
<!DOCTYPE html>
<html lang="en"><!-- 根节点 -->
<head>
<meta charset="UTF-8">
<title>DOM树</title>
</head>
<body>
<!-- 注释节点 -->
文本内容 <!-- 文本节点 -->
<div class="box">属性节点</div><!-- 属性节点 -->
</body>
</html>
3-2 常用节点
需要保证浏览器已经渲染了内容才可以读取的节点对象,不然无法读取到节点对象
document
:DOM
操作的起始节点document.documentElement
:文档节点即html
元素节点document.body
:body
元素节点document.head
:head
元素节点document.links
:超链接集合document.anchors
:所有锚点集合document.forms
:form
表单集合document.images
:图片集合
<body>
<!-- 链接 -->
<a href="javascript:;">超链接</a>
<!-- 锚点 -->
<a href="#box">锚点</a>
<a name="box" class="box">锚点</a>
<!-- img -->
<img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/gold.981a5510.svg" alt="">
<!-- form表单 -->
<form action="">
<input type="text" value="form表单">
</form>
<script>
// document 操作文档起点
// document.documentElement html根元素节点
console.log(document.documentElement)
// document 还能获取title标签 URL 域名 来源地址
console.log(document.title);
console.log(document.URL);
// http://127.0.0.1:5500/05-JavaScript/23-DOM/07-%E5%B8%B8%E7%94%A8%E8%8A%82%E7%82%B9.html#box
console.log(document.domain); // 127.0.0.1
console.log(document.referrer);
// http://127.0.0.1:5500/05-JavaScript/23-DOM/07-%E5%B8%B8%E7%94%A8%E8%8A%82%E7%82%B9.html
// 节点对象需要浏览器渲染了html才能读取
console.log(document.body); // body元素节点
console.log(document.head); // head元素节点
console.log(document.links); // 所有超链接的集合
console.