HTML DOM的nodeType值介绍


Posted in Javascript onMarch 31, 2011

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;
Javascript 相关文章推荐
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
如何更好的编写js async函数
May 13 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 #Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 #Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 #Javascript
使用jquery为table动态添加行的实现代码
Mar 30 #Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 #Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 #Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 #Javascript
You might like
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php生成WAP页面
2006/10/09 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
vue的过滤器filter实例详解
2018/09/17 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python中函数默认值使用注意点详解
2016/06/01 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python采集微信公众号文章
2018/12/20 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
python移位运算的实现
2019/07/15 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python过滤序列元素的方法
2020/07/31 Python
python实现KNN近邻算法
2020/12/30 Python
音乐表演专业毕业生求职信
2013/10/14 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL