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 相关文章推荐
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
js获取ip和地区
Mar 10 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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 Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
高中军训第一天感言
2014/03/06 职场文书
现场施工员岗位职责
2014/03/10 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
教师听课评语大全
2014/12/31 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
团员自我评价范文
2015/03/10 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
redis 查看所有的key方式
2021/05/07 Redis
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL