HTML DOM的nodeType值介绍

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

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

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

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

nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：




















元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
补充：
值-元素类型
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION

HTML文件:


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM标准</title>
<script type="text/javascript" src="test.js"></js>
</head>
<body>
<h1 id="h1">An HTML Document</h1>
<p id="p1">This is a <i>W3C HTML DOM</i> document.</p>
<p><input id="btnDemo1" type="button" value="取H1 Element节点值"></p>
<p><input id="btnDemo2" type="button" value="取H1 Element节点文本"></p>
<p><input id="btnDemo3" type="button" value="取Document Element节点文本"></p>
<p><input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示" /></p>
</body>
</html>

JS:


代码如下:

function showElement(){
var element=document.getElementById("h1");//h1是一个<h1>标签
alert('nodetype:'+element.nodeType);//nodeType=1
alert('nodeName:'+element.nodeName);
alert('nodeValue:'+element.nodeValue); //null
alert('element:'+element);
}
function showText(){
var element=document.getElementById("h1");
var text=element.childNodes[0];
alert('nodeType:'+text.nodeType); //nodeType=3
alert('nodeValue:'+text.nodeValue); //文本节点的nodeValue是其文本内容
text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。
alert('nodeName:'+text.nodeName);
alert(text.data); //data同样是其内容,这个属性下同样可以增删改。
}
function showDocument(){
alert('nodeType:'+document.nodeType); //9
alert('nodeName:'+document.nodeName);
alert(document);
}
function showAttr(){
var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮，有很多属性
var attrs=btnShowAttr.attributes;
for(var i=0;i<attrs.length ;i++){
var attr=attrs[i];
alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2
alert('attr:'+attr);
alert('attr.name:'+attr.name+'='+attr.value);
}
}
function demo(){
var btnDemo1=document.getElementById("btnDemo1");
btnDemo1.onclick=showElement; //按钮1取节点nodetype值
var btnDemo2=document.getElementById("btnDemo2");
btnDemo2.onclick=showText;
var btnDemo3=document.getElementById("btnDemo3");
btnDemo3.onclick=showDocument;
var btnShowAttr=document.getElementById("btnShowAttr");
btnShowAttr.onclick=showAttr;
}
window.onload=demo;

赞 (0)

相关推荐

  • js中typeof的用法汇总

    JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2Ftypeof > type

  • js判断undefined变量类型使用typeof

    js判断undefined变量类型直接用 复制代码 代码如下: if(mydata=='undefined'){ alert("未定义"); } 这是个很低级的错误,这么使: 复制代码 代码如下: if(typeof(mydata)=='undefined'){ alert("未定义"); }

  • c#中GetType()与Typeof()的区别

    案例1: 复制代码 代码如下: int i = 5;Console.WriteLine(i.GetType());//System.Int32var x = 127.25m;Console.WriteLine(x.GetType());//System.Decimal 案例2: 复制代码 代码如下: namespace _2011._12._15{    class Program    {        static void Main(string[] args)        {     

  • nodeType属性返回被选节点的节点类型介绍

    节点编号: 节点名称: 1  Element 2  Attribute 3  Text 4  CDATA Section 5  Entity Reference 6  Entity 7  Processing Instrucion 8  Comment 9  Document 10  Document Type 11  Document Fragment 12  Notation

  • 浅谈nodeName,nodeValue,nodeType,typeof 的区别

    nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document nodeValue 节点值 对于文本节点,nodeValue 属性包含文本. 对于属性节点,nodeValue 属性包含属性值. nodeValue 属性对于文档节点和元素节点是不可用的. nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素ele

  • 使用typeof方法判断undefined类型

    有关js判断undefined类型,使用typeof方法,typeof 返回的是字符串,其中就有一个是undefined. js判断undefined类型 if (reValue== undefined) { alert("undefined"); } 发现判断不出来,最后查了下资料要用typeof方法: if (typeof(reValue) == "undefined") { alert("undefined"); } typeof 返回字符

  • Js nodeType 属性全面解析

    定义和用法nodeType 属性返回被选节点的节点类型. 语法:elementNode.nodeType 节点编号: 节点名称: 1 Element 2 Attribute 3 Text 4 CDATA Section 5 Entity Reference 6 Entity 7 Processing Instrucion 8 Comment 9 Document 10 Document Type 11 Document Fragment 12 Notation

  • javascript typeof的用法与typeof运算符介绍[详细]第1/2页

    经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "

  • HTML DOM的nodeType值介绍

    nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:nodeName 所包含的 XML 元素的标签名称永远是大写的 nodeValue 对于文本节点,nodeValue 属性包含文本. 对于属性节点,nodeValue 属性

  • React中DOM事件和状态介绍

    目录 DOM事件 参数 作用域 状态 无状态组件 有状态组件 使用状态数据 初始化状态数据 修改状态数据 DOM事件 react中绑定事件的语法跟html中为元素绑定事件的语法相似, html中绑定事件: <div onclick="fn"></div>     react中绑定事件 <div onClick={this.fn}></div> 注意: 1 事件名称首字母必须大写 2 事件回调函数定义在组件中,我们通过插值语法引入绑定 3

  • Android onTouchEvent事件中onTouch方法返回值(介绍)

    1.若return false说明没有成功执行onTouch事件,在执行完onTouch里面的代码之后,onTouch事件并没有结束.因此某些组件如Gallery会自动执行它所在view里onTouch方法的代码.若在onTouch方法里面增加你的代码并且最后return false就会执行你在OnTouch方法中的处理操作了. 2.若return true说明你已经成功执行onTouch方法了,在执行完onTouch中的代码之后,这个onTouch事件就结束了.也不会再调用组件如Gallery

  • Lua教程（二）：基础知识、类型与值介绍

    Lua教程（二）：基础知识、类型与值介绍

    一.基础知识: 1. 第一个程序和函数:     在目前这个学习阶段,运行Lua程序最好的方式就是通过Lua自带的解释器程序,如:   复制代码 代码如下: /> lua     > print("Hello World")     Hello World 这样我们就可以以交互性的方式输入lua代码,并立即得到执行结果了.对于代码块较少的测试程序来说,这种方式确实是非常方便的,然而对于相对复杂的程序而言,这种方式就不是很合适了.如果是这样,我们可以将Lua代码保存到一个独立

  • DOM 中的事件处理介绍

    该接口提供了 'addEventListener' 和 'removeEventListener' 方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget. DOM 2 Events 中定义了 Event 接口,用来提供事件的上下文信息,它提供了若干标准属性和方法. 实现 Event 接口的对象一般作为第一个参数传入事件处理函数,以用来提供当前事件相关的一些信息. 事件注册 根据 DOM 2 Events 中描述,节点使用 'addEventListener'

  • asp.net EXECUTENONQUERY()返回值介绍

    ExecuteNonQuery()方法主要用户更新数据,通常它使用Update,Insert,Delete语句来操作数据库,其方法返回值意义:对于 Update,Insert,Delete  语句 执行成功是返回值为该命令所影响的行数,如果影响的行数为0时返回的值为0,如果数据操作回滚得话返回值为-1,对于这种更新操作 用我们平时所用的是否大于0的判断操作应该没有问题而且比较好,但是对于其他的操作如对数据库结构的操作,如果操作成功时返回的却是-1,这种情况跟我们平时的思维方式有点差距所以应该好好

  • C#不同类型的成员变量(字段)的默认值介绍

    创建类的一个实例时,在执行构造函数之前,如果你没有给成员变量赋初始值,C#编译器缺省将每一个成员变量初始化为他的默认值. 如果变量是方法的局部变量,编译器就会认为在使用该变量之前,代码必须给它显示的设定一个值.否则会发生"使用了未赋值的局部变量"的错误. 对于其他情况,编译器会在创建变量时,把变量初始化为默认值.1.对于整型.浮点型.枚举类型(数值型),默认值为0或0.0.2.字符类型的默认值为\x0000.3.布尔类型的默认值为false.4.引用类型的默认值为null. 如果声时变

  • jquery对象和DOM对象的区别介绍

    第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别.互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的$("#save&quo

  • 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一)

    一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文档节点 其实还有很多种,但是那些都不是很常用,所以就来理解这其中4种就可以了,我们先来看看节点类型,比如如

  • 基于JavaScript操作DOM常用的API小结

    前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录 基本概念 节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结 文本整

随机推荐