`

DOM操作一个文档对象的节点

 
阅读更多
http://www.blogjava.net/rodney/archive/2005/09/19/13392.html

insertBefore()--在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。

replaceChild()--在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。

removeChild()--从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。

appendChild()--添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。

cloneNode()--创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。

为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:
getElementById()
getElementsByTagName()
createElement()
createAttribute()
createTextNode()
注意:在一个页面中只有一个文档对象,除了getElementsByTagName()外,其它方法均只能通过document.methodName()调用。
再看一下下面这个例子:
<html>
<head>
<title></title>
</head>
<body>
<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.documentElement.lastChild.firstChild.tagName);
//-->
</SCRIPT>
</body>
</html>
结果将会显示"P",下面是一些解释
document.documentElement - gives the page's HTML tag.
lastChild - gives the BODY tag.
firstChild - gives the first element in the BODY.
tagName - gives that element's tag name, "P" in this case.
另一个:
<html>
<head>
<title></title>
</head>
<body>

<p>This is a sample paragraph.</p>
<SCRIPT LANGUAGE="JavaScript">
<!--
alert(document.documentElement.lastChild.firstChild.tagName);
//-->
</SCRIPT>
</body>
</html>
这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在NS中,会自动为空行加上一个节点所以返回值是"undefined",而在IE中将跳过空行仍然指向P标签。

更常用的方法:
<p id="myParagraph">This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").tagName);
这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的ID号是唯一的就可以了。

接下来一种访问元素节点的方法是document.getElementsByTagName(),它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接：
var nodeList = document.getElementsByTagName("A");
for (var i = 0; i < nodeList.length; i++)
nodeList[i].style.color = "#ff0000";

attribute和attributes
attribute对象和元素相关,但是却没有被认为是文档树的一部分,因此属性不能作为子节点集合的一部分来使用。
有三种方法可以为元素建立新的属性
1.
var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);
2.
var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");
3.
var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";
你可以在html标签种定义自己的属性:
<p id="myParagraph" myAttribute="myValue">This is a sample paragraph.</p>
...
alert(document.getElementById("myParagraph").getAttribute("myAttribute"));
返回值将是"myValue".但是请注意这里必须使用getAttribute,而不是AttributeName,因为有一些浏览器并不支持自定义属性。

attributes也可以被轻易的从一个元素中删除,你可以使用removeAttribute()或者将element.attributeName指向一个null值。
通过attributes我们就可以产生一些动态效果：
<p id="sample1" align="left">Text in a paragraph element.</p>
... code for the links ...
document.getElementById('sample1').setAttribute('align', 'left');
document.getElementById('sample1').setAttribute('align', 'right');
另一种:
<p id="sample2" style="text-align:left;">Text in a paragraph
element.</p>
... code for the links ...
document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';
跟上面的例子一样,展示了可用通过元素修改style中的属性,甚至是class中的.唯一要提到的是textAlign是从style中的text-align中演变而来的,有一条基本规律,就是style中的属性如果出现-则在dom中将会被去掉并且随后的一个字母将改为大写,还有一点就是如果即使元素中没有style属性,上述例子同样可以使用。

text nodes:
先看一下例子：
<p id="sample1">This is the initial text.</p>
... code for the links ...
document.getElementById('sample1').firstChild.nodeValue =
'Once upon a time...';
document.getElementById('sample1').firstChild.nodeValue =
'...in a galaxy far, far away';
首先text nodes并没有像elements那样具有id属性,所有它并不能直接通过document.getElementById()或者document.getElementsByTagName()访问
看一下下面的结构也许会更明白一些：

可以看出通过document.getElementById('sample1').firstChild.nodeValue就可以读取或者设置text nodes的值了。

另一个更加复杂一点的例子：
<p id="sample2">This is the <b>initial</b> text.</p>
它的文档结构

在这里通过document.getElementById('sample1').firstChild.nodeValue讲仅仅改变"This is the"
而initial text.将不会改变.在这里大家应该看到了它和innerHTML的不同了.当然你也可以这样用：
document.getElementById('sample3').firstChild.nodeValue =
'<b>Once</b> upon a time...';
document.getElementById('sample3').firstChild.nodeValue =
'...in a galaxy <i>far, far</i> away';
其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示。

创建和删除text nodes:
var myTextNode = document.createTextNode("my text");
通过上面的代码你可以创建一个新的text node,但是它并不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为
text nodes不能有儿子,所以你不能将它加入到一个text nodes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elements nodes
了,以下的例子展示了如何添加和删除一个text node：
<p id="sample1">Initial text within a paragraph element.</p>
... code to add a text node ...
var text = document.createTextNode(" new text " + (++counter1));
var el = document.getElementById("sample1");
el.appendChild(text);
... code to remove the last child node ...
var el = document.getElementById("sample1");
if (el.hasChildNodes())
el.removeChild(el.lastChild);
增加文本是很容易的,上面的代码建立了一个新的text node并且通过appendChild()方法将其加入到childNodes数组的末尾,并设置了一个counter1的全局变量,利于观察
hasChildNodes()的返回值是true or false;用来判断当前节点是否还有child,以阻止当其没有child的时候调用removeChild()产生的错误。

创建element nodes
有了上面的基础,应该更容易理解了,先看一下下面的代码
<div id="sample1">This text is in a DIV element.</div>
... code for the link ...
var paraEl, boldEl;
paraEl = document.createElement("p");
boldEl = document.createElement("b");
paraEl.appendChild(document.createTextNode("This is a new paragraph with "));
boldEl.appendChild(document.createTextNode("bold"));
paraEl.appendChild(boldEl);
paraEl.appendChild(document.createTextNode(" text added to the DIV"));
document.getElementById("sample1").appendChild(paraEl);
你还可以直接为新加的element nodes设置attribute,以下两种都可以:
boldEl.style.color = "#ffff00";
paraEl.appendChild(boldEl);
或者:
paraEl.appendChild(boldEl);
boldEl.style.color = "#ffff00";
分享到：
| document对象详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DOM对象中的节点操作.pdf

    在DOM中，网页被视作一个由节点组成的树状结构，每一个节点代表文档中的一个部分。 节点是构成DOM树的基本单元，可以是整个文档、元素节点、文本节点、注释节点等。DOM的节点类型包含了元素、属性、文本等，而DOM...

    DOM和BOM的使用

    DOM 树是指文档对象模型的树形结构，每个节点都是一个对象，节点之间通过父子关系连接。DOM 树提供了许多方法和属性，开发者可以通过这些方法和属性来操作文档的内容和结构。 节点树 节点树是指 DOM 树中的一个...

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    在给定的文件内容中，我们可以看到如何使用JavaScript来操作DOM，具体是在一个HTML文档中插入新的子节点和兄弟节点。 知识点1：DOM节点的分类 在DOM中，节点可以是不同类型的实体，例如元素节点、文本节点或属性...

    DOM文档对象中文手册

    DOM文档对象中文手册提供了一个全面的指南，帮助开发者理解和操作文档结构。无论你是前端开发人员还是XML处理者，理解并熟练运用DOM都是至关重要的技能，它能够让你更有效地构建动态、交互式的网页应用。通过阅读和...

    DOM文档对象中文手册.chm

    DOM的核心思想是将网页或XML文档解析为一个树形结构，每个部分都对应一个节点，如元素节点、属性节点、文本节点等。这种结构使得开发者可以通过编程的方式访问和修改文档的任何部分。在JavaScript中，DOM是与网页...

    Dom文档对象模型-2010版

    DOM将一个文档解析为一系列的对象，这些对象构成了一个树形结构，称为DOM树。在DOM树中，每个节点都代表文档的一部分，如元素、属性、文本内容等。通过这个模型，开发者可以轻松地找到、修改或添加文档中的任何部分...

    JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf

    JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中，DOM（Document Object Model）是指...JavaScript 操作 DOM 可以实现动态地创建、插入、删除、克隆和访问节点，从而实现了对文档的动态操作。

    dom4j 解析（读取） xml 节点数据

    DOM4J是一个强大的Java库，专门用于处理XML文档。它提供了简单而直观的方式来解析、创建、修改和操作XML数据。在本教程中，我们将深入探讨如何使用DOM4J解析（读取）XML节点数据，不受XML层级的限制。 首先，确保你...

    DOM — DOM对象继承关系1

    继承自 EventTarget 对象的还有 Node 对象，Node 对象是 DOM 树中的基本单元，表示文档中的一个节点，例如元素、属性、文本等。 Node 对象有多种类型，每种类型都有其特定的属性和方法。例如，Element 对象继承自 ...

    Javascript文档对象模型(DOM

    DOM提供了一种将文档结构化的方法，它将文档视为一个由节点构成的树状结构，每个节点代表文档中的一个组成部分，如元素、属性或文本。通过DOM，开发者不仅能够读取文档的现有内容，还能够动态地添加、删除或修改文档...

    XML中dom根据属性检索节点（C#）

    DOM（Document Object Model）是XML文档的一种表示方式，它将XML文档转换为一个树形结构，使得开发者可以通过编程方式来访问和操作XML文档的各个部分。 在C#中，DOM接口提供了丰富的类库来处理XML文档，主要涉及到`...

    js中DOM文档对象学习代码

    在JavaScript中，DOM...在提供的"js中DOM文档对象学习代码"压缩包中，应该包含了几个示例，涵盖了上述的一些DOM操作。通过深入理解和实践这些示例，您将能够更好地掌握DOM操作的技巧，并将其应用到实际的网页开发中。

    文档对象模型(DOM)的帮助文档

    - **用途**：尽管在实际应用中很少直接使用 `Node` 对象，但它为其他更具体的节点对象（如 `Element`、`Attr` 和 `Text`）提供了一个通用的接口。 - **关键方法**： - `appendChild(Node)`：向当前节点添加一个子...

    使用DOM4J对XML文件操作-添加、修改、删除、获取元素节点

    在DOM4J中，添加元素节点通常涉及创建一个新的`Element`对象，然后将其插入到现有结构中。首先，你需要通过`DocumentFactory`创建一个`Element`，然后使用`Element`的`addContent()`方法或`insertContent()`方法将...

    常用手册 DOM文档对象模型.chm

    通过阅读《常用手册 DOM文档对象模型》，开发者不仅可以深入理解DOM的基本概念，还能掌握实际操作DOM的技巧，从而提高网页和应用程序的交互性和动态性。此外，对于学习前端开发和Web应用的人员来说，这是一份非常...

    DOM文档对象模型中文手册

    "DOM文档对象模型中文手册"是学习和查询DOM相关知识的重要资源，提供了关于DOM节点操作、事件处理、选择和遍历元素等方面的详细解释和示例。CodePub.chm格式的文件通常是一个帮助文档，用户可以通过它快速查找DOM...

    非常实用的DOM文档对象中文手册

    DOM文档对象中文手册是一个重要的学习资源，对于理解和操作网页内容具有极大的帮助。 该手册详细介绍了以下几个核心概念： 1. **DOM基本概念**：DOM是一种与语言无关的接口，使得开发者可以使用JavaScript、Python...

    第06章 DOM节点操作（下）

    在本章中，我们将深入探讨DOM（文档对象模型）节点操作的下半部分。DOM是HTML和XML文档的编程接口，允许我们通过JavaScript等脚本语言动态地修改、添加或删除网页内容。DOM节点操作是前端开发中的核心技能，对创建...

Magicbox
Global site tag (gtag.js) - Google Analytics