【转】JavaScript获取节点类型、节点名称和节点值
节点类型
DOM节点中,每个节点都拥有不同的类型。
W3C规范中常用的 DOM节点类型有以下几种:
| 节点类型 | 说明 | 值 |
|---|---|---|
| 元素节点 | 每一个HTML标签都是一个元素节点,如 <div> 、 <p>、<ul>等 | 1 |
| 属性节点 | 元素节点(HTML标签)的属性,如 id 、class 、name 等。 | 2 |
| 文本节点 | 元素节点或属性节点中的文本内容。 | 3 |
| 注释节点 | 表示文档注释,形式为<!-- comment text -->。 | 8 |
| 文档节点 | 表示整个文档(DOM 树的根节点,即 document ) | 9 |
获取节点类型的语法:
nodeObject.nodeType
其中,nodeObject 为DOM节点(节点对象)。该属性返回以数字表示的节点类型,例如,元素节点返回 1,属性节点返回 2 。
例如,获取id="demo"的<div>标签的节点类型:
- document.getElementById("demo").nodeType;
该语句的返回值为 1 。
举例,获取元素节点和文本节点的类型值:
- <div id="demo1">点击这里显示节点类型</div>
- <script type="text/javascript">
- document.getElementById("demo1").onclick=function(){
- var divType=this.nodeType;
- var textType=this.firstChild.nodeType; // this 指当前发生事件的HTML元素,这里是<div>标签
- alert(
- "<div>标签的节点类型是:"+divType+"\n"+
- "<div>标签内部文本的节点类型是:"+textType
- );
- }
- </script>
节点名称
节点名称就是DOM节点的名字,不同类型的节点对应不同的节点名称。
| 节点类型 | 节点名称 |
|---|---|
| 元素节点 | HTML标签的名称(大写) |
| 属性节点 | 属性的名称 |
| 文本节点 | 它的值永远是#text |
| 文档节点 | 它的值永远是#document |
获取节点名称的语法:
nodeObject.nodeName
其中,nodeObject 为DOM节点(节点对象)。
例如,获取id="demo"的<div>标签的节点名称:
- document.getElementById("demo").nodeName;
该语句的返回值为 DIV 。
举例,获取元素节点名称、文本节点名称和文档节点名称:
- <div id="demo2">点击这里显示节点名称</div>
- <script type="text/javascript">
- document.getElementById("demo2").onclick=function(){
- var divName=this.nodeName;
- var textName=this.firstChild.nodeName; // this 指当前发生事件的HTML元素,这里是<div>标签
- var documentName=document.nodeName
- alert(
- "<div>标签的节点名称是:"+divName+"\n"+
- "<div>标签内部文本的节点名称是:"+textName+"\n"+
- "文档节点的节点名称是:"+documentName
- );
- }
- </script>
节点值
对于文本节点,节点值为文本内容;对于属性节点,节点值为属性的值。
节点值对于文档节点和元素节点是不可用的。
获取节点值的语法:
nodeObject.nodeValue
其中,nodeObject 为DOM节点(节点对象)。
举例,获取文本节点的节点值:
- <div id="demo3">点击这里显示文本节点的值</div>
- <script type="text/javascript">
- document.getElementById("demo3").onclick=function(){
- alert(this.firstChild.nodeValue); // this 指当前发生事件的HTML元素,这里是<div>标签
- }
- </script>
【转】JavaScript获取节点类型、节点名称和节点值的更多相关文章
- javaScript获取文档中所有元素节点的个数
HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...
- JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...
- javascript获取childNodes详情,删除空节点
chidNodes返回的是node的集合, 每个node都包含有nodeType属性. nodeType取值: 元素节点:1 属性节点:2 文本节点:3 注释节点:8 页面上是由无数个节点组成 ...
- javascript 获取dom书的下一个节点。
利用javascript 写一个在页面点击加减按钮实现数字的累加.. 简略的html大概如此.看得懂就好不要在意这些细节啊 <input type="button" valu ...
- 深入理解DOM节点类型第二篇——文本节点Text
× 目录 [1]特征 [2]空白 [3]属性[4]方法[5]性能 前面的话 文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点.该节点简单直观,本文将详细介绍该部分内容 特征 文本节点 ...
- xpath的数据和节点类型以及XPath中节点匹配的基本方法
XPath数据类型 XPath可分为四种数据类型: 节点集(node-set) 节点集是通过路径匹配返回的符合条件的一组节点的集合.其它类型的数据不能转换为节点集. 布尔值(boolean) ...
- JavaScript获取table中某一列的值的方法
1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- JavaScript获取onclick、onchange等事件的值
今天小菜处理下拉菜单级联问题时,想获取HTML标签中某个事件的内容,也就是值,比如从<select id="city" onchange="javascript:t ...
- javascript获取asp.net服务器端控件的值
代码如下: <%@ Page Language="C#" CodeFile="A.aspx.cs" Inherits="OrderManage_ ...
随机推荐
- Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Android中Activity的生命周期
简介: 这个基本是必问的问题了,说一下你对Activity生命周期的理解,呵呵… onCreate, onStart, onResume, onPause, onStop, onDestroy, on ...
- Android - 设置TextView的字体行间距 - TextView
xml文件中给TextView添加: android:lineSpacingExtra="10dp"// 行间距 android:lineSpacingMultiplier=&qu ...
- Mac的最小化和隐藏的区别
Mac 中应用程序窗口的最小化和隐藏的快捷键: CMD + H 隐藏应用程序 CMD + M 最小化应用程序 重点在于两点的区别: 最小化会隐藏当前应用程序的窗口,不切换当前的应用程序:隐藏应用程序会 ...
- ado.net中,数据的批量处理
//btBigImport按钮点击事件 private void btBigImport_Click(object sender, RoutedEventArgs e) { //连接字符 ...
- 学习中的错误——ubuntu 14.04 LTS 启动eclipse报错
在ubuntu中启动eclipse报错:(Eclipse:15978): GLib-GIO-CRITICAL **: g_dbus_connection_get_unique_name: assert ...
- pb自动注册ole控件
方法一: 1.手工注册OCX控件 将该控件随程序一起发布,然后,将此文件拷到windows\system,或者直接放在本运行目录,然后执行dos命令,run( "regsvr32 *. ...
- oracle:ORACLE 实际返回的行数超出请求的行数
写的存储过程,执行后一直报实际返回的行数超出请求的行数的错误. 原因:select prdt_id into prdt_id from.... 两个变量名称相同造成的..哎 第一个变量换成大写..问 ...
- JS截取字符串常用方法详细整理
使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico|png" ...
- 龙哥库塔法or欧拉法求解微分方程matlab实现
举例:分别用欧拉法和龙哥库塔法求解下面的微分方程 我们知道的欧拉法(Euler)"思想是用先前的差商近似代替倒数",直白一些的编程说法即:f(i+1)=f(i)+h*f(x,y)其 ...