Javascript之DOM的三大节点及部分用法

DOM有三种节点:元素节点、属性节点、文本节点。

一、用nodeType可以检测节点的类型

节点类型 nodeType属性值
元素节点 1
属性节点 2
文本节点 3

这样方便在js中对各个节点进行操作。

元素节点:html中的标签。

属性节点:html便签中的属性值。

文本节点:元素节点之间的文本。

二、用body的childNodes来测试

1  <body>/*第一个文本元素
2    */<div></div>/*第二个文本元素
3    */<div></div>/*第三个文本元素
4    */<ul>
5          <li></li>
6          <li></li>
7          <li></li>
8      </ul>/*第四个文本元素
9  */</body>

来看body的childNodes中各个节点的个数。

先说一下childNodes,这个属性用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组。

用js测试:

1 window.onload = function (){
2     var oBody = document.getElementsByTagName(‘body‘)[0];
3     var aChild = oBody.childNodes;
4     alert(aChild.length);//7
5     for(var i = 0; i < aChild.length; i++) {
6         alert(aChild[i].nodeType);//3 1 3 1 3 1 3
7         }
8 };

由此看来:

body的子元素有div、div、ul。

body的文本元素有四个,代码中注释出出来的,我故意将*/换了一行写出来,是想表明在<body>和<div>之间是一个文本节点。

有人会觉得疑惑,不是说元素节点之间就是文本节点吗?为什么像<div></div>之间的文本节点没有算进去呢?

对的,那个也算文本节点,但我们计算的是body的子节点,像<div></div>之间的那是<div>的子节点啦,并不是body的子节点。

三、用nodeValue来得到和设置一个节点的值

三大节点中,属性节点和文本节点都是可能有值的,但是元素节点是没有值的。

用node.nodeValue得到node的值,那么有一个问题,nodeValue和innerHTML有什么区别呢?

nodeValue获取的是节点的值,innerHTML是以字符串形式返回该节点的所有子节点及其值。可以看做是部分与大体的一个区别。

举个例子:

1 <body>
2     <div id="div1">
3         这是div的第一个子节点,是一个文本节点
4         <p>div的第二个子节点p,这是p的第一个文本节点</p>
5     </div>
6 </body>

我们用js来测试一下nodeValue和innerHTML的结果

1 window.onload = function (){
2     var oDiv = document.getElementById(‘div1‘);
3     var aChild = oDiv.childNodes;
4
5     alert(aChild[0].nodeValue);
6     alert(oDiv.innerHTML);
7 };

测试结果如下:

第一个alert弹出“这是div的第一个子节点,是一个文本节点”

第二个alert弹出“这是div的第一个子节点,是一个文本节点 <p>div的第二个子节点p,这是p的第一个文本节点</p>”

三、用nodeName来获取节点的

nodeName属性含有某个节点的名称。

对于元素节点,nodeName=标签名(返回的名称是大写的)。

对于文本节点,nodeName=#text。

对于属性节点,nodeName=属性名(返回的名称是大写的)。

使用方法:elemt.nodeName;

时间: 2024-10-04 10:58:51

Javascript之DOM的三大节点及部分用法的相关文章

JavaScript中DOM的层次节点(一)

DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点类型,每种都拥有自己的特点.数据和方法,并且和其他节点存在着某种关系. html元素称为文档元素,所有的元素都包含在文档元素中,并且每个文档只有一个html元素. 1 Node类型 DOM1级定义了Node接口,该接口由DOM中的所有节点类型实现.这个接口在JavaScript中是作为Node类型实

JavaScript HTML DOM 元素(节点)

在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档  9. 一.添加和删除节点(HTML 元素) 1.创建节点 1)创建该元素(元素节点): 2)向一个已存在的元素追加该元素. 语法:appendChild(newnode) eg: 1 <div id="div1"&g

javascript基础--DOM选取子节点

一.节点选取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // 首尾子节点有兼容性问题 // firstChild firstElementChild // lastChild lastElementChild // 兄弟节点 // ne

javascript基础--DOM选取父节点

一.parentNode <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var aA = document.getElementsByTagName('a'); var i = 0;

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59  来自 : LMLPHP后院 如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性. 某些情况下,我们不能使用 JQ

JavaScript的DOM操作(节点操作)

创建节点createElement()var node = document.createElement("div");没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里. 2.创建文本节点createTextNode()var value = document.createTextNode("text");创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里.很多人知道innerHTML,不知道这个方法,这个

JavaScript的DOM编程--11--插入节点

插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,targetNode); 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点. 1 <!DOCTYPE html> 2 <html lang="en"

JavaScript的DOM编程--03--读写属性节点

读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Untitl