JavaScript脚本化文档上

发表于 | 分类于

《 JavaScript 权威指南 第十五章》

本文介绍了文档的概念，以及如何获取问题，Node 节点的属性，如何通过Node属性快速定位的相关节点。

JavaScript脚本化文档

每个 Window 对象由一个 document 属性引用了 Document 对象，它是一个巨大的 API 中的核心对象，就做文档模型，它代表和操作文档的内容。
本章涉及到的知识点：

  • 如何在文档中查询或选取单独的元素
  • 如何将文档作为节点树遍历，如何找到任何文档元素的祖先、兄弟和后台元素
  • 如何查询和设置文档元素的属性
  • 如何查询、设置和修改文档的内容
  • 如何通过创建、插入和删除节点来修改文档结构
  • 如何与HTML表单一起工作
  • 文档特性，referrershuxing、write()方法、和查询当前文档中选取的文档文本

DOM 概述

DOM：文档对象模型

一个简单的 HTML 文档的 DOM 树状图：

文档中的每一个节点，表示一个 Node 对象，每个 Node 对象由四大属性，详细请查阅相关章节：

  • Document
  • CharaterData
  • Element
  • Attr

选取文档元素

  • 用指定的 ID 属性
  • 用指定的 name 属性
  • 用指定的标签名字
  • 用指定的 CSS 类
  • 匹配指定的 CSS 选择器

通过 ID 选取元素

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

id 属性是 HTML 元素唯一的，这是最简单和常用的选取元素的方法。

通过 id 查找多个元素：

通过名字选取元素

name 属性不是必须唯一，但是只有少数 HTML 元素中有效，包括表单、表单元素、<ifarme>、<img>元素

1
var radiobuttons = document.getElementByName('favorite_color');

有些元素自动设置 name 属性到 Window 对象中，所有可以仅仅通过名字获取，但是最好显示的通过 getElementByName() 获取：

1
2
// 针对  <form name='shipping_address'> 元素,获得Element对象
var form = docuemnt.shipping_address;

通过标签名选取元素

1
var spans = document.getElementByTagName('span');

只能返回数组对象，并且排列顺序是文档中的顺序。HTML 标签是不区分大小写的。

传递通配符参数 * 将获取代表文档中所有元素的 NodeList 对象。

通过 CSS 类选取元素

1
2
//查找其class属性值中包含“awrning”的所有元素
var warning = document.getElementByClassName('warning')

参数可以是一个字符串，也可以是多个由空格隔开的标识符组成，只有当元素的 class 属性值包含所有指定的标识符时才会匹配，但是与标识符的顺序是无关的。

现代Web浏览器中以<!DOCTYPE>声明的严格程度来选择“怪异模式”或者“标准模式”方式显示HTML文档。
怪异模式是为了向后兼容性而存在的。

通过 CSS 选择器选取元素

选择器用来描述文档中的若干或多组元素，元素可以用ID、标签名或类来描述

css选择器

querySelectorAll() :返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。需要注意的是，一些伪元素无法匹配，如 :first-line :first-letter

1
var matches = document.querySelectorAll("div.note, div.alert");

📌 获取某个元素下包含的所有子元素，查看其属性：

1
2
3
4
5
6
7
8
9
let form = document.getElementById('sub-form')
let arr = Array.prototype.slice.call(form)

/*
 [input#sb_form_q.b_searchbox, input#sb_form_go.b_searchboxSubmit, input#sa_qs, input]
0:input#sb_form_q.b_searchbox
1:input#sb_form_go.b_searchboxSubmit
2:input#sa_qs
3:input  */

文档结构和遍历

有时需要查找文档中与之结构上相关的部分（父亲、兄弟、子女）。

文档从概念上可以看做是一棵节点对象树。

作为节点树的文档

Document对象、它的 Element 对象和文档中表示文本的 Text 对象都是 Node 对象（见上图），Node 定义了几个重要属性：

  • parentNode

    • 节点的父节点

  • childNodes

    • 只读的子节点数组对象

  • firstChild、lastChild

    • 该节点的第一个和最后一个子节点

  • nextSlibling、previpursSlibling 📌

    • 节点的兄弟节点中的前一个和下一个
    • 具有相同父节点的两个节点为兄弟节点
    • 节点的顺序反映了它们在文档中出现的顺序

  • nodeType

    • 该节点的类型

  • nodeValue

    • Text 节点或 Comment 节点的文本内容

  • nodeName

    • 元素的标签名，以大写形式表示

快速获取元素的实践：

1
2
3
4
//第一个子节点下面的第二个子节点
document.childNodes[0].childNodes[1];
//第一个子节点下面的第一个子节点的前一个兄弟节点
document.firstChild.firstChild.nextSibling

作为元素树的文档

etc… 似乎在开发中用不到