感谢原文作者:归一山人

原文链接: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. pandas tutorial

    目录 Series 利用dict来创建series 利用标量创建series 取 Dataframe 利用dict创建dataframe 选择 添加列 列移除 行的选择, 添加, 移除 Panel B ...

  2. [opencv]GeneralProcessing_Template_Function

    // // Created by leoxae on 2019-05-08. // #ifndef OPENCVDEMO_UTILS_H #define OPENCVDEMO_UTILS_H #inc ...

  3. Java Web程序设计笔记 • 【第3章 JSP内置对象】

    全部章节   >>>> 本章目录 3.1 JSP 内置对象简介 3.1.1 JSP 内置对象概述 3.1.2 JSP 表单处理 3.1.2 request对象 3.1.2 开发 ...

  4. Java初学者作业——编写 Java 程序,让用户输入指定数字实现产生随机数。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,让用户输入指定数字实现产生随机数.运行效果如下: 实现思路: 定义两个变量start和end来保存起始和结束值. 通过结束值减起始值得到变化 ...

  5. 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数,内循环控制当前行要输出的乘法表达式,在页面上输出九九乘法表

    查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...

  6. Drools的Eclipse_IDEA插件安装

    1.说明 Drools使用时不是必须依赖插件的, 只是在安装了相应的插件之后, 在开发工具中能识别到对应的drools文件, 能够进行一些智能提示. 以及使用插件提供的便捷功能. 2.Eclipse插 ...

  7. haproxy常用配置

    haproxy 理论 它可以反向代理http/tcp协议,七层和四层的负载均衡解决方案 七层的负载解决方案是因为他们支持高级特性,工作在用户空间,请求从用户空间转换到内核空间是非常浪费硬件资源的. h ...

  8. JMeter_实现算法加密

    JMeter有两种方法可以实现算法加密 一.使用__digest自带函数      参数说明: Digest algorithm:算法摘要,可输入值:MD2.MD5.SHA-1.SHA-224.SHA ...

  9. linux tomcat【9.0.12】 使用 ssl证书 配置 https 的具体操作 【使用 域名 】

    1.前言 根据上一个随笔,已经可以正式在 阿里云服务器发布 工程了 ,但是用的协议默认是 http ,端口80 但是 http不安全 ,容易被拦截抓包 ,于是出来了个 https tomcat发布 对 ...

  10. Calendar日期往后一天,一月等

    import java.util.Date ;       Date date=new   Date();//取时间 System.out.println(date.toString());     ...