小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前文学习了 JavaScript的字符串&数组的一些操作, 本文来学习 JavaScript 的文档对象模型
JavaScript 文档对象模型
什么是 JavaScript 的文档对象模型?
我们经常说的操作DOM 成本很高, 即是 HTML 的 DOM. 它是 HTML Document Object Model(文档对象模型)的缩写简称.
DOM 是 W3C组织推荐的处理 HTML/XML 的标准接口. 我们可以理解为 网页中的每一个元素都看作一个对象, 这样 JavaScript 就可以动态地修改 DOM, 从而达到动态修改 网页的内容的效果.
DOM 基本介绍
DOM 可以理解为网页的 API, 将元素看成对象, 这样网页中的元素就可以被计算机语言获取或者进行编辑, 从而动态修改显示到网页中.
现代技术中的 虚拟 DOM 就是一个表示各个元素节点的虚拟对象.
DOM 以面向对象的方式描述对象模型, 定义了表示和修改文档所需要的对象, 这些对象的各个属性和行为, 以及这些对象之间的嵌套关系. 就像标签的嵌套关系, 用对象表示出来.
在 DOM 模型中获取 对象
在 DOM 中, 根节点是 document 对象, 这对于 .html 就是 <html> 元素相对应.
使用 JavaScript 操作 HTML 文档 时, 上面所说的 document 就是指向整个文档, <body>/ <div>/ <table>/ <section>/ <article> 等等标签节点就是 document 对象的一个个属性对象. comment 类型的节点则表示 文档的注释.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>文档对象模型的解析 学习</title>
</head>
<body>
<h1>这是一个 h1 内容标签节点</h1>
<h2>这是一个 h2 内容标签节点</h2>
<p>这是一个段落标签, 这是一个段落标签, 这是一个段落标签, 这是一个段落标签 这里是一个段落, 内容可长可长了</p>
<script>
window.onload = function() {
let tianHtml = document.documentElement; // 这里通过 document.documentElement 获取 document 对象
console.log(tianHtml.nodeName) // 控制台打印出来 各个节点的名称..
let bodyElement = document.body // 获取 body 节点
console.log(bodyElement) // 控制台打印出来 body 节点.
}
<script>
</body>
</html>
