HTMLDOM中三种元素节点、属性节点、文本节点的测试案例
HTML dom中常用的三种节点分别是元素节点、属性节点、文本节点。
具体指的内容可参考下图:
以下为测试用例:
<!DOCTYPE html>
<html>
<head>
<title>元素节点、属性节点、文本节点的测试</title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content=""> <script type="text/javascript"> window.onload = function(){ var btnNode = document.getElementsByTagName("button");
var fruitNode = document.getElementById("fruit"); //元素节点 ul 为元素节点
var ulNode = document.getElementsByTagName("ul"); //属性节点 name="水果" 为属性节点
var attrNode = document.getElementById("fruit").getAttributeNode("name");
var attr2Node = document.getElementById("fruit").getAttributeNode("width"); //文本节点 点我
var textNode = document.getElementById("btn1").firstChild; //注意这里获取文本节点的方式 btnNode[0].onclick = function(){
alert(fruitNode.getElementsByTagName("li").length); //以下右边注释为运行的结果
//获取元素节点的三要素:nodeType,nodeName,nodeValue
alert(ulNode[0].nodeType); //1
alert(ulNode[0].nodeName); //UL
alert(ulNode[0].nodeValue); //null //获取属性节点的三要素:nodeType,nodeName,nodeValue
alert(attrNode.nodeType); //2
alert(attrNode.nodeName); //name
alert(attrNode.nodeValue); //水果 alert(attr2Node.nodeType); //2
alert(attr2Node.nodeName); //width
alert(attr2Node.nodeValue); //80px; //获取文本节点的三要素:nodeType,nodeName,nodeValue
alert(textNode.nodeType); //3
alert(textNode.nodeName); //#TEXT
alert(textNode.nodeValue); //点我 }
} </script>
</head> <body> 节点分三类:
1: 元素节点
2:属性节点
3:文本节点
<ul id="fruit" name="水果" width="80px;"> <li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>葡萄</li> </ul>
<button id="btn1">点我</button> </body>
</html>
HTMLDOM中三种元素节点、属性节点、文本节点的测试案例的更多相关文章
- 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
- Spring中三种配置Bean的方式
Spring中三种配置Bean的方式分别是: 基于XML的配置方式 基于注解的配置方式 基于Java类的配置方式 一.基于XML的配置 这个很简单,所以如何使用就略掉. 二.基于注解的配置 Sprin ...
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
- C#中三种定时器对象的比较
·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.Windows.Forms里2.定义在System.Threading.Timer类里3.定义在System.Timers ...
- 转-Web Service中三种发送接受协议SOAP、http get、http post
原文链接:web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 一.web服务中三种发送接受协议SOAP/HTTP GET/HTTP POST 在web服务中,有三种可供选择的发 ...
- C#中三种定时器对象的比较 【转】
https://www.cnblogs.com/zxtceq/p/5667281.html C#中三种定时器对象的比较 ·关于C#中timer类 在C#里关于定时器类就有3个1.定义在System.W ...
- 详解Oracle数据货场中三种优化:分区、维度和物化视图
转 xiewmang 新浪博客 本文主要介绍了Oracle数据货场中的三种优化:对分区的优化.维度优化和物化视图的优化,并给出了详细的优化代码,希望对您有所帮助. 我们在做数据库的项目时,对数据货场的 ...
- xhtml三种元素类型
xhtml三种元素类型:块级元素/内联元素/可变元素 块级元素:独占一行.可自定义自己的宽度和高度.作为其他元素的容器,可容纳其他内联元素和块级元素,喻做一个盒子.内联元素:始终以行内逐个显示.不能设 ...
- contents() 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
contents() V1.2概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述:大理石平台检定规程 查找所有文本节点并加粗 HTML 代码 ...
随机推荐
- 【Alpha阶段】第二次Scrum例会
燃尽图软件存在bug,正在排查修复:(已修复)由于时区设置到了美国,图表显示有问题. 会议信息 时间:2016.10.18 22:00 时长:1h 地点:大运村1号公寓5楼楼道 类型:设计阶段阶段性会 ...
- HTML5系列三(多媒体播放、本地存储、本地数据库、离线应用)
各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...
- 什么是jsonp
Jsonp其实就是一个跨域解决方案. Js跨域请求数据是不可以的,但是js跨域请求js脚本是可以的. 所以可以把要请求的数据封装成一个js语句,做一个方法的调用. 跨域请求js脚本可以得到此脚本.得到 ...
- 利用WireShark进行DNS协议分析
一.准备工作 系统是Windows 8.1Pro 分析工具是WireShark1.10.8 Stable Version 使用系统Ping命令发送ICMP报文. 二.开始工作 打开CMD.exe键入: ...
- Oralce配置正确,报监听错误或无法识别描述中的服务
出差客户现场,修改过网络配置,回来后本地虚拟机的Oracle数据库就不能登陆了 报监听错误,在服务器中使用Net Configration Assistant删除以前的,重新配置新的,还是不行,重启系 ...
- Linux下开发常用 模拟 Http get和post请求
1.get请求 curl "http://www.baidu.com" 如果这里的URL指向的是一个文件或者一幅图都可以直接下载到本地 curl -i "htt ...
- 英文论文中i.e.,e.g.,etc.,viz.的简要小结
英文论文中i.e.,e.g.,etc.,viz.的简要小结 看了一堆用法,全白扯,自己总结的最好记,最实用 i.e. =即.换句话说.也就是说."'In essence' or 'in ot ...
- css 常用代码解析
.cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linea ...
- -[UIWindow viewForFirstBaselineLayout]: unrecognized selector sent to instance
#ifdef DEBUG #import <UIKit/UIKit.h> #import <objc/runtime.h> @implementation UIView (Fi ...
- border设置不占用宽度
经常我们设置好了DIV或其他标签的宽度,但是一加边框,宽度就又增加了,尤其是用百分比的时候,宽度控制不好真是麻烦! 如下有一解决办法,代码如下,(新属性,兼容性不好,手机端.谷歌.火狐测试可以) -w ...