[JavaScript知识库]2021-09-28

专业课本知识点摘写 刁永鑫 201405301
第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 所示。

以上代码获取了

节点，并将它的title 属性的值打印出水，
/打印title 厲性值
var P_txt = $para.attr (“title”) :
1/获取元素节点属性 title
: ( d. )s = eJeds JeA
1/ 获取节点
：四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>我想说：

我想说：-b>你好 HTML 代码： ＜p>我想说： jQuery 代码： ＄（“你好").appendTo("p”）： 结果： ＜p>我想说： ：＜b>你好

你好我想说： HTML 代码： ＜p>我想说： jQuery 代码： ＄（"你好").prependTo("p")： 结果：

你好我想说： HTML 代码：

我想说： jQuery代码； $("p").after("你好")： 结果：

我想说：46>你好 HTML 代码： ＜p>我想说：