JQ-DOM知识

Belladonna.:
第3首 jQuery中的DOM 操作
DOM 是 Document Object Model 的缩写，意思是文档对象模型。根据 W3C DOM 规范
（http://www.w3.org/DOM)，DOM是-
一种与浏览器、平台、语言无关的接口，使用该接口可以轻松
地访问页面中所有的标准组件。简单来说，DOM解决了 Netscape 的JavaScript 和 Microsoft 的 JScript
＞间的冲突，给子了 web 设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的
数据、脚本和表现层对象。
3.1
DOM 操作的分类
-般水说，DOM操作分为3个方面，即DOM Core （核心)、HTML-DOM 和 CSS-DOM.
1. DOM Core
DOM Core 并不专属于JavaScript，任何一种支持DOM 的程序设计语言都可以使用它。它的用
途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。
JavaScript 中的 getElmentByIdO、getElementsBy TagName(、getAttribute0 和 setAttribute0等方
法，这些都是 DOM Core 的组成部分。
例如：
使用 DOM Core 来获取表单对象的方法：
document. getElementsByTagName(form");
使用 DOM Core 来获取某元素的sre 属性的方法：
element .getAttribute("src"):
2. HTML-DOM
在使用 JavaSeript 和 DOM 为 HTML 文件编写脚本时，有许多专属于 HTMI-DOM 的属性。
RTML-DOM 的出现甚至此 DOM Core 还要早，它提供了一些更简明的记号来描述各种 HTML 元
素的属性。

使用 HTML-DOM 来获取表单对象的方法：
document. forms //HTML-DOM 提供了一个forms 对象
使用 HTML-DOM 来获取菜元素的sre 属性的方法：
element.src:
通过上面所说的方法，可以发现获取某些对象、属性既可以用 DOM Core 来实现，也可以使
用 HTML-DOM 实现。相比较而言 HTML-DOM 的代码通常比较简短，不过它只能用米处理 Web
3. CSS-DOM
CSS-DOM 是针对 CsS 的操作。在Javascript 中， CSS-DOM 技术的主要作用是获取和设置
style对象的各种属性。通过改安style对象的各种屆性，可以使网页呈现出各种不同的效果。
例如：设置某元素 style 对象字体颜色的方法：
element. style.color - "red":
jQuery 作为JavaSeript 库，继承并发扬了Javascript 对 DOM 对象的換作的特性，使开发人员
能方便地操作DOM 对象。下面详细介绍jQuery 中的各种 DOM 操作。
3.2
1Query 中的DOW 操作
为了能全面地讲解 DOM 操作，首先需要构建一个网页。因为每一张网页都能用 DOM 表示出
米，而每一份 DOM 都可以看作一棵 DOM 树。构建的网页效果如图 3-1 所示。

以上代码获取了<p>节点，并将它的title 属性的值打印出水，
/打印title 厲性值
var P_txt = $para.attr ("title") :
1/获取<D>元素节点属性 title
: ( d. )s = eJeds JeA
1/ 获取<D>节点
：四1G
获取属性节点并打印出它的文本内容

向每个风配的元素内部追加内容
将所有匹配的元素追加到指定的元素中。
实际上，使用该方法是颠倒了常规的
$(A):append(B)的操作，即不是将B追加到
A中，而是将 A追加到B中
prependO
向每个匹配的元素内部前置内容
prependToO
将所有匹配的元素前置到指定的元素中。
实际上，使用该方法是颠倒了常规的
$(A).prepend(B)的操作，即不是将B 前置到
A中，而是将A 前置到B牛
after(
在每个匹配的元素之后插入内容
insertAfter(
将所有匹配的元素插入到指定元素的后
面。实际上，使用该方法是颠倒了常规的
$(A).after(B)的操作，即不是将B插入到A
后面，而是将A 插入到B后面
HTML 1004:
＜p>我想说：</p >
Query 1461:
$("p").append("-b>你好</b>”)：
结果：
<p>我想说：-b>你好</b></0>
HTML 代码：
＜p>我想说：
</D>
jQuery 代码：
＄（“<b>你好</b>").appendTo("p”）：
结果：
＜p>我想说：
：＜b>你好</D></p >
HTML 代码：
＜p>我想说：</p >
jQuery 代码：
$("p").prepend("<b>你好</b>”)：
结果：
<p><b>你好</b>我想说：</0>
HTML 代码：
＜p>我想说：</D>
jQuery 代码：
＄（"<b>你好</b>").prependTo("p")：
结果：
<p><b>你好</b>我想说：</D>
HTML 代码：
<p>我想说：</D>
jQuery代码；
$("p").after("<b>你好</b>")：
结果：
<p>我想说：</0>46>你好</b>
HTML 代码：
＜p>我想说：</p >
jQuery 代码：
$（"<b>你好</b>").insertAfter("p");
结果：
<D>我想说：</D><b>你好＜/b>
</p-
jouery 代码：
$("p").before("b-你好二/b二”)：
结果：
咖-你好二/b二5p-我想说：<1/0>
HTML 代码：
insertBefore(
将所有见配的元素插入到指定的元煮的前
面。实际上，使用该方法是须倒了常规的
$(^).before(B)的模作，即不是将B插入到
A 前面，市是将^插入到B前面
p-我想说：</p-
jQuery 代码：
＄（"<b>你好</b>").insertBefore( "p” )：
结果：
-你好</b><D>我想说：
＜0>
这此插入节点的方法不仅能将新创建的 DOM 元素插入到文档中，也能对原有的 DOM 元素进
行移动。
例如利用它们创建新元素并对其进行插入操作。
jQuery 代码如下：
var $11 1= $（"<li title-'香蕉’>香蕉</11>");
var $112=$（"<1i title-'雪梨">雪梨</11>")
var $1i 3- $（"<11 title='其它">其它</11>")4
//创建第 1个<11>元量
川创建第2个日2元
//创建第 8个c11
如果文档甲某
个元素多余，那么应将其删除。jQuery 提供了
remove0, detach0fIl empty0.
种删除节点的方法，即
1. remove(方法
作用是从 DOM 中删除所有见配的元素，传入的参数用于根据 jQuery 表达式来筛选兀素，
例如删除图 3-11中<ul>节点中的第2个<li>元素节点，iQuery 代码如下：
$("ul li: eq(1)"). removed):
!/获取第2个<11>元素节点后，将它从网页中删除
运行代码后效果如图3-13 所示。
当某个节点用 remove0方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的
返回值是一个指向己被删除的节点的引用，因此可以在以后再使用这些元素。下面的 jQuery 代码
说明元素用 removeQ方法删除后，还是可以继续使用的。
var $11 =$"u7 1i:eq(1)").remove()：1/获取第2个<1i>元素节点后，将它从网页中删除
$1i. appendTo("ul"):
//把刚才删除的节点又重新添加到<u1>元素里
可以直接使用 appendTo0方法的特性来简化以上代码，jQuery 代码如下：
$("u1 1i:eg(1)").appendTo("u1 ");
//appendTo()方法也可以用来移动元素
1/移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点
图 3-13 删除节点
图3-14 元素并未从 jQuery 对象中删除
另外remove0方法也可以通过传递参数水选择性地刪除元素
3.2.6
替换节点
如果要替换某个节点，jiQuery提供了相应的方法，即 replaceWith0和 replaceA10。
replaceWithO方法的作用是将所有匹配的元素都替换成指定的 HTML 或者 DOM 元素。例如要
将网页中“sptitle="选择你最喜欢的水果•，你最喜欢的水果是？</p-〞 替换成“<strong-你最不喜欢
的水果是？</strong-”，可以使用如下 jQuery 代码：
$("p").replacewith("<strong-你最不喜欢的水果是？</strong>"）；
也可以使用 jQuery 中另一个方法replaceA110水实现，该方法与 replace witho方法的作用相同，
只是颠倒了replace WithO操作，可以使用如下 jQuery 代码实现同样的功能：
$("sstrong-你最不喜欢的水果是？</strong>”).replaceAII（"p”)；