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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
Vue实现图片轮播组件思路及实例解析
May 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
网站用php实现paypal整合方法
2010/11/28 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
Python+PIL实现支付宝AR红包
2018/02/09 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
如何做好总经理助理
2013/11/12 职场文书
珍惜水资源建议书
2014/03/12 职场文书
我的祖国演讲稿
2014/05/04 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫