论坛首页 Web前端技术论坛

Javascript 在浏览器环境中 (三) DOM节点的访问

浏览 3269 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-09  

DOM

DOM就是Document object Model的缩写。文档对象模型是把XML或HTML以树节点为表现形式的文档。用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript

看看下面的一个文本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <p class="opener">first paragraph</p>
    <p><em>second</em> paragraph</p>
    <p id="closer">final</p>
  </body>
</html>

 

我们来看看第二段

<p><em>second</em> paragraph</p>

可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点,p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做DOM结构树(DOM tree).

 

Core DOM 和 HTML DOM

我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档,只不过更为规范些。因此作为DOM Level 1的一部分,Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档,仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。

 

构造器关系
构造器 继承自 Core /HTML 说明
Node Core 任意的节点
Document Node Core document对象,任意XML文档的入口。
HTMLDocument Document HTML 这个是window.document对象,扩展于前一个Document对象
Element Node Core 在源码的标签。p element的意思就是<p></p>标签
HTMLElement Element HTML 抽象的构造器,所有的HTML元素的构造器都继承它
HTMLBodyElement HTMLElement HTML body标签
。。。 。。。 。。 等等的HTML标签
CharacterData Node Core 抽象的构造器,处理文本的。
Text CharacterData Core 在标签内的文本节点。如em标签内的second.
Comment CharacterData Core <!-- 注释 -->
Attr Node Core 一个标签内的属性。如<p id="closer"> id就是用Attr创建的。
NodeList Core 一个Node的列表。有length属性。
NamedNodeMap Core 可以通过名称访问节点。
HTMLCollection HTML 和上面两个差不多,只不过是HTML规范

 

有兴趣的详情看官方规范把。http://www.w3.org/TR/REC-DOM-Level-1/

 

接下来要讲到

  • 访问DOM节点
  • 修改节点
  • 创建新的节点
  • 删除旧的节点

访问DOM节点

当要验证表单或者更换图片之前,我们要知道怎么样访问元素(element.)。有很多方法获取元素。

 

Document节点

通过document我们可以访问当前的文档。我们可以通过firebugs(火狐插件),来查看document的属性和方法。

 

所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么

document.nodeType;//9

 一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。

节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document.

 

节点也有值。对于文本节点,值就是文本。document的值为null

 

documentElement

XML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用documentElement的属性。

document.documentElement;//<html>
document.documentElement.nodeType;//1
document.documentElement.nodeName;//HTML
document.documentElement.tagName;//对于element,nodeName和tagName相同

 Child Nodes

为了确定是否包含子节点我们可以用如下方法

document.documentElement.hasChildNodes();//true

 HTML有两个子节点。

document.documentElement.childNodes.length;//2

document.documentElement.childNodes[0];//<head>

document.documentElement.childNodes[1];//<body>

  也可以通过子节点访问父节点

document.documentElement.childNodes[1].parentNode;//<html>

 我们把body的引用赋值变量

var bd = document.documentElement.childNodes[1];
bd.childNodes.length;//9

 让我们看看body的结构

  <body>
    <p class="opener">first paragraph</p>
    <p><em>second</em> paragraph</p>
    <p id="closer">final</p>
    <!-- and that's about it -->
  </body>

 为什么子节点个数为9个呢。

 首先是4个P还有一个注释一共4个。

 4个节点包含了3个空白的节点。这就7个。

 第8个在body和第一个p之间的空白节点。

 第9个就是在注释与</body>之间的空白节点。

 一共9个节点。

 

属性

因为第一节点是空白节点,所以第二个节点才是第一个p标签。

bd.childNodes[1];//    <p class="opener">

可以查看它是否有属性

 bd.childNodes[1].hasAttributes();//true

也可以查看attributes的个数

bd.childNodes[1].attributes.length;//1

//可以用index和名字来访问属性,也可以用getAttribute方法。
bd.childNodes[1].attributes[0].nodeName;//class

bd.childNodes[1].attributes[0].nodeValue;//opener

bd.childNodes[1].attributes['class'].nodeValue;//opener

bd.childNodes[1].getAttribute('class');//opener

 访问标签里的内容

让我们看看第一个标签p

你可以用textContent属性来访问。要注意的是,在IE浏览器中并不存在textContent,请用innerText来替换,结果都是一样的。

bg.childNodes[1].textContent;// "first paragraph"

还有一个属性是innerHTML.这并不是DOM的规范。但是主流浏览器都支持这个属性。它返回的是HTML代码。

 

bg.childNodes[1].innerHTML;// "first paragraph"

第一段没有html代码,所以结果和textContent(IE里是innerText)是一样的。来看下第二段包含HTML代码的标签

bd.childNodes[3].innerHTML;//"<em>second</em> paragraph"

bd.childNodes[3].textContent;//second paragraph

 

另一种方法可以获取文本节点,然后再取nodeValue属性,代码如下

bd.childNodes[1].childNodes.length;//1 子节点个数

bd.childNodes[1].childNodes[0].nodeName;// 节点名称 #text

bd.childNodes[1].childNodes[0].nodeValue;//节点值 first paragraph

 

快速访问DOM

通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中,文本节点是比较讨厌的。如果文本改变了,有可能就影响脚本了。还有如果DOM树足够的深入,那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是

  • getElementsByTagName()
  • getElementsByName()
  • getElementById()

首先说下getElementsByTagName()

通过一个标签名称(tag name)来获取一个html元素的集合。例子如下

document.getElementsByTagName('p').length;//3

因为返回的是个集合,我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。

document.getElementsByTagName('p')[0];//  <p class="opener">
document.getElementsByTagName('p').item(0);//和上面的结果一样

document.getElementsByTagName('p')[0].innerHTML;//first paragraph

 

访问元素的属性,可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子

document.getElementsByTagName('p')[2].id;//closer

要注意的是,class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。

document.getElementsByTagName('p')[0].className;//opener

我们可以用如下方法访问页面所有元素

document.getElementsByTagName('*').length;//9

注意:在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了,但是返回的是所有节点(node),而不仅仅是元素节点(element nodes)。

 

 

Siblings, Body, First, Last Child

nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下

var para = document.getElementById('closer')
para.nextSibling;//"\n"
para.previousSibling;//"\n"
para.previousSibling.previousSibling;//<p>
para.previousSibling.previousSibling.previousSibling;//"\n"
para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">

 

body 用来访问body元素的。

document.body;//<body>

firstChildlastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。

 

遍历DOM

通过以上的学习,我们可以写个函数,用来遍历DOM

function walkDOM(n) {
  do {
    alert(n);
    if (n.hasChildNodes()) {
      walkDOM(n.firstChild)
    }    
  } while (n = n.nextSibling)
}

walkDOM(document.body);//测试

 

 

 

 

 

 

 

 

 

 

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics