原生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%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...
随机推荐
- .NET 云原生架构师训练营(ASP .NET Core 整体概念推演)--学习笔记
演化与完善整体概念 ASP .NET Core 整体概念推演 整体概念推演到具体的形式 ASP .NET Core 整体概念推演 ASP .NET Core 其实就是通过 web framework ...
- 数据可视化 gojs 简单使用介绍
目录 1. gojs 简介 2. gojs 应用场景 3. 为什么选用 gojs: 4. gojs 上手指南 5. 小技巧(非常实用哦) 6. 实践:实现节点分组关系可视化交互图 最后 本文是关于如何 ...
- Java基础寒假作业-简易计算器
需求: 使用Java编写计算器的控制台程序,完成简单的加减乘除运算.实现以下功能: 1.运算选择 请用户选择一个算法(1.加法 2.减法 3.乘法 4.除法 5.关闭计算器) 2.计算 a)加法:实现 ...
- 使用.NET 6开发TodoList应用(17)——实现数据塑形
系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 在查询的场景中,还有一类需求不是很常见,就是在前端请求中指定返回的字段,所以关于搜索的最后一个主题我们就来演示一下关于数据塑形 ...
- Office - 0x4004F00C解决方法
之前用HEU_KMS激活了180天的office 2013(专业版),今天打开突然报错0x4004F00C 大致意思就是提示你:office还有几天将要过期,到时候只能查看文档.表格.ppt,而不能编 ...
- 使用docker快速部署一个consul集群
作为一个开发者,有时候需要一个集群环境,之前的做法要么就是使用多个虚拟机,要么就是采用不同的端口来模拟,但是虚拟机比较占内存,而且启动慢,采用不同的端口来模拟,管理起来比较麻烦一些,程序隔离性差一些. ...
- SpringBoot 之 Dao层模拟数据库操作
单表操作: # src/main/java/com/wu/dao/DepartmentDao .java @Repository public class DepartmentDao { privat ...
- Linux-saltstack-2 saltstack的基本使用
@ 目录 一.salt命令的基本使用 1.基本语法 例子: 2.salt的常用参数 (1)-S(大写):通过IP或者是网段匹配被管理主机 (2)-E:通过正则匹配主机 (3)-L: 匹配多个主机 (4 ...
- django rest framework 自定义验证器
一.基于钩子函数: 官网上的例子: 官方提示:如果字段声明在序列化类上时,就具有参数required=Fasle的作用,当函数名中没有包括字段名时,那么这个验证函数就不起作用 二.基于类的验证器: 使 ...
- Selenium_获取元素文本、属性值、尺寸(8)
from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...