DOM判断节点类型分分钟搞定

小编和你一起解锁DOM判断节点类型的秘密 Let’s GO ! ! !

Node对象中的nodeName获取指定节点的节点名称
Node对象中的nodeType获取指定节点的节点类型
- nodeType 属性返回以数字值返回指定节点的节点类型
  - 如果节点是元素节点，则 nodeType 属性将返回 1
  - 如果节点是属性节点，则 nodeType 属性将返回 2
  - 如果节点是文本节点，则 nodeType 属性将返回 3
Node对象中的nodeValue获取指定节点的值
在DOM树结构中，文本节点是元素节点的子节点，所以要先获取元素节点才能获取文本节点。
实例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>判断节点类型</title>
</head><body><button id="btn" class="cls">按钮</button><script>// 1. 元素节点var btnElement = document.getElementById('btn');// 元素节点的nodeName属性值为标签名称（大写）console.log(btnElement.nodeName);  // BUTTONconsole.log(btnElement.nodeType);  // 1console.log(btnElement.nodeValue);  // null// 2. 文本节点var textNode = btnElement.firstChild;// 文本节点的nodeName属性值是固定值(#text)console.log(textNode.nodeName);   // #textconsole.log(textNode.nodeType);   // 3// 文本节点的nodeValue属性值是文本内容console.log(textNode.nodeValue);  // 按钮// 重新设置元素节点中的文本textNode.nodeValue = "新按钮";// 3. 属性节点var attrNode = btnElement.getAttributeNode('class');// 属性节点的nodeName属性值为当前元素的属性名称console.log(attrNode.nodeName);   // classconsole.log(attrNode.nodeType);   // 2// 属性节点的nodeValue属性值为当前元素的属性名称对应的值console.log(attrNode.nodeValue);  // cls</script>
</body></html>

DOM判断节点类型分分钟搞定相关推荐

DOM是什么（DOM的节点类型）
学到DOM时,看到关于文档(结构树).节点(node).和DOM提供的一些方法获取(找到)所需的节点.还有DOM属性,我很混乱,我无法弄清节点的关系层级属性和方法的关系,所以在使用DOM之前我要先了解 ...
endnote转化成纯文本后_如何用Endnote分分钟搞定参考文献
原标题:如何用Endnote分分钟搞定参考文献解螺旋公众号·陪伴你科研的第1924天 Endnote教程第二弹来啦! 写论文离不了对参考文献的引用,Endnote在文献撰写中发挥着重要作用.下面我们 ...
DOM Element节点类型详解
上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...
永中word页码怎么从第二页开始_pdf如何在线转word？这样做，分分钟搞定pdf转word...
原标题:pdf如何在线转word?这样做,分分钟搞定pdf转word 上了初中以后,我感觉到学习压力更大了,特别是写作文.记得小学时,我的作文还被老师当堂表扬过,现在最多只能拿到合格线分数.为了提高语 ...
C4D优质电商背景素材|分分钟搞定设计稿
优质的背景设计能很好的衬托出产品的气质.这类素材往往都是分层可编辑的格式,替换产品本身,加上文字设计,banner产品图分分钟搞定,广告设计稿也顿时高大上.这类素材要到专业提供网站,比如素材路上(ww ...
怎么扫描同网段mac地址linux,如何快速收集局域网内的IP+MAC信息？用这个扫描器分分钟搞定！！！...
原标题:如何快速收集局域网内的IP+MAC信息?用这个扫描器分分钟搞定!!! 网工圈中国圈内最早的公益公众号,本号已认证(关注近 5w+) 关注科来MAC地址扫描器安装 1.右键" ...
一段代码完成所有分享功能，分分钟搞定分享功能
一段代码完成所有分享功能,分分钟搞定分享功能效果如下: 代码: <div style="width:100%; height:30px;"> <div styl ...
【ps】米饭工作室教你分分钟搞定“小问题”照片
五一出游是不是拍了很多照片?如果你有ps又不懂高深的修图技术,那么多照片修起来是不是很吃力?但不是每张照片拍的都可以直接上传,有些只是有些暗,或者只是有点儿歪,画面边上有人乱入,却又很想上传分享给朋友 ...
计算机一级b证书图片p,只需两步，分分钟搞定证件照（内附福利）
原标题:只需两步,分分钟搞定证件照(内附福利) 简历中要不要放证件照? 当然要! 怎么样才能让证件照成为求职过程中的加分项? 不浮夸,不造作! 证件照怎么拍? 不要998,小V教你在家就能自制最美证件 ...

DOM判断节点类型分分钟搞定

小编和你一起解锁DOM判断节点类型的秘密 Let’s GO ! ! !

DOM判断节点类型分分钟搞定相关推荐

最新文章

热门文章