原生js获取子元素
感谢原文作者:归一山人
原文链接: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获取子元素的更多相关文章
- 原生js获取子元素、给元素增加div
//鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- jq js 获取子元素
js this.children[1].className=""this.firstChild.className = ""this.lastChild.cla ...
- js获取子元素的内容
<div class="aaa1"> <div class="">123</div> <span>2222< ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 隐藏元素的宽高无法通过原生js获取的问题
1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...
随机推荐
- 「Codeforces 724F」Uniformly Branched Trees
题目大意 如果两棵树可以通过重标号后变为完全相同,那么它们就是同构的. 将中间节点定义为度数大于 \(1\) 的节点.计算由 \(n\) 个节点,其中所有的中间节点度数都为 \(d\) 的互不同构的树 ...
- [opencv]approxDP多边形逼近获取四边形轮廓信息
#include "opencv2/opencv.hpp" #include <iostream> #include <math.h> #include & ...
- JavaWeb项目作业 Market商品管理系统
目录 一.语言和环境 二.实现功能 三.数据库设计 四.实现代码 一.语言和环境 实现语言:Java语言. 环境要求:MyEclipse(Eclipse)+MySQL. 实现方式:JBDC.jsp/s ...
- Kerberos打开debug日志
在JVM的启动参数中加入如下配置,打开kerberos的debug开关: -Dsun.security.krb5.debug=true JVM启动后,kerberos的相关日志会打印到控制台中, 因为 ...
- git报错 error: cannot stat 'file': Permission denied
切换分支(git checkout xxx)时报错: error: cannot stat 'file': Permission denied 解决方法:退出编辑器.浏览器.资源管理器等,然后再切换就 ...
- Thrift框架-安装
1.前言 今天接触了使用 PRC[远程过程调用协议]的Thrift 框架 ,留下随笔心得,这是安装篇 2.下载 去apache官网下载Thrift脚本编译程序,window则下载一个exe文件,然后 ...
- 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 ...
- C#winform控件序列化,反序列化
using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...
- HttpRunner3的变量是如何传递的
HttpRunner3的变量可以在测试类的用例配置中通过variables添加,也可以在测试步骤中使用extract().with_jmespath()提取出来放到变量x,再用$x传递给下一个接口使用 ...
- Java Selenide 介绍&使用
目录 Selenide 介绍 官方快速入门 元素定位 元素操作 浏览器操作 断言 常用配置 Selenide 和 Webdriver 对比 Selenide 介绍 Selenide github Se ...