HTMLDOM中三种元素节点、属性节点、文本节点的测试案例

news/2024/7/2 22:28:48

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>

 

 


http://lihuaxi.xjx100.cn/news/242659.html

相关文章

什么是Python线程?Python线程如何创建?

相信正在学习Python技术或者对Python语言有一定了解的人对于Python线程应该都不陌生&#xff0c;但是也有刚接触Python的小伙伴对于Python线程并不了解&#xff0c;今天小编就跟大家聊聊什么是Python线程&#xff0c;又该如何创建Python线程! 什么是Python线程?Python线程如何…

IF函数

格式&#xff1a;IF(Condition,A,B) 意义&#xff1a;当Condition为TRUE时&#xff0c;返回A&#xff1b;当Condition为FALSE时&#xff0c;返回B。 作用&#xff1a;作为条件语句使用。 例子&#xff1a; SELECT fullName, actualHour, planhour, annotatorId, …

mysql 安装 se_mysql的安装过程

(1)下载mysql。(2)解压文件到特定位置。我解压到&#xff1a;/home/jim/Software(3)创建Mysql组和用户。mysql中的一个用户名就是链接mysql服务器时指定的用户名&#xff0c;该名字不必与linux登陆名联系起来&#xff0c;但是必须是linux系统下建立的用户。命令为&#xff1a;g…

微信授权获取用户的openid和支付宝授权获取用户的userid

为什么80%的码农都做不了架构师&#xff1f;>>> 当一请求一个链接或者是扫描二维码时&#xff0c;会请求后台方法&#xff0c;当然对于微信和支付宝来说&#xff0c;大多数时候是扫 码 一、首先说微信&#xff1a; 1、首先会判断请求中是否有code和state参数&#…

怎样设计出优秀的测试用例?看看下面就知道了

想要成为一名合格的软件测试工程师&#xff0c;一份合格软件测试报告是非常重要的&#xff0c;软件测试的核心也就是测试的用例了&#xff0c;我们通过用例可以看出怎么设计出来可以发现问题&#xff0c;可以有效的覆盖需求的&#xff0c;没有冗余的用例是每个测试工程师必须跨…

scala学习手记34 - trait方法的延迟绑定

trait的方法的延迟绑定就是先混入的trait的方法会后调用。这一点从上一节的实例中也可以看出来。 下面再来看一个类似的例子&#xff1a; abstract class Writer {def write(message: String): String }trait UpperWriter extends Writer {abstract override def write(message…

linux系统服务介绍

linux系统服务介绍在windows系统中&#xff0c;我们可以打开任务管理器来打开或者关闭某些服务。在Linux系统下也同样有这样的需求&#xff0c;那么linux下怎么打开类似于windows下的“任务管理器”呢&#xff1f;linux系统下调整服务的启动和不启动有两种办法&#xff1a;1、n…

JavaScript面向对象修改标签页详解

双击标签页组件中的li小标签或者section 中的文本&#xff0c;可以对文本进行编辑。为了实现这个功能&#xff0c;需要先给li和section元素绑定双击事件&#xff0c;当双击文本后&#xff0c;将文本改成一个文本框&#xff0c;用来输入新的内容&#xff0c;在文本框中显示原来的…