DOM中元素节点,属性节点,文本节点的理解
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是:
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
在实际应用中,经常用到的就是元素节点、属性节点和文本节点了,下面我们通过小段代码进行讲解
1:元素节点
- <HEAD>
- <TITLE>空谷悠悠</TITLE>
- </HEAD>
- <BODY>
- <table>
- <tr>
- <td id="john" name="myname">John</td>
- <td>Doe</td>
- <td id="jack">Jack</td>
- </tr>
- </table>
- <script>
- var d = document.getElementById("john");
- alert(d.nodeType)
- alert(d.nodeName)
- alert(d.nodeValue)
- </script>
- </BODY>
- </HTML>
分析运行结果,其三个属性的值分别为:
nodeType:ELEMENT_NODE
nodeType值:1
nodeName:元素标记名 //此处为TD
nodeValue:null
2:属性节点
- <HEAD>
- <TITLE>空谷悠悠</TITLE>
- </HEAD>
- <BODY>
- <table>
- <tr>
- <td id="john" name="myname">John</td>
- <td>Doe</td>
- <td id="jack">Jack</td>
- </tr>
- </table>
- <script>
- var d = document.getElementById("john").getAttributeNode("name");
- alert(d.nodeType)
- alert(d.nodeName)
- alert(d.nodeValue)
- </script>
- </BODY>
- </HTML>
分析运行结果,其三个属性的值分别为:
nodeType:ATTRIBUTE_NODE
nodeType值:2
nodeName:属性名 // name
nodeValue:属性值 //myname
3:文本节点
- <HEAD>
- <TITLE> New Document </TITLE>
- </HEAD>
- <BODY>
- <table>
- <tr>
- <td id="john" name="myname">John</td>
- <td>Doe</td>
- <td id="jack">Jack</td>
- </tr>
- </table>
- <script>
- var d = document.getElementsByTagName("td")[0].firstChild
- alert(d.nodeType)
- alert(d.nodeName)
- alert(d.nodeValue)
- </script>
- </BODY>
- </HTML>
分析运行结果,其三个属性的值分别为:
nodeType:TEXT_NODE
nodeType值:3
nodeName:#text
nodeValue:文本内容 // John
DOM中元素节点,属性节点,文本节点的理解的更多相关文章
- DOM中元素节点、属性节点、文本节点
DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...
- DOM中元素节点、属性节点、文本节点的理解
DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) ...
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- [转]XML中元素(Element)与节点(Node)的区别
前言: element是特殊的node 一段纯文本即text-node也是node 但不是element w3c的原话是 A node can be an element node, an attri ...
- contents() 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...
- windows phone xaml文件中元素及属性(10)
原文:windows phone xaml文件中元素及属性(10) Textblock xaml文件和隐藏文件 在设计界面的时候我们可以通过xaml中进行设计,这种设计是所见即所得的,很是方便,由于x ...
- php的form中元素name属性相同时的取值问题
php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...
- DOM中元素节点、属性节点、文本节点的理解13.3
节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
随机推荐
- PHP自己定义函数及数组
个人原创博客:http://www.phpthinking.com/archives/350 一.自己定义函数 自己定义函数就是我们自己定义的函数.在PHP中自己定义函数格式例如以下: 1 funct ...
- 0x58B 四边形不等式
bzoj1563: [NOI2009]诗人小G 还有优化二维区间DP的,形如f[i][j]min{f[i][k]+f[k][j+1]+val(i,j)} 其中val满足四边形不等式,而且对于任意a&l ...
- B1012 [JSOI2008]最大数maxnumber 分块||RMQ
这个题有毒,卡最大值...我开1 << 30爆零让我以为我分块错了...gg,然后去写RMQ,但是这个题st表是真简单啊.后来刘胜与巨佬一眼看出来我最大值不够大...然后1LL<&l ...
- Tool-Java:Eclipse
ylbtech-Tool-Java:Eclipse Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运的是,E ...
- 2014/09/20 关于ArrayList的几种操作
1.删除ArrayList集合元素 删除ArrayList集合里面的元素时,提供了Clear方法,Remove方法,RmoveAt方法和RemoveRange方法. Clear方法是移除所有的元素 R ...
- php Aes 128位算法
<?php class Mcrypt { private static $key = "fsdjfojojodjiovjojgfosdjfiojio"; private st ...
- Redis(三)、Redis主从复制
一.主从复制 主从复制:主节点负责写数据,从节点负责读数据,从而实现读写分离,提高redis的高可用性. 让一个服务器去复制(replicate)另一个服务器,我们称呼被复制的服务器为主节点(mast ...
- 【转】什么是P问题、NP问题和NPC问题
原文链接:http://www.matrix67.com/blog/archives/105,感谢Matrix67,看完这篇文章终于把这个几个概念弄明白了!! 这或许是众多OIer最大的误区之一. ...
- Windows 文件自动同步共享工具
操作地址: http://blog.sina.com.cn/s/blog_1320088ed0102uxln.html下载地址: http://www.zisync.com/download
- unity3d 鼠标事件
using UnityEngine; using System.Collections; public class mouse : MonoBehaviour { //private Vector3 ...