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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
JS简单计算器实例
Jan 20 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
汉字转化为拼音(php版)
2006/10/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Python Socket编程入门教程
2014/07/11 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python中的错误处理
2016/04/10 Python
python字符串连接方法分析
2016/04/12 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python列表推导式入门学习解析
2019/12/02 Python
Python2与Python3的区别详解
2020/02/09 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
秸秆管理实施方案
2014/03/15 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2014年标准化工作总结
2014/12/17 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书