转载

《JavaScript 权威指南》读书笔记 15 - 脚本化文档

每个 Window 对象有一个 document 属性引用了 Document 对象。Document 对象表示窗口的内容，它是一个巨大的 API 中的核心对象，叫做文档对象模型（Document Obejct Model, DOM），用来展示和操作文档内容

DOM 概览

HTML 或 XML 文档的嵌套元素在 DOM 中以「树」的形式展示。HTML 文档的树装结构包含表示 HTML 标签或元素（如 body, p）和表示文本字符串的节点，也可能包含表示 HTML 注释的节点

<html>
  <head>
    <title>Simple Document</title>
  </head>
  <body>
    <h1>Heading</h1>
    <p>This is a <i>paragraph</i></p>
  </body>
</html>

置换成 DOM 树表示

                    +------------+
                    |  Document  |
                    +-----+------+
                          |
                    +-----+------+
                    |   <html>   |
                    +-----+------+
                          |
     +--------------------+--------------------+
     |                                         |
+----+------+                             +----+-----+
|  <head>   |                             |  <body>  |
+----+------+                             +----+-----+
     |                                         |
+----+------+                     +------------+------------+
|  <title>  |                     |                         |
+-----------+                 +----+---+               +---------+
                              |  <h1>  |               |   <p>   |
+------------------+          +--------+               +---------+
| "Simple Document"|                                        |
+------------------+                            +-----------+-----------+
                                                |                       |
                                         +------+--------+         +----+-----+
                                         | "This is a"   |         |   <i>    |
                                         +---------------+         +----+-----+
                                                                        |
                                                                   +----+------+
                                                                   |"paragraph"|
                                                                   +-----------+

上图中每个方框是文档的一个节点（node），它表示一个 Node 对象。注意树形的根部是 Document 节点，它代表整个文档。代表 HTML 元素的节点是 Element 节点。代表文本的节点是 Text 节点。Document、Element 和 Text 是 Node 的子类

选取文档元素

通过 ID 选择元素

HTML 元素可以有一个 id 属性，在文档中该值必须唯一，可以使用 getElementById() 方法选取一个基于唯一 ID 的元素

var section1 = document.getElementById('selection1');

在低于 IE 8 版本的浏览器中， getElementById() 对匹配元素的 ID 不区分大小写，而且也返回匹配 name 属性的元素

通过名字选取元素

var radiobuttons = document.getElementsByName('favorite_color');

getElementsByName() 定义在 HTMLDocument 类中，而不在 Document 类中，所以它 只针对 HTML 文档可用 ，XML 中不可用。它返回一个 NodeList 对象，后者的行为类似一个包含若干 Element 对象的只读数组。在 IE 中，也会返回 id 属性匹配指定的元素

通过标签名选取元素

// 返回所有的 span 标签元素
var spans = document.getElementsByTagName('span');
// 返回所有元素
var allTags = document.getElementsByTagName('*');
// 选取第一个 span 里面的所有 a 标签
// Element 类也定义 getElementsByTagName() 方法，
// 它只取调用该方法的元素（spans）的后代元素
var links = spans[0].getElementsByTagName('a');

HTMLDocument 对象还定义了两个属性，它们指代特殊的单个元素而不是集合： document.body 是一个 HTML 文档的

原文 http://keelii.github.io/2016/08/12/javascript-definitive-guide-note-13/

正文到此结束

所属分类：编程技术

本文标签： DOM git Document ip HTML node 注释 JavaScript java GitHub http API list IDE XML UI Select
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二