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实现分割提取页面所需内容
May 09 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 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生成HTML静态页面实例代码
2008/08/31 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
取得父标签
2006/11/14 Javascript
function, new function, new Function之间的区别
2007/03/08 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
Angular排序实例详解
2017/06/28 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
深入浅析vue组件间事件传递
2017/12/29 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
教育技术学专业职业规划书
2014/03/03 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
元宵节寄语大全
2015/02/27 职场文书
入党转正申请书范文
2019/05/20 职场文书