感谢原文作者:归一山人

原文链接: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. 「Codeforces 724F」Uniformly Branched Trees

    题目大意 如果两棵树可以通过重标号后变为完全相同,那么它们就是同构的. 将中间节点定义为度数大于 \(1\) 的节点.计算由 \(n\) 个节点,其中所有的中间节点度数都为 \(d\) 的互不同构的树 ...

  2. [opencv]approxDP多边形逼近获取四边形轮廓信息

    #include "opencv2/opencv.hpp" #include <iostream> #include <math.h> #include & ...

  3. JavaWeb项目作业 Market商品管理系统

    目录 一.语言和环境 二.实现功能 三.数据库设计 四.实现代码 一.语言和环境 实现语言:Java语言. 环境要求:MyEclipse(Eclipse)+MySQL. 实现方式:JBDC.jsp/s ...

  4. Kerberos打开debug日志

    在JVM的启动参数中加入如下配置,打开kerberos的debug开关: -Dsun.security.krb5.debug=true JVM启动后,kerberos的相关日志会打印到控制台中, 因为 ...

  5. git报错 error: cannot stat 'file': Permission denied

    切换分支(git checkout xxx)时报错: error: cannot stat 'file': Permission denied 解决方法:退出编辑器.浏览器.资源管理器等,然后再切换就 ...

  6. Thrift框架-安装

    1.前言 今天接触了使用 PRC[远程过程调用协议]的Thrift 框架  ,留下随笔心得,这是安装篇 2.下载 去apache官网下载Thrift脚本编译程序,window则下载一个exe文件,然后 ...

  7. USB Tethering always displays grey when USB tethering type is Linux(EEM)

    USB Tethering always displays grey when USB tethering type is Linux(EEM) 1.Problem DESCRIPTION USB T ...

  8. C#winform控件序列化,反序列化

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  9. HttpRunner3的变量是如何传递的

    HttpRunner3的变量可以在测试类的用例配置中通过variables添加,也可以在测试步骤中使用extract().with_jmespath()提取出来放到变量x,再用$x传递给下一个接口使用 ...

  10. Java Selenide 介绍&使用

    目录 Selenide 介绍 官方快速入门 元素定位 元素操作 浏览器操作 断言 常用配置 Selenide 和 Webdriver 对比 Selenide 介绍 Selenide github Se ...