nodeName、nodeValue 以及 nodeType 包含有关于节点的信息
将HTML DOM中几个容易常用的属性做下记录:
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 |
HTML文件:
<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:
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;
转载于:https://www.cnblogs.com/fullhouse/archive/2012/02/20/2359189.html
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息相关推荐
- 不该被遗忘的nodeName、nodeValue和nodeType!
nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. (一)nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeN ...
- nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型
nodeName.nodeValue 以及 nodeType 包含有关于节点的信息. nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名称 属性节点的 nodeName ...
- JQuery nodeName、nodeValue 以及 nodeType
最近在读jquery源码,看到关于一些nodetype的判断,现将网上搜到的信息共享如下: 原文链接:http://blog.chinaunix.net/uid-22414998-id-2199425 ...
- jquery冲突的关键字nodeName、nodeValue和nodeType!
转自:https://blog.csdn.net/hdfyq/article/details/52805836 [缘由]在工作流数据库设计的时候, 都节点管理的功能. 结果有2个字段为 NODE ...
- nodeName、nodeValue和nodeType节点介绍
nodeName 元素节点的 nodeName 是标签名称(大写) 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 # ...
- DOM节点中nodeName、nodeValue 以及 nodeType属性值
今天在用childrenNodes进行操作dom时,碰到了问题,仔细查了一下相关API,记录一下: nodeName nodeName 属性含有某个节点的名称. 元素节点的 nodeName 是标签名 ...
- nodeName,nodeValue,nodeType,typeof,instanceof 的区别
nodeName 属性含有某个节点的名称. 更多免费教学文章请关注这里 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #te ...
- hasChildNodes()方法,nodeName、nodeValue、nodeType介绍
Document对象的使用:hasChildNodes()方法,nodeName.nodeValue.nodeType的简单介绍 一.hasChildNodes() 说明: (1) 该方法 ...
- Zk监听机制入门和节点属性信息
zk监听主要是监听:节点创建,节点删除,节点改变.子节点改变 我这里用node-1和node-3同时连接node-1 zk客户端监听功能一般步骤: 1.客户端设置监听事件 命令:get 节点 watc ...
- pandas使用datetime创建示例dataframe:包含完整的时分秒信息、创建时间索引、使用不同的时间频率、date_range中参数freq的偏移量别名
pandas使用datetime创建示例dataframe:包含完整的时分秒信息.创建时间索引.使用不同的时间频率.date_range中参数freq的偏移量别名 目录
最新文章
- C#配置Emgu CV
- IOS开发之GCD的基本知识
- Selenium简介以及selenium环境搭建
- 音频处理五:(音频的FFT计算)
- VC/MFC Combo Box控件的用法
- 如果误删谷歌浏览器的书签,怎么恢复
- key value vue 输出_Vue2.0 v-for 中 :key 到底有什么用?
- 苹果智能音箱HomePod跳票了,上市日期推迟到明年
- 自动化测试 (三) Web自动化测试原理
- python快速入门教程-Python 开发 14 天快速入门
- HTML调用QQ临时会话
- 安装SQL server需要重启计算机,解决安装sql server 需要重启问题
- 计算机提示运行错误,每次电脑一开机就会提示脚本运行错误
- Squoosh - 谷歌出品的免费开源图片压缩工具,图片大小减少90%!支持 API 开发调用
- Vue——构造内嵌登录二维码
- 正则验证加js大全,真的很给力!!!很全啊有木有
- matlab一元线性回归及多元线性回归方程
- 西门子plc与oracle报文,西门子PLC以太网 通讯协议 解析
- 玩转群晖NAS——实现IPV6访问并部署动态域名解析程序(Golang)
- 工程打包是什么意思_项目打包命令的意思