感谢原文作者:归一山人

原文链接: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. .NET 云原生架构师训练营(ASP .NET Core 整体概念推演)--学习笔记

    演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...

  2. 数据可视化 gojs 简单使用介绍

    目录 1. gojs 简介 2. gojs 应用场景 3. 为什么选用 gojs: 4. gojs 上手指南 5. 小技巧(非常实用哦) 6. 实践:实现节点分组关系可视化交互图 最后 本文是关于如何 ...

  3. Java基础寒假作业-简易计算器

    需求: 使用Java编写计算器的控制台程序,完成简单的加减乘除运算.实现以下功能: 1.运算选择 请用户选择一个算法(1.加法 2.减法 3.乘法 4.除法 5.关闭计算器) 2.计算 a)加法:实现 ...

  4. 使用.NET 6开发TodoList应用(17)——实现数据塑形

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在查询的场景中,还有一类需求不是很常见,就是在前端请求中指定返回的字段,所以关于搜索的最后一个主题我们就来演示一下关于数据塑形 ...

  5. Office - 0x4004F00C解决方法

    之前用HEU_KMS激活了180天的office 2013(专业版),今天打开突然报错0x4004F00C 大致意思就是提示你:office还有几天将要过期,到时候只能查看文档.表格.ppt,而不能编 ...

  6. 使用docker快速部署一个consul集群

    作为一个开发者,有时候需要一个集群环境,之前的做法要么就是使用多个虚拟机,要么就是采用不同的端口来模拟,但是虚拟机比较占内存,而且启动慢,采用不同的端口来模拟,管理起来比较麻烦一些,程序隔离性差一些. ...

  7. SpringBoot 之 Dao层模拟数据库操作

    单表操作: # src/main/java/com/wu/dao/DepartmentDao .java @Repository public class DepartmentDao { privat ...

  8. Linux-saltstack-2 saltstack的基本使用

    @ 目录 一.salt命令的基本使用 1.基本语法 例子: 2.salt的常用参数 (1)-S(大写):通过IP或者是网段匹配被管理主机 (2)-E:通过正则匹配主机 (3)-L: 匹配多个主机 (4 ...

  9. django rest framework 自定义验证器

    一.基于钩子函数: 官网上的例子: 官方提示:如果字段声明在序列化类上时,就具有参数required=Fasle的作用,当函数名中没有包括字段名时,那么这个验证函数就不起作用 二.基于类的验证器: 使 ...

  10. Selenium_获取元素文本、属性值、尺寸(8)

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...