cari

Rumah >hujung hadapan web >tutorial js >JavaScript中的dom是什么？如何访问dom节点

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

伊谢尔伦
伊谢尔伦asal
2017-07-20 13:20:541993semak imbas

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个就是在注释与36cc49f0c466276486e50c850b7e4956之间的空白节点。
 一共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]一样。

Atas ialah kandungan terperinci JavaScript中的dom是什么？如何访问dom节点. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用JavaScript dom新建,删除html元素实例详解Artikel seterusnya：JavaScript中如何遍历和修改dom实例详解

Artikel berkaitan

Lihat lagi