感谢原文作者:归一山人

原文链接: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获取子元素的更多相关文章

  1. 原生js获取子元素、给元素增加div

    //鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. 原生js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...

  4. jq js 获取子元素

    js this.children[1].className=""this.firstChild.className = ""this.lastChild.cla ...

  5. js获取子元素的内容

    <div class="aaa1"> <div class="">123</div> <span>2222< ...

  6. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  7. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  8. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  9. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

随机推荐

  1. Product Integration

    目录 生存模型 连续情形 离散情形 统一 Richard D. Gill, Product integration 一般的积分是指黎曼积分, 其计算是把区域无限细分求和并取极限, 有另外一种积分是把区 ...

  2. 小程序中使用、H5、uniapp下使用阿里巴巴iconfront图标或者新增图标

    第一步:登录iconfont的账号,创建项目. 第二步:选择自己需要的图标,并添加入库(就是那个购物车的图标). 第三步:将选好的图片添加到项目.(点击上图中右上角的购物车图标). 第四步:下载资源到 ...

  3. Linux组

    Linux组 介绍 Linux中,没有用户和文件可以脱离组而存在 用户有"组"这一属性:相关链接 文件有"所有者""组""其他组& ...

  4. 大二 mysql高级+html响应式+Java高级50道试题

    1.CSS3中过渡属性 transition-timing-function的值包括哪些 A. ease B. inline C. ease-in D. easeout 答案:A,C 解析:过渡属性 ...

  5. 微擎框架中 uid、acid、uniacid 之间的关系

    首先,在创建应用的时候,会在表 uni_account 中插入一条应用数据,其中 default_acid = 0 ,返回值为该表的主键,作为 $uniacid . 然后,会在表 account 中插 ...

  6. How to run a batch file each time the computer loads Windows

    https://www.computerhope.com/issues/ch000322.htm#:~:text=Press Start%2C type Run%2C and press Enter. ...

  7. Zabbix监控报警Lack of free swap space on Zabbix server解决办法

    故障描述: Lack of free swap space on Zabbix server 故障原因: 情况一:云主机:因为Zabbix监控没有考虑虚拟主机的swap分区情况. 情况二:物理主机:说 ...

  8. Go语言系列之标准库os

    os包提供了操作系统的系列函数,这些接口不依赖平台.设计为Unix风格的,错误处理是go风格的:调用失败会返回错误值而非错误码.通常错误值里包含更多信息. os包的接口在所有操作系统中都是一致的.非公 ...

  9. 深入了解mysql--gap locks,Next-Key Locks

    Next-Key Locks Next-Key Locks是在存储引擎innodb.事务级别在可重复读的情况下使用的数据库锁,官网上有介绍,Next-Key Locks是行锁和gap锁的组合.行锁是什 ...

  10. MySQL提权之mof提权

    mof提权原理 关于 mof 提权的原理其实很简单,就是利用了 c:/windows/system32/wbem/mof/ 目录下的 nullevt.mof 文件,每分钟都会在一个特定的时间去执行一次 ...