首页 > web前端 > js教程 > 正文

JavaScript中的dom是什么?如何访问dom节点

伊谢尔伦
发布: 2017-07-20 13:20:54
原创
1946 人浏览过

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).

访问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的结构


 
 

first paragraph

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

final

登录后复制


为什么子节点个数为9个呢。
首先是4个P还有一个注释一共4个。
4个节点包含了3个空白的节点。这就7个。
第8个在body和第一个p之间的空白节点。
第9个就是在注释与之间的空白节点。
一共9个节点。


快速访问DOM

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


getElementsByTagName()
getElementsByName()
getElementById()
登录后复制

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


document.getElementsByTagName(&#39;p&#39;).length;//3
登录后复制

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


document.getElementsByTagName(&#39;p&#39;)[0];// <p class="opener"> 
document.getElementsByTagName(&#39;p&#39;).item(0);//和上面的结果一样 
 
document.getElementsByTagName(&#39;p&#39;)[0].innerHTML;//first paragraph
登录后复制

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


document.getElementsByTagName(&#39;p&#39;)[2].id;//closer
登录后复制

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


document.getElementsByTagName(&#39;p&#39;)[0].className;//opener
登录后复制

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


<span style="color: #ff0000;">document.getElementsByTagName(&#39;*&#39;).length;//9</span>
登录后复制

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

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


var para = document.getElementById(&#39;closer&#39;) 
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>
登录后复制

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

以上是JavaScript中的dom是什么?如何访问dom节点的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板