怎么用DOM创建a节点

2024-03-16 23:50:01装修宝典023

怎么用DOM创建a节点,第1张

怎么用DOM创建a节点
导读：用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr() *** 来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且

用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr() *** 来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互的目的。

HTML DOM结构如下：

欢迎访问脚本之家 <ul class="nm_ul"> <li title='PHP编程'>简单易懂的PHP编程</li> <li title='JavaScript编程'>简单易懂的JavaScript编程</li> <li title='JQuery编程'>简单易懂的JQuery编程</li> </ul>

创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

1 创建两个<li>新元素。

2 将这两个新元素插入文档中。

第1个步骤可以使用jQuery的工厂函数$()来完成，格式如下：

$(html);

$(html) *** 会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素，jQuery代码如下：

var $li_1 = $("<li></li>"); // 创建之一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素

然后将这两个新元素插入文档中，可以使用jQuery中的append()等 *** 。JQuery代码如下：

var $parent = $("nm_ul"); // 获取<ul>节点。<li>的父节点 $parentappend($li_1); // 添加到<ul>节点中，使之能在网页中显示 $parentappend($li_2); // 可以采取链式写法：$parentappend($li_1)append($li_2);

动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他 *** 将其插入文档中。当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。例如创建一个元素，可以用$("")或者$("")，但不要使用$("")或者大写的$("")。

创建文本节点

已经创建了两个<li>元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。

JQuery代码如下：

var $li_1 = $("<li>新增节点：数据结构</li>"); // 创建之一个<li>元素 var $li_2 = $("<li>新增节点：设计模式</li>"); // 创建第二个<li>元素 var $parent = $("nm_ul"); // 获取<ul>节点。<li>的父节点 $parentappend($li_1); // 添加到<ul>节点中，使之能在网页中显示 $parentappend($li_2); // 可以采取链式写法：$parentappend($li_1)append($li_2);

如以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等 *** 将它们添加到文档中就可以了。

无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。例如$("<li>这是一个<a href="#">复杂的组合</a></li>");

创建属性节点

创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。JQuery代码如下：

var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建之一个<li>元素 var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素 var $parent = $("nm_ul"); // 获取<ul>节点。<li>的父节点 $parentappend($li_1); // 添加到<ul>节点中，使之能在网页中显示 $parentappend($li_2); // 可以采取链式写法：$parentappend($li_1)append($li_2);

通过浏览器查看源代码工具查看代码，可以看到最后两个<li>元素多了名为“title”的属性节点。由此可以判断，创建的元素的文本节点和属性节点都已经添加到网页中了。由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。

D:document 文档浏览器加载的页面

DOM O:object 对象页面及页面中的任何元素都是对象

M:module 模型页面中的元素的组织形式

DOM被W3C组织设计为一种平台无关、语言无关的API，程序或脚本通过其动态访问、修改文档的内容、样式、结构。

DOM是web 浏览器的运行规范，javascript借助DOM成就了其web标准语言的地位，在web领域实现了所谓“一次编写到处运行”的目标。

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示 *** ，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

脚本开发人员可以通过文档对象的属性、 *** 和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。object这个词在台湾通常翻译成“物件”）。网页上的标签是一层层嵌套的，最外面的一层是，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。

在这种由“父子兄弟”组成的“单性繁殖家族图谱树”框架结构中，每个网页元素都可以被确切地定位。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。

万维网协会（World Wide Web Consortium，W3C）已经给文档对象模型制定了一系列标准，并且正在制定更多的相关标准。当代的浏览器除支持其中的一部分标准之外，还支持某些早在W3C标准制定以前就流行了的历史既成的编程接口。也就是说现在浏览器使用的技术历史由来纷繁复杂，有些人们普遍使用的DOM技术并无标准可依。

我们将深入所有通用DOM的细节（包括IE浏览器中“与众不同”的某些技术），以全面掌握面向实践的技术。

DOM和JavaScript

我经常在 *** 、MSN和email中被大家问到的“有关JavaScript”的问题，95%其实是DOM的问题。人们在习惯上不爱说DOM，要么就说JavaScript，要么就扯到“Ajax”（一度火爆的“概念”，最近刚刚有所降温，一如上世纪末的“DHTML”那样。对于这些热点词汇的产生，我个人感到非常欣慰，因为每一次都带来人们对JavaScript技术的热捧。下一个热点词汇是什么？也许我们可以炮制一个也说不定Pseudo-Mashup，如何？）。

我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的documentwrite *** 也找不到。

下面这段代码的作用是用一个提示框逐个显示网页中所有链接的网址，代码中被标为红色的部分就是DOM。

代码如下:

var anchorTags = documentgetElementsByTagName("a");

for (var i = 0; i {

alert("Href of this a element is : " + anchorTags[i]href + "\n");

}

这样一来哪些是核心JavaScript，哪些是DOM，各自起什么作用，就可以一目了然了。

var anchorTags =

创建了一个名为 anchorTags 的 JavaScript 变量。

documentgetElementsByTagName("a")

Document接口是 DOM1核心（DOM1 Core）规范中定义的之一个接口，而 document 是实现了Document接口的一个宿主对象。document掌控着网页里的所有东西。

DOM1核心为Document 接口定义了 getElementsByTagName() *** 。这个 *** 返回一个节点列表（NodeList），也就是一种DOM特有的包含节点的数组，包含了所有符合匹配参数条件的标签，按照在文档中出现的顺序排列。于是anchorTags变量现在就成了一个节点列表。

;

分号是JavaScript里的语句结束符号。

for (var i = 0; i 这是编程语言里典型的“for循环”。声明了循环变量i，逐个处理anchorTags节点列表里的每一个节点。这也是JavaScript的东西。

anchorTagslength

DOM1 核心定义了NodeList接口的 length 属性。这个属性返回一个整数，就是节点列表里包含的节点数目。说起来JavaScript 的数组也有一个 length属性。

; i++) {

典型的JavaScript变量增1运算。

alert(

alert() 是一个DOM *** ，弹出一个提示框，显示传递给该 *** 的参数（字符串）。话说这个东西是通称 0级DOM（DOM level 0）或DOM0的一些历史既成的编程接口当中的一员。DOM0 是一套“被某些浏览器所支持”的编程接口（事实上，市场上不存在不支持DOM0的浏览器，只有在某些软件爱好者的收藏品中才能见得到），不属于任何DOM标准规范。

"Href of this a element is : " +

一个字符串字面量和一个字符串链接符。JavaScript的东西。

anchorTags[i]href

href 是 DOM1 HTML 规范中定义的 HTMLAnchorElement 接口的属性，返回链接（）元素的href属性的值。

在此我们用了像anchorTags[i]这样的用法，这和JavaScript里访问第i个数组项的语法是一样的。语言中性（language-neutral，与具体语言无关）的所谓“DOM方式”访问某个节点列表中的一个项目的办法是使用在NodeList接口中定义的item() *** ：anchorTagsitem(1)href。但是大多数JavaScript实现程序都允许你使用这种简单的类似于数组的语法，而这也是大多数人实际在用的方式。

+ "\n");

又一个字符串连接。在字符串的末尾加入一个回车符。

}

“for循环”结束。

DOM是网页中的用来表示文档中对象的标准模型，通过JavaScript可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与 *** cript一决生死，于是大规模的赋予浏览器强大的功能。

微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。

扩展资料：

DOM的分级：

根据W3C规范，将DOM分为1级、2级、3级共3个级别。

1、1级DOM

1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档中的任意部分。

2、2级DOM

鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。

3、3级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证 *** 对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML10的所有内容，包括XML Infoset、 XPath、和XML Base。

-DOM

编程里面DOM是干什么的

1、DOM全拼为DocumentObjectModel（文档对象模型）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示 *** ，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

2、所以，浏览器在解析html文档的时候，会把每个标签抽象成代码里的对象，然后按照这种层次分明的结构组织起来，这就是文档对象模型，DOM了。画个图表示一下就是这样的：这就是数据结构里典型的「树」了。

3、DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用 *** 。

程序员总说的DOM到底是什么

这就是数据结构里典型的「树」了。所以大家经常说DOM树，其实是一个意思。浏览器在解析html的时候，会在它的内部构建这样一棵DOM树，然后按照这棵树上的层次顺序，依次来解析每个标签。

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

DOM是DocumentObjectModel文档对象模型的缩写。根据W3CDOM规范（http：//），DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。

dom：文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

什么是dom举例说明如何使用dom动态创建交互h5页面

1、根据DOM，HTML文档中的每个成分都是一个节点。

2、按市面上H5在多媒体范畴的应用，摘取常用于H5设计的功能，以此作为凭据，对比两个H5页面 *** 软件的功能覆盖度——基于DOM封装开发的iH5组件功能数达到51个，比Equb360多出将近20个。

3、这个意思就是说，自己在处于dom的控制下，她们是由被管教惩罚等原因，而产生不同的 *** 。

4、如需向HTMLDOM添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

什么是DOM

1、DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

2、dom是主人的意思，Dom全称dominance，翻译过来就是支配。与之对应的是sub，sub是奴隶，Sub全称submission，翻译过来为臣服。

3、DOM全拼为DocumentObjectModel是一种用于HTML和XML文档的编程接口，给文档提供了一种结构化的表示 *** ，可以改变文档的内容和呈现方式。

4、DOM是网页中的用来表示文档中对象的标准模型，通过JavaScript可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。

5、DOM一般指文档对象模型。文档对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。

6、dom的全称是DocumentObjectModel，翻译过来是文档对象模型的意思，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

*** 里面的DOM操作是什么

1、DOM：DocumentObjectModel，文档对象模型；js提供了丰富的api来操作文档内容。DOM树：html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body节点：DOM将所有的分支端都成为节点。

2、DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。

3、vardom=documentgetElementById(节点id)；这是通过节点的id来获取一个页面节点，也就是对节点的引用。这个时候，我们对变量dom的任何操作，实际上就是对页面节点的操作，比如说修改样式、移除节点、获取属性等等。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用 *** 。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。

优点和缺点

DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。

DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instruction和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。

　　DOM操作的分类

　　DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。

　　它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML

　　javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等 *** ，这些都是Dom Core的组成部分。

　　使用DOM Core来获取表单对象的 ***

　　documentgetElementByTagName("from");

　　使用DOM Core来获取某元素的src属性的 *** ：

　　elementgetAttribute("src");

　　构建DOM元素

<body>

你最喜欢的水果是

<ul>

</ul>

</body>

　　使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。

　　1查找元素节点

　　获取元素节点并打印出它的文本内容，jQuery代码如下:

var $li = $("ul li:eq(1)"); 获取<ul>里第2个<li> 节点

var li_txt=$litext(); //获取第2个<li>元素节点的文本内容

　　alert(li_txt); //打印文本内容，这里会打印出橘子

以上代码获取了<ul>元素里第2个<li>节点，并将它的文本内容"橘子"打印出来

　　2查找属性节点

　　利用jQuery 选择器查找到需要的元素后，就可以使用attr() *** 来获取它的各种属性的值attr() *** 得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。

　　获取属性节点并打印出它的文本内容，jQuery代码如下：

var $para = $("p"); //获取节点

var p_txt=$paraattr("title"); //获取元素节点属性title

　　alert(p_txt); //打印title属性值

　　创建节点

　　在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。

　　1 创建元素节点

例如要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。

(1)创建两个<li>新元素。

　　(2)将这两个新元素插入文档中。

　　第(1)个步骤可以使用jQuery的工厂函数$()来完成。

　　$(html);

　　$(html) *** 会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素,jQuery代码如下:

$("ul")append($li_1); //添加到<ul>节点中，使之能在网页中显示

　　$("ul")append($li_2); //可以采取链式写法:$("ul")append($li_1)append($li_2);

　　注意事项：

　　(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他 *** 将其插入文档中。

　　(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。

例如创建一个 元素，使用$("")或者(""),但是不要使用$("")或者大写的$("");

　　2创建文档节点

var $li_1= $("<li>香蕉</li>"); //创建一个<li> 元素，包括元素节点和文本节点，香蕉就是创建的文本节点

var $li_2 =$("<li>雪梨</li>"); //创建一个<li> 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。

$("ul")append($li_1); //添加到<ul>节点中，使之能在网页中显示

$("ul")append($li_2); //添加到<ul>节点中，使之能在网页中显示

　　以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等 *** 将他们添加到文档中就可以了。

　　注意事项：

　　无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。

例如$("<li>这是一个<a href='#'>复杂的组合</a></li>");

　　3创建属性节点

　　创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。

　　jQuery代码如下:

var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素，包含元素节点，文本节点和属性节点其中title='香蕉'就是创建的属性节点

var $li_2=$("<li title='雪梨'>雪梨</li>");//创建一个<li>元素包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点

　　$("ul")append($li_1);

$("ul")append($li_2); //添加到<ul> 节点中，使之能在网页中显示

　　插入节点

　　动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。

　　使用append(),它会在元素内部追加新创建的内容。

　　jQuery中还有提供了其他几种插入节点的 *** 。

　　 *** 描述示例

　　append() 向每个匹配的元素内部追加内容 HTML代码

我想说:

jQuery代码: $("p")append("你好"); 结果: 我想说:你好

　　appendTo() 将所有匹配的元素追加到指定的元素中，

实际上，使用该 *** 是颠倒了常规的$(A)append(B)的操作，即不是将B追加到A中，而是将A追加到B中 HTML 代码 我想说: jQuery代码： $("你好")appendTo("p"); 结果: 我想说：你好

prepend() 向每个匹配的元素内部前置内容 HTML代码: 我想说: jQuery代码: $("p")prepend("你好");结果你好我想说:

prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该 *** 是颠倒了常规的$(A)prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 我想说: jQuery代码: $("你好")prependTo("p"); 结果你好我想说

after() 在每个匹配的元素之后插入内容 HTML代码 我想说: jQuery代码: $("p")after("你好"); 结果: 我想说:你好

insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码 我想说 jQuery代码：$("你好")insertAfter("p"); 结果我想说：你好

before() 将每个匹配的元素之前插入内容 HTML代码 我想说: jQuery 代码：$("p")before("你好"); 结果你好我想说:

insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该 *** 是颠倒了常规的before的操作 $(" 你好")insertBefore("p"); 结果:你好我想说:

　　删除节点

　　如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的 *** ，即remove() 和empty()

　　1remove() ***

　　作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。

例如删除图3-11中<ul>节点中的第2个<li>元素节点，jQuery代码如下:

$("ul li:eq(1)")remove();//获取第2个<li>元素节后，将它从网页中移除

　　当某个节点用remove() *** 删除后，该节点所包含的所有后代节点将同时被删除，这个 *** 得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

　　下面的jQuery代码说明元素用remove() *** 删除后，还是可以继续使用的。

var $li = $("ul li:eq(1)")remove();//获取第2个<li>元素节点后，将它从网页中删除

$liappendTo("ul");//把刚删除的节点又重新添加到<ul>元素里

　　可以直接使用appendTo() *** 得特性来简化以上代码：

　　$("ul li:eq(1)")appendTo("ul");

　　//appendTo() *** 也可以用来移动元素

　　//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。

　　另外remove() *** 也可以通过传递参数来选择性地删除元素

$("ul li")remove("li[title!='菠萝']"); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。

　　2empty() ***

　　严格来讲，empty() *** 并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。

$("ul li:eq(1)")empty(); //获取第2个<li>元素节点后，清空此元素里的内容，注意是元素里面。

使用firebud查看橘子节点发生变化 <li title='橘子'/>

　　3复制节点

　　复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品

　　并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果

　　$("ul li")click(function(){

$(this)clone()appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中

　　});

　　//在页面中点击"菠萝"后，列表最下方出现新节点"菠萝"。

　　$(this)clone(true)appendTo("body");//注意参数true

　　在clone() *** 传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。

　　替换节点

　　如果要替换某个节点，jQuery提供了相应的 *** ，即replaceWith和 replaceAll()

　　replaceWith() *** 得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。

例如要将网页中你最喜欢的水果是 替换成 你最不喜欢的水果是 可以使用如下jQuery代码：

$("p")replaceWith("你最不喜欢的水果是");

　　也可以使用jQuery中另一个 *** repalceAll()来实现，该 *** 与replaceWith() *** 得作用相同，只是颠倒了replaceWith的操作。

$("你最不喜欢的水果是")replaceAll("p");

　　注意：

　　如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

　　4 包裹节点

　　如果要将某个节点用其他标记包裹起来，jQuery提供了相应的 *** ，wrap()，该 *** 对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

　　jQuery代码如下：

$("strong")wrap("");//用标签把 元素包裹起来

　　得到的结果如下：

你最喜欢的水果是

　　1wrapAll() ***

　　该 *** 将会将所有匹配的元素用一个元素包裹。它不同于wrap() *** ，wrap() *** 将所有的元素进行单独的包裹。

$("strong")wrap("");

　　2wrapinner() ***

该 *** 将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹 标签的子内容:jQuery代码如下：

$("strong")wrapInner("");

运行代码后，发现标签内的内容被一对标签包裹了。

你最喜欢的水果是

　　属性操作

　　在jQuery 中，用attr() *** 来获取和设置元素属性，removeAtt() *** 来删除元素属性。

　　1获取属性和设置属性

如果要获取元素的属性title,那么只需要给attr() *** 传递一个参数，即属性名称。

var $para=$("p"); //获取节点

var p_txt=$paraattr("title"); //获取元素节点属性title

如果要设置元素的属性title的值，也可以使用同一个 *** ，不同的是，需要传递两个参数即属性名称和对应的值。

　　jQuery代码如下：

　　$("p")attr("title","your title");//设置单个的属性值

　　//为同一个元素设置多个属性值

　　$("p")attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。

　　jQuery中的很多 *** 都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr() *** ，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等 *** 。

　　2删除属性

　　有时候需要删除文档元素的特定属性，可以使用removeAttr() ***

删除元素的title属性

　　$("p")removeAttr("title");

　　操作样式

　　获取样式和设置样式

　　HTML代码如下：

你最喜欢的水果是

class 也是元素的属性，因此获取class 和设置class都可以使用attr() *** 。

var p_class = $("p")attr("class");//获取元素的class

可以使用attr() *** 来设置元素的class，jquery代码如下：

$("p")attr("class","high");//设置元素的class为high

　　他是将原来的class替换为class，而不是在原来的基础上追加新的class

　　追加样式

jQuery提供了专门的addClass() *** 来追加样式，为了使例子更为容易理解，首先在<style>标签里添加另一组样式

<style>

　　high{

　　font-weight:bold;

　　color:red;

　　}

　　another{

　　font-style:italic;

　　color:blue;

　　}

　　//在网页中追加class类的按钮

　　$("input:eq(2)")click(function(){

$("p")addClass("another"); //给元素追加"another"类

　　})

　　attr() 和addClass()的区别

　　用途追加样式设置样式

对同一个网页元素操作 test

　　之一次使用 *** $("p")addClass("high"); $("p")attr("class","high");

第1次结果 test

　　再次使用 *** $("p")addClass("another"); $("p")attr("class","another");

结果 test test

　　3移除样式

　　如果单击某一个按钮时，删除class的某个值，那么可以使用addClass() *** 相反的removeClass() *** 来完成，它的作用是从匹配的元素中删除全部或者指定的class

　　如下jQuery代码来删除

$("p")removeClass("high");//移除元素中为"high"的class

//如果要把元素的两个class都删除，就要使用removeClass()

　　$("p")removeClass("high")removeClass("another");

　　//jquery提供了更简单的 ***

　　$("p")removeClass("high another");

　　另外，还可以使用removeClass() *** 得一个特性来完成同样的效果，它不带参数的时候会将 class的值全部删除

　　$("p")removeClass();

　　切换样式

　　$toggleBtntoggle(function(){

　　//3

　　},function(){

　　//4

　　});

　　toggle() *** 此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle() *** 主要是控制行为上的重复切换。

　　判断是否含有某个样式

　　hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false

　　$("p")hasClass("another");

　　//jQuery内部实际上是调用了is() *** 来完成这个功能的，该 *** 等价于

　　$("p")is("another")

　　1设置和获取HTML，文本和值

　　html() ***

　　$("P")html();//获取元素的html代码

　　2text() ***

$("p")text(); //获取元素的文本内容

　　//text()可以对文本内容设置内容

$("p")text("你最喜欢的水果是"); //设置元素的文本内容

　　3val() ***

　　val() *** 取值

　　通过上面的例子可以发现val() *** 不仅能设置元素的值，同时也能获取元素的值，另外val() *** 还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框) 相应的选项被选中，在表单操作中会经常用到。

　　//使用val设置选中项

　　$("#single")val("选择2号");

　　//如果要使下拉列表的第2项和第3项被选中

　　$("#multiple")val(["选择2号"，"选择3号"]); //以数组的形式赋值

　　使多个文本框被选中

　　$(":checkbox")val(["check2","check3"]);

　　$(":radio")val(["radio2"]);

　　也可以使用attr() *** 来实现同样的功能

　　$("#single option:eq(1)")attr("selected",true); //设置属性selected

　　$("[value=radio2]:radio")attr("checked",true);

　　1 children() ***

　　该 *** 用于取得匹配元素的子元素 ***

　　var $body = $("body") children();

　　var $p=$("p")children();

　　var $ul = $("ul")children();

　　alert($bodylength);

　　alert($plength);

　　alert($ullength);

　　2next ***

　　该 *** 用于取得匹配元素后面紧邻的同辈元素。

从dom树的结构可以知道元素的下一个同辈节点时<ul>，因此可以通过next() *** 来获取<ul> 元素

var $p1 = $("p")next();//取得紧邻元素后的同辈元素

<ul>

</ul>

　　prev() ***

　　该 *** 用于取得匹配元素前面紧邻的同辈元素。

从DOM树的结构中可以知道<ul>元素的上一个同辈节点时，因此可以通过prev() *** 类获取元素

var $ul = $("ul")prev(); //取得紧邻<ul>元素前得同辈元素

　　得到的结果将是:

你最喜欢的水果是

　　4siblings() ***

　　该 *** 用于取得匹配元素前后所有的同辈元素。

　　在第1章导航栏的例子中有段代码如下：

　　$("has_children")click(function() {

　　$(this)addClass("highlight"); //为当前元素增加highlight类

　　children("a")show()end()

　　siblings()removeClass("highlight")

　　children("a")hide();

　　})

dom的全称是Document Object Model，翻译过来是文档对象模型的意思，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

扩展资料

一些常用的 HTML DOM *** 介绍：

1、getElementById(id) - 获取带有指定 id 的节点（元素）。

2、appendChild(node) - 插入新的子节点（元素）。

3、removeChild(node) - 删除子节点（元素）。

一些常用的 HTML DOM 属性介绍：

1、innerHTML - 节点（元素）的文本值。

2、parentNode - 节点（元素）的父节点。

3、childNodes - 节点（元素）的子节点。

4、attributes - 节点（元素）的属性节点。

节点元素文档 *** 对象

# 上一篇：装潢公司装饰哪家好

# 下一篇：饭店装修注意事项,饭店装修需要注意什么？

推荐阅读

热门文章

最新发布

标签列表

怎么用DOM创建a节点

给您推荐相同类型的内容：