分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

JS 判断节点类型

发布时间:2023-09-06 02:11责任编辑:白小东关键词:暂无标签

节点类型的分类

节点类型说明
元素节点每一个HTML标签都是一个元素节点,如 <div> 、 <p>、<ul>等1
属性节点元素节点(HTML标签)的属性,如 id 、class 、name 等。2
文本节点元素节点或属性节点中的文本内容。3
注释节点表示文档注释,形式为<!-- comment text -->。8
文档节点表示整个文档(DOM 树的根节点,即 document )9

 

nodeType、nodeName、nodeVale判断节点类型,节点名称和节点值

<!--使用javascript判断节点类型--><div id="oneDiv">一段文本</div><!--注释文本--><script type="text/javascript"> ???var div = document.getElementById("oneDiv"); ???console.log(div.nodeType); //输出1,元素节点 ???var divText = div.firstChild; ???console.log(divText.nodeType) //输出3,文本节点 ???var divAttr = div.getAttributeNode("id"); ???console.log(divAttr.nodeType) //输出2,属性节点 ???var comment = div.nextSibling; ???console.log(comment.nodeType) //输出8,注释节点</script>
<!--使用javascript判断节点名称--><div id="oneDiv">一段文本</div><!--注释文本--><script type="text/javascript"> ???var div = document.getElementById("oneDiv"); ???console.log(div.nodeName); //输出DIV,元素节点为标签大写 ???var divText = div.firstChild; ???console.log(divText.nodeName) //输出#text,文本节点使用nodeName时永远为#text ???var divAttr = div.getAttributeNode("id"); ???console.log(divAttr.nodeName) //输出id,属性节点为属性名 ???var comment = div.nextSibling; ???console.log(comment.nodeName) //输出#comment,注释节点使用nodeName时永远为#comment</script>
<!--使用javascript判断节点值--><div id="oneDiv">一段文本</div><!--注释文本--><script type="text/javascript"> ???var div = document.getElementById("oneDiv"); ???console.log(div.nodeValue); //输出null,元素节点对于nodeValue不支持 ???var divText = div.firstChild; ???console.log(divText.nodeValue) //输出一段文本,文本节点输出文本值 ???var divAttr = div.getAttributeNode("id"); ???console.log(divAttr.nodeValue) //输出oneDiv,属性节点输出属性值 ???var comment = div.nextSibling; ???console.log(comment.nodeValue) //输出注释文本,注释节点输出注释内容</script>

JS 判断节点类型

原文地址:https://www.cnblogs.com/YAN-HUA/p/9517242.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved