感谢原文作者:归一山人

原文链接: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. 第三十一个知识点:Game Hopping证明

    第三十一个知识点:Game Hopping证明 关于安全证明, 目前主流的方法有安全归约证明 (由 single game 实现) 和 Game Hopping (由 game sequence 实现 ...

  2. Estimation of Non-Normalized Statistical Models by Score Matching

    目录 概 主要内容 方法 损失函数的转换 一个例子 Hyv"{a}rinen A. Estimation of Non-Normalized Statistical Models by Sc ...

  3. jsp标签 c:when

    Illegal use of <when>-style tag without <choose> as its direct parent 在jsp页面用报错Illegal u ...

  4. Spring Boot 2 中如何使用 Log4j2 记录日志

    上一篇我们介绍了Spring Boot 2.x中默认日志框架Logback的使用.今天继续说说日志,接下来我们要讲是前段时间爆出核弹漏洞的Log4j2.虽然出了漏洞,让很多小伙伴痛苦了1-2周(加班) ...

  5. 使用 DML语句,对 “锦图网” 数据进行操作,聚合函数练习

    查看本章节 查看作业目录 需求说明: 根据客户 ID 统计订单数.订单总金额.最高订单金额.最低订单金额和每份订单平均金额,并按订单总金额升序显示 根据客户统计订单总订购人次数> 5 的统计信息 ...

  6. Java初学者作业——编写JAVA程序,在控制台中输入六位员工的姓名,通过随机点名方式,输出当选组长的员工姓名。

    返回本章节 返回作业目录 需求说明: 编写JAVA程序,在控制台中输入六位员工的姓名,通过随机点名方式,输出当选组长的员工姓名. 实现思路: (1)定义字符串类型的数组names,长度为6,用于存储六 ...

  7. Spring进一步学习

    目录 1.beans.xml编写 2.别名 (1)alias (2)name 3.依赖注入(DI) (1)数组注入 (2)List注入 (3)Map注入 (4)set注入 (5)Null注入 (6)p ...

  8. 字母 Letters

    D. 字母 Letters 内存限制:256 MiB 时间限制:500 ms 标准输入输出 题目类型:传统 评测方式:文本比较 题目描述 给定两个长度相同且由大写英文字母组成的字符串 A 和 B,保证 ...

  9. Chrome - XPath Helper插件 使用手工拖拽方式无法正常安装的解决办法

    安装前准备: (1)下载 XPath Helper资源: 链接: https://pan.baidu.com/s/1yEnngIJz8fT9fNv3aHhs7w 提取码: afy3 (2)Chrome ...

  10. test_4 实现一个统计函数运行时间

    1.datetime显示当前时间 import datetimeimport timedef func(): t = datetime.datetime.now() print t print &qu ...