打开APP
未登录
开通VIP,畅享免费电子书等14项超值服
开通VIP
首页
好书
留言交流
下载APP
联系客服
DOM - 元素节点属性
AnXuelin295
>《待分类》
2021.01.10
关注
元素节点属性
childNodes和firstChild和lastChild
1.childNodes //获取当前元素节点的所有的子节点
举个小例子:
运行结果返回了一个节点列表:
节点列表是
装有当前元素节点所有的子节点
我们可以看一下当前节点列表的长度:
运行结果为3:
这三个元素节点分别就是em、strong和文本内容
这时候就要
涉及到我们之前学的DOM节点的三种类型
元素节点 文本节点 属性节点
这三个节点又有三个非常重要的属性:
分别为:
nodeName
、
nodeType
和
nodeValue
对于
这三个属性不同节点类型转换出来的效果不一样
例如:document.getElementById(
‘box’).nodeType; //返回1就为元素节点
★★★
childNodes包括的节点有
元素节点
和
文本节点
两种
举个小例子:
运行结果对应上面表应该为节点名称em,1和null
同样我们再来看一下文本节点:
运行结果为#text、3和文本内容
2.firstChild和lastChild //找到当前元素节点的首位和末位
举个小例子:
运行结果为EM和strong
以上就是元素节点属性的方法
删除空白节点
我们还是拿上面的例子来看:
运行结果如下:
那么为什么我们
改变div的书写格式后,会显示出5个元素节点呢?
我们来分析一下这5个节点:
1.div到em的空白
2.em
3.文本内容
4.strong
5.strong到div的空白
我们去给它进行
回车、换行、tab键、空格等
,它里面的元素节点就会有变化
因为我们不需要这些空白节点,我们
如何将这些空白节点给去除呢?
在我们
去除空白节点之前,先要识别空白节点
通过正则表达式来识别空白节点,这里先给大家写一下这次用到的正则表达式,后面会详细讲到。
/^\s+$/.test()
使用这个正则来进行验证,如果
符合返回true,否则返回false
我们先来验证一下:
运行结果如下,空格时为true,有字符时为false:
我们这样就可以
封装一个函数来进行删除空白节点:
运行结果为:
我们来
返回一下文本类型nodeType未删除之前和删除之后分别有几个:
运行结果未删之前为3,删除之后为1如下:
从这里也可以看出,
多出来的两个元素节点的类型为文本
但是我们上面的正则表达式
/^s+$/.test()
它
原来数据上的子节点并没有发生变化,只是在调用函数时有效果,空白节点还依然存在。
对于这种情况我们就需要
firstChild
和
lastChild
这两个
因为这
两种方法必须从父节点上删除空白节点
,这时候就需要我们重新去封装函数
运行结果如下:
首先它的
数量变为了3,它的firstChild变为了EM
注意:
这里删除数组元素的时候必须要倒叙删除!正着删除会混乱。
-
写作不易,大家多多关注,谢谢啦
-
---web
分享,分享的不只是
web
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报
。
打开APP,阅读全文并永久保存
查看更多类似文章
猜你喜欢
类似文章
【热】
打开小程序,算一算2024你的财运
JavaScript获取节点类型、节点名称和节点值
Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除
javascript快速入门14
DOM节点信息、DOM属性、3大节点、替换节点、查找设置属性节点、创建删除插入节点、innerHTML属性、显示弹出窗口
HTMLDOM和XMLDOM
浅析DOM节点与增删改查
更多类似文章 >>
生活服务
热点新闻
留言交流
回顶部
联系我们
分享
收藏
点击这里,查看已保存的文章
导长图
关注
一键复制
下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!
联系客服
微信登录中...
请勿关闭此页面
先别划走!
送你5元优惠券,购买VIP限时立减!
5
元
优惠券
优惠券还有
10:00
过期
马上使用
×