用户投稿DOM 是什么？
到目前为止我们大约花了二十多个篇幅来介绍 JavaScript 的基本用法，可能有人会想说讲了这么多，JavaScript 跟画面到底有什么关係？ 又是怎么控制画面的呢？
答案是靠 DOM！
DOM 的全名是 Document Object Model，也就是「文件物件模型」，它以 HTML 档案中的 document 为起点，将前端的各个 Element，包括 <htmle>、<div>、文字内容等解析为 Node (节点) 为一个庞大的树状结构，而 JavaScript 就是透过 DOM 来操控网页中指定的元素，让我们的网页「动起来」。
DOM 的树状结构 (以简单的 HTML 结构为例)
<!DOCTYPE html><html lang="en"><head> <title>My Sample</title></head><body> <h1>Content Start</h1> <a href="https://google.com">Go to google</a></body></html>
Node 节点
Node 节点 是构成 HTML 文档的基本单元，也是树状图中每一个方形，通常分为四种：Document、Element、Text、Element。
Doment 是指目前所在页面的整份 HTML 档，是所有的元素和节点的开头。Element文件内每个标籤都是一个
Element，例如範例的 <head>、<body>、<h1>、<a> 等。Text指被
Element 包裹的文字内容，例如範例中被 <h1> 标籤包起来的 "Content Start"Attribute指 HTML 标籤中的属性，例如
<a> 的 href、标籤的 id 属性等等Node Properties 节点属性
Node Properties 故名思义是指节点中的属性，在我们获取到节点后，可以利用 Node.属性 来获取该节点的名称、类型、值等资料。
Document#document9nullElement标籤名称1nullText#text3属性值Attribute属性名称2文字内容範例：
document.nodeType; // 9document.nodeName; // '#document'Element Properties 元素属性
针对 HTML 的 element 还有更多属性可以让我们获资讯，利如 tagName 可以获得标籤名称、innerHTMl 和 innerText 可以获得元素节点中的 HTML code 和文字内容... 等等，不过要注意的是这些 properties 只有 Element 类型的节点才有。
话不多说，现在就来看看有哪些常用的 element properties 吧！
以下面 HTMl 结构为例：
<body> <div><a>Go to google</a></div></body>回传该元素的标籤名称。
document.querySelector('div').tagName; // 'DIV'回传该元素内的所有 HTMl code。
document.querySelector('div').innerHTML; // '<a>Go to google</a>'回传该元素内的文字内容。
document.querySelector('div').innerText; // 'Go to google'回传该元素本身及其内部的所有 HTMl code。
document.querySelector('div').outerHTML; // '<div><a>Go to google</a></div>'上一篇：[快速入门前端 58] JavaScript：常见的内建函式 (2) Number 和 String 相关
下一篇：[快速入门前端 60] JavaScript：DOM (2) 如何获取元素节点
系列文章列表：[快速入门前端] 系列文章索引列表
微信扫一扫打赏
支付宝扫一扫打赏
