原生js获取子元素
感谢原文作者:归一山人
原文链接:https://www.cnblogs.com/guiyishanren/p/12214757.html
获取子元素的方法有
//获取第一个demo类
dom = document.getElementsByClassName('demo')[0];
//获取父节点
dom.parentNode;
//获取上一兄弟节点
dom.previousSibling;
dom.nextSibling;
//获取第一个子元素
dom.firstChild
//最后一个元素
dom.lastChild
//获取demo类下面的所有子元素
children = dom.childNodes;
//因为浏览器会把dom节点下的空格 换行 文本都会当成一个元素 ,我们要找元素节点的话,只能把他们剔除
for(var i;i<children.length;i++){
if(children[i].nodeName == '#text'){
children.remove(children[i]);
}
}//这样我们可以选择我们想要的第几个子元素了 比如第二个元素 children[1]
备注: 可以console.log 查看对象属性 解决办法
另外,在有些浏览器中会将空格也当作子元素,可以将空格删掉。
原生js获取子元素的更多相关文章
- 原生js获取子元素、给元素增加div
//鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- jq js 获取子元素
js this.children[1].className=""this.firstChild.className = ""this.lastChild.cla ...
- js获取子元素的内容
<div class="aaa1"> <div class="">123</div> <span>2222< ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 隐藏元素的宽高无法通过原生js获取的问题
1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...
随机推荐
- Springcloud-alibaba学习实践(2)- nacos&Eureka Server服务注册实践
前言:上一篇已搭建好了springcloud服务注册中心(Nacos&Eureka Server),本篇继续代码实践,注册服务到服务中心,本篇只是演示了两种注册中心,后续我们以Nacos注册中 ...
- Spring练习,使用注解的方式,完成模拟用户的正常登录。要求如下: 使用注解方式开发模拟用户的正常登录。
相关 知识 >>> 相关 练习 >>> 实现要求: 在该实践案例中,使用注解的方式,完成模拟用户的正常登录. 要求如下: 使用注解方式开发模拟用户的正常登录. 实现 ...
- javaScript系列 [43]-TS、Class and ES5
本文讨论Typescript中的Class同ES5构造函数的对应关系,涉及TypeScript的诸多语法.构造函数.面向对象以及原型对象等相关知识点细节,本文只简单对比并不进行深入展开. TypeSc ...
- 初识python: 继承实例 - 学校、老师、学生
对学校.老师.学生做一个分类,并抽象成类.并实现各自的一些功能.代码如下: 父类1:学校 # 学校 class School(object): def __init__(self,name,addr) ...
- Python_使用smtplib+email完成邮件发送
本文以第三方QQ邮箱服务器演示如何使用python的smtplib+email完成邮箱发送功能 一.设置开启SMTP服务并获取授权码 开启QQ邮箱SMTP服务 开启的最后一步是发送短信验证,获取 au ...
- oracle 之 EXP、IMP 使用简介
注:DOS命令行中执行exp.imp 导出导入ORACLE数据,ORACLE操作者具有相应的权限! 1.1.导出整库或当前用户:关键字:full语法:exp 用户/密码@数据库实例名 file=导出文 ...
- Zabbix监控报警Lack of free swap space on Zabbix server解决办法
故障描述: Lack of free swap space on Zabbix server 故障原因: 情况一:云主机:因为Zabbix监控没有考虑虚拟主机的swap分区情况. 情况二:物理主机:说 ...
- java基础06-变量、常量、作用域
java基础06-变量.常量.作用域 一.变量 变量是什么:就是可以变化的量! java是一种强类型语言,每个变量都必须声明其类型. java是一种强类型语言,每个变量都是必须声明其类型. java变 ...
- manjaro20WPS缺少字体
宋体等 sudo pacman -S ttf-wps-fonts Ariel和Times New Roman https://askubuntu.com/questions/651441/how-to ...
- 搭建服务器之DNS
DNS服务器,实用软件为bind,服务守护进程为named,一下记录一下自己的搭建过程: 1.yum install bind* 其中包括bind本身软件,测试dns的一些工具dig,nslooku ...