JavaScript&jQuery交互式web前端开发5章文档对象模型

第5章.文档对象模型（BOM）

文档对象模型规定了浏览器应该如何创建HTML页面的模型，以及JavaScript如何访问或修改浏览器窗口中的Web页面的内容，DOM既不是HTML的一部分，也不是JavaScript的一部分，而是一系列独立的规则。所有主流的浏览器厂商都实现了这些规则，规则主要分为两个方面:

DOM树是web页面的模型
当浏览器加载一个Web页面时，它会创建这个页面的模型。这个模型被称为DOM树，它被保存在浏览器的内存中。这个模型由4类主要节点组成：
文档节点：
HTML中的每个元素、属性以及文本都会由它自己的DOM节点进行呈现。在DOM树的顶端是文档节点，它呈现为整个页面。当需要访问任何元素、属性或文本节点时，都需要通过文档节点来进行导航。
元素节点：
HTML元素描述了HTML页面的结构(<h1>至<h6>元素描述了标题部分，<p>标签定义了段落的文本从哪里开始、在哪里结束等)。需要访DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。所以需要先学习访问元素节点的法，然后再学习如何访问和修改文本及属性。
属性节点：
HTML元素的开始标签中可以包含若干属性，这些属性在DOM树中形成属性节点。属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。例如，经常通过修改class属性的值来应用新的CSS规则，从而改变它们的显示样式。
文本节点：
当访问元素节点时，可以访问元素内部的文本，这些文本保存在其文本节点中。文本节点没有子节点。如果一个元素包含文本和其他子元素，这些子元素并非文本节点的子节点，而是这个容器元素的子节点(比如第一个<li>条目中的<em>元素)。这说明文本节点永远是DOM树的一个新分支，同时没有任何分支源自这个节点。
注意
每个节点都是一个对象，拥有方法和属性。
脚本可以访问和更新这个DOM树(而不是HTML源代码)。
针对DOM树的任何修改都会反映到浏览器中。

使用DOM树
访问并更新DOM树需要两个步骤:
1:定位到与需要操作的元素所对应的节点。
2:使用它的文本内容、子元素或属性。
访问元素相关方法和属性
1.选择单个元素节点（3种）
必须通过document对象来访问单一元素；

1>getElementById()；
2>querySelector ( )；//使用CSS选择器，返回第一个匹配的元素。
3>也可以通过在DOM树中从一个元素遍历到另一个元素的方式来选择单独的元素;

2.选择多个元素节点（3种）

getElementsByClassName ();//选择所有在class属性中使用了特定值的元素。比querySelectorAll ( )更快；
getElementsByTagName ()；//选择所有使用了指定标记的元素。比querySelectorAll ( )更快；
querySelectorAll ( )；//使用CSS选择器来选择所有匹配的元素。会返回所有匹配的元素；

3.在元素节点之间遍历

而浏览器对DOM支持的不一致，也正是jQuery变得如此流行的一-个重要的原因
nodeValue是文本节点唯一的属性，用来表示文本节点的值



查询元素
同一页面上不会有2个拥有相同id属性的元素；
DOM查询可能返回一个元素，也可能返回一个NodeList,也就是节点的集合。NodeLis看起来像是数组，用起来也想是数组，但它实际上并不是数组，它是一种被称为"集合"的对象；
如果一个方法有可能返回多个节点，那么它将永远返回一个NodeList，也就是一个节点列表(即使只找到一个匹配的元素)。然后需要从这个列表中选择所需的元素，可以使用索引编号(也就是从0开始的数字，就像数组那样)。例如，多个元素可以使用同样的标签名称，因此getElementsByTagName()方法会永远返回一个NodeList。

var itemOne = getElementById('one') ;

这个方法被应用于document对象，因此它会在页面中的所有地方进行查找。DOM方法也可以被用于页面中的一个元素节点，用来查找这个节点的后代。
当说到把元素保存在变量中时，实际上指的是把元素在DOM树中的位置保存在变量中。这个元素节点的属性和方法可以通过这个变量来使用。
更新于素class属性值的方法：

el.className='cool';

动态和静态NodeList

从NodeList种选择元素
有两种方法可用于从NodeList中选择元素:使用item()方法以及数组语法。每种方法都需要所需元素的索引编号。
在NodeList中选择一个结点之前，先要检查它是否包含节点；如果需要重复使用NodeList，就把它保存到一个变量里面；

该例一开始查找class属性包含hot的元素(class属性值可以包含多个类名，使用空格隔开)。这个DOM查询的结果保存在名叫elements的变量中，以便在示例中多次使用。
JavaScript代码每次运行一行，当解释器处理这行代码之后，这条语句就会对页面内容带来影响。
遍历DOM
得到一个元素节点后，可以使用如下5个属性来找到其他相关的元素。这种方式被称为遍历DOM。
这些是当前节点的属性(而非用于选择元素的方法)，因此它们不会以小括号结尾。
1.parntNode：该属性在HTML中找到包含该元素的元素节点(或其父元素节点)。
2.previousSibling/nextSibling：这两个属性找到当前节点的前一个或后一个兄弟节点(如果存在的话)。
3.firstChild/lastChild：这两个属性找到当前元素的第一个或最后一个子节点。
如果使用了这些属性，但是它们不包含前一个/后一个兄弟节点，或是第一个/ 最后一个子节点，那么结果会是null。
这些属性是只读的，它们只能用来选择一个新节点，而不能改变其父节点、兄弟节点或子节点。
空白节点
绝大多数浏览器，除了IE，都会把元素之间的空白(比如空格或回车)当作文本节点来处理，所以下面的属性在不同浏览器中可能会返回不同的元素：previousSibling/nextSibling/firstChild/lastChild；
另一个绕过这个问题的方法，就是干脆避免使用这些DOM属性。
解决这个问题的一个最受欢迎的方法，就是使用像jQuery这样的JavaScript库，它能够帮助程序员处理类似的问题。主要就是因为这种浏览器之间的不一致性，才导致jQuery大受欢迎。
包含元素：

使用nodeValue属性时，必须在文本节点上操/作，而不是在包含文本的元素节点上操作。
textContent与innerText


添加或移除HTML内容
有两种非常不同的方法来添加和移除DOM树中的内容: innerHTML 属性以及DOM操作。
1.innerHTML

通过DOM操作移除元素：
DOM操作可以用来从DOM树中将元素移除。

2.DOM操作
DOM操作提供了向页面中添加新内容的另一种技术方案(而不是使用InnerHTML)。它涉及三个步骤:

技术比较:更新HTML内容
到目前为止，你已经看到了向Web页面中添加HTML的三种方法。是时候来衡量一下应该在何时使用这些方法了。


属性节点


示例的这部分代码向<ul>元素中添加了两个新的列表项:一个加在列表结尾处，一个加在开始处。这里用到的DOM操作技术，使用4个步骤来创建一个新的元素节点并将其添加到DOM树中:

为了把列表项添加到列表的开始处，需要使用insertBefore()方法。它需要一些额外的信息:需要把新内容添加到哪个元素之前(也就是目标元素)。

parent. insertBefore(newltem, target);·

总结;