DOM中元素节点、属性节点、文本节点的理解

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称） 
nodeValue（节点值） 
nodeType（节点类型） 
nodeType

nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型

节点类型

元素(ELEMENT_NODE)

1

属性(ATTRIBUTE_NODE)

2

文本(TEXT_NODE)

3

注释(COMMENT_NODE)

8

文档(DOCUMENT_NODE)

9

在实际应用中，经常用到的就是元素节点、属性节点和文本节点了，下面我们通过小段代码进行讲解

1：元素节点
元素节点代码

  1. <HTML>
  2. <HEAD>
  3. <TITLE>空谷悠悠</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <table>
  7. <tr>
  8. <td id="john" name="myname">John</td>
  9. <td>Doe</td>
  10. <td id="jack">Jack</td>
  11. </tr>
  12. </table>
  13. <script>
  14. var d = document.getElementById("john");
  15. alert(d.nodeType)
  16. alert(d.nodeName)
  17. alert(d.nodeValue)
  18. </script>
  19. </BODY>
  20. </HTML>

分析运行结果，其三个属性的值分别为：

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素标记名    //此处为TD

nodeValue：null

2：属性节点

属性节点代码

  1. <HTML>
  2. <HEAD>
  3. <TITLE>空谷悠悠</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <table>
  7. <tr>
  8. <td id="john" name="myname">John</td>
  9. <td>Doe</td>
  10. <td id="jack">Jack</td>
  11. </tr>
  12. </table>
  13. <script>
  14. var d = document.getElementById("john").getAttributeNode("name");
  15. alert(d.nodeType)
  16. alert(d.nodeName)
  17. alert(d.nodeValue)
  18. </script>
  19. </BODY>
  20. </HTML>

分析运行结果，其三个属性的值分别为：

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名  // name

nodeValue：属性值  //myname

3:文本节点

文本节点代码

  1. <HTML>
  2. <HEAD>
  3. <TITLE>New Document</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <table>
  7. <tr>
  8. <td id="john" name="myname">John</td>
  9. <td>Doe</td>
  10. <td id="jack">Jack</td>
  11. </tr>
  12. </table>
  13. <script>
  14. var d = document.getElementsByTagName("td")[0].firstChild
  15. alert(d.nodeType)
  16. alert(d.nodeName)
  17. alert(d.nodeValue)
  18. </script>
  19. </BODY>
  20. </HTML>

分析运行结果，其三个属性的值分别为：

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容   // John

DOM中元素节点、属性节点、文本节点的理解的更多相关文章

  1. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  2. DOM中元素节点，属性节点，文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  3. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  4. [转]XML中元素（Element）与节点（Node）的区别

    前言: element是特殊的node 一段纯文本即text-node也是node 但不是element w3c的原话是 A node can be an element node, an attri ...

  5. contents() 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

    contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容   示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...

  6. windows phone xaml文件中元素及属性(10)

    原文:windows phone xaml文件中元素及属性(10) Textblock xaml文件和隐藏文件 在设计界面的时候我们可以通过xaml中进行设计,这种设计是所见即所得的,很是方便,由于x ...

  7. php的form中元素name属性相同时的取值问题

    php的form中元素name属性相同时的取值问题:修改元素的名称,在名称后面加上 '[]',然后取值时即可得array()数组. 一.以复选框为例: <html> <head> ...

  8. DOM中元素节点、属性节点、文本节点的理解13.3

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返 ...

  9. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

随机推荐

  1. 基本的DMA控制器

    DMA的基本概念 直接内存访问(DMA)是一种完全由硬件执行I/O交换的工作方式.在这种方式中,DMA控制器从CPU完全接管对总线的控制,数据交换不经过CPU,而直接在内存和I/O设备之间进行 .DM ...

  2. CUBRID学习笔记 29 web管理中文语言文件 CUBRID教程

    网站的中文语言文件部分 http://files.cnblogs.com/files/wang2650/Messages.7z

  3. 差之毫厘谬之千里！带你认识CPU后缀含义

    intel的几代CPU中,后缀字母主要有以下几种: M:笔记本专用CPU,一般为双核,M前面一位数字是0,意味着是标准电压处理器,如果是7,则是低电压处理器. U:笔记本专用低电压CPU,一般为双核, ...

  4. spring事务知识

    事务的传播行为? 在Spring 的事务中, _可以通过 propagation 来定义事务的传播行为_: PROPAGATION_required:如果当前没有事务,就新建一个事务,如果已经存在一个 ...

  5. adb_亮屏

    来自:http://justonlypiano.blogspot.tw/2013/08/adbandroidandroid-phone-screen-off-via.html 更多内容请查看:http ...

  6. Promise A 规范的一个简单的浏览器端实现

    简单的实现了一个promise 的规范,留着接下来模块使用.感觉还有很多能优化的地方,有时间看看源码,或者其他大神的代码 主要是Then 函数.回调有点绕人. !(function(win) { fu ...

  7. oracle dba 职责, 及个人需要掌握内容

    ORACLE DBA 职责, 基本相当于日常工作. 0. 数据库设计 1. 模式对象的创建与管理(table, index 等等) 2. 事物管理, 例如并发等 3. SQL 调优 只是针对SQL的 ...

  8. Google MapReduce/GFS/BigTable三大技术的论文中译版

    今天查找分布式计算的有关资料,发现Google的三大核心技术MapReduce.GFS和BigTable的论文都已经被翻译成高质量的中文,更巧的是,这三篇中译版的原发地都是CSDN的Blog.其中最新 ...

  9. Xcode好用的插件

    注释:每当Xcode升级之后,都会导致原有的Xcode插件不能使用,这是因为每个插件的Info.plist中记录了该插件兼容Xcode版本的DVTPlugInCompatibilityUUID,而每个 ...

  10. iOS开发之在Xcode代码中插入类似QQ的表情

    1.Xcode打开工程 2.菜单栏Edit--->SpecialCharacters 3.点击它出现