首先了解一下DOM中有三大节点,分别是 元素节点,文本节点,属性节点

元素节点:构成了DOM的基础。文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)

文本节点:包含在元素节点中。

属性节点:元素都可以包含一些属性,属性的作用是对元素做出更具体的描述,比如id,name之类的。

以下面的demo为例:

<script>
window.onload = function(){
  var element = document.getElementById("span");
  var text = element.firstChild;
  var property=document.getElementById("span").getAttributeNode("id");
}
</script> <body>
  <div>
    <span id="span">文本节点</span>
  </div>
</body> 

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

元素节点的 nodeName 是标签名称(返回的名称是大写的)

属性节点的 nodeName 是属性名称(返回的名称是大写的)

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释:nodeName 所包含的 XML 元素的标签名称永远是大写的

alert("这是元素节点的返回值:"+ element.nodeName);//返回的标签名SPAN,注意是大写的
alert("这是文本节点的返回值:"+ text.nodeName);//返回的#text
alert("这是属性节点的返回值:"+ property.nodeName);//返回的是属性名,这里是id

(二)nodeValue

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

alert("这是元素节点的返回值:"+ element.nodeValue);//本身就没有意义,这里是试验下的,返回的是null
alert("这是文本节点的返回值:"+ text.nodeValue);//返回的是文本值 文本节点
alert("这是属性节点的返回值:"+ property.nodeValue);//返回的是属性值,这里是id的属性值span

(三)nodeType

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

我们常用的3中类型:
nodeType == 1  : 元素节点
nodeType == 2  : 属性节点
nodeType == 3  : 文本节点

注释 comments   8

文档 document   9

  alert("这是元素节点的返回值:"+ element.nodeType);//元素节点返回1
alert("这是文本节点的返回值:"+ text.nodeType);//文本节点返回3
alert("这是属性节点的返回值:"+ property.nodeType);//属性节点返回2

___________________________

原文:http://www.tuicool.com/articles/zANnye

nodeType、nodeName和nodeValue的更多相关文章

  1. childNodes、nodeName、nodeValue 以及 nodeType

    nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称属性节点的 nodeName ...

  2. Dom中的nodeName、nodeValue 、nodeType

    nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName ...

  3. jquery冲突的关键字nodeName、nodeValue和nodeType!

    原文:http://blog.csdn.net/hdfyq/article/details/52805836 [缘由]在工作流数据库设计的时候,  都节点管理的功能.  结果有2个字段为  NODE_ ...

  4. hasChildNodes()方法,nodeName、nodeValue、nodeType介绍

    Document对象的使用:hasChildNodes()方法,nodeName.nodeValue.nodeType的简单介绍 一.hasChildNodes() 说明: (1)       该方法 ...

  5. 节点nodeName与nodeValue表

  6. DOM 小总结

    DOM 是什么 文档对象模型,是针对 HTML 和 XML 文档的一个 API (应用程序编程接口), 描绘了一个层次化的节点树. D: document 当 web 浏览器浏览一个页面的时候,DOM ...

  7. HTML DOM的nodeName,nodeValue,nodeType介绍

    将HTML DOM中几个常用的属性做下介绍,工作中作为参考. nodeName 属性可依据节点的类型返回其名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文 ...

  8. HTML DOM 节点介绍(nodeName,nodeValue,nodeType)

    对于初学者来说,HTML DOM 里面的 nodeName.nodeValue 以及 nodeType 三个属性的作用和取值不是很清楚.下面整理的信息包含有关于节点的详细信息,供参考. 节点信息 每个 ...

  9. DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >

    http://msdn.microsoft.com/zh-cn/library/vstudio/hf9hbf87.aspx <?xml version="1.0"?> ...

随机推荐

  1. OC基础--结构体 枚举做类成员属性

    结构体  枚举作类的成员属性: 定义一个学生类 性别 -- 枚举 生日 入学日期  毕业日期  --  结构体 代码示例: 声明文件 Student.h: #import <Foundation ...

  2. leetcode日记 Combination sum IV

    题目: Given an integer array with all positive numbers and no duplicates, find the number of possible ...

  3. Python 中的数据结构总结(一)

    Python 中的数据结构 “数据结构”这个词大家肯定都不陌生,高级程序语言有两个核心,一个是算法,另一个就是数据结构.不管是c语言系列中的数组.链表.树和图,还是java中的各种map,随便抽出一个 ...

  4. Haar-like特征

    参考文献: [1]Viola P, Jones M. Rapid object detection using a boosted cascade of simple features[C]//Com ...

  5. VMware-workstation-full-12.0.0-2985596&VMware-player-12.0.0-2985596

    VMware-workstation-full-12.0.0-2985596 永久KEY:YV3D2-A0D50-481XP-KPNGE-ZV2ZF VMware-player-12.0.0-2985 ...

  6. 应用间共享数据方法(一)---sharepreferce

    SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数. SharedPreferences保存数据,其背后是用xml文件存放数据,文件存放在/data/data/ ...

  7. SpringMVC 对比 struts2

    一.SpringMVC的入口是Servlet,而struts2的入口是filter 二.SpringMVC会稍微比struts2 快些.SpringMVC是基于方法设计的,而struts2是基于类,每 ...

  8. [解决方案] pythonchallenge level 4

    http://www.pythonchallenge.com/pc/def/linkedlist.php 查看页面源代码或者点击图片 http://www.pythonchallenge.com/pc ...

  9. UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)!

    2015年4月. 成都 UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可 ...

  10. Guess Number Higher or Lower II--困惑

    今天,试着做了一下LeetCode OJ上面的第375道题:Guess Number Higher or Lower II 原题链接:https://leetcode.com/problems/gue ...