原生js获取元素的子元素
//使用firstChild
//但是下面这种因为有空格,也算其子元素
<lable>
<span id="onlinePerson" name="person" onclick="changeImg(this)" >
<img id="imgPerson" src="data:images/invote-checked.png">个人
</span>
</lable> //所以要改成这样,去掉空格
<lable>
<span id="onlinePerson" name="person" onclick="changeImg(this)" ><img id="imgPerson" src="data:images/invote-checked.png">个人</span>
</lable>
以上为html, js部分如下,这个是点击切换图片的例子
var isClick = false;
function changeImg(obj) {
invoteOnline.getElementsByTagName("img")[0].src = "images/invote-nochecked.png"
if(isClick){
imgPerson.src = "images/invote-checked.png";
imgCompany.src = "images/invote-nochecked.png";
isClick = false
}else {
imgPerson.src = "images/invote-nochecked.png";
imgCompany.src = "images/invote-checked.png";
isClick = true;
}
console.log(obj.firstChild); //查找元素的子元素,注意空格
console.log(obj.getAttribute("name"));//获取name
return false;
}
效果如下

原生js获取元素的子元素的更多相关文章
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- 在Js中得到元素的子元素集合注意事项
http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
随机推荐
- 刘志梅201771010115.《面向对象程序设计(java)》第三周学习总结
实验三 Java基本程序设计(2) 实验时间 2018-9-13 1.实验目的与要求 (1)进一步掌握Eclipse集成开发环境下java程序开发基本步骤: (2)熟悉PTA平台线上测试环境: (3) ...
- 谷歌浏览器内核Cef js代码整理(二) 滚动条
1.隐藏滚动条 document.documentElement.style.overflow = 'hidden';隐藏竖向滚动条:document.documentElement.style.ov ...
- PHP常用的转义函数
1. addslashes addslashes对SQL语句中的特殊字符进行转义操作,包括(‘), (“), (), (NUL)四个字符,此函数在DBMS没有自己的转义函数时候使用,但是如果DBMS有 ...
- 关于PS的操作
1.移动工具 Ctrl+J:拷贝图层 Ctrl+T:自由变换调整大小 Alt+Shift:全选 Ctrl+G:图层编组 Alt+Delete:选中图层填充当前颜色 Ctrl+Alt+Z:后退一步 2. ...
- maven的单元测试中没有
原因:BaseTest没有找到单元测试造成的 增加一个空的单元测试 @Testpublic void testNothing(){} 异常现象:在maven项目执行mvn install 或mvn t ...
- win2012R2打Windows8.1-KB2919355 问题
解决方法 https://blog.csdn.net/qwq1503/article/details/65916426
- Rocket MQ 1 - 用
参考 http://www.iocoder.cn/categories/RocketMQ/ ; https://www.jianshu.com/nb/16219849 首先上启动方法,分别启动name ...
- mvc:view-controller标签使用
mvc:view-controller可以在不需要Controller处理request的情况,转向到设置的View,完成无Controller的path和view的直接映射. 1.重定向 <m ...
- java.util.logging jdk日志详解
jdk自带的日志,结构并不复杂,功能也能满足绝大部分功能.日志写入位置是开放的,只要继承了handler都可以接收日志的写入.handler本身依赖于LogRecord对象,该对象代表一个日志.Han ...
- 使用jQuery+huandlebars遍历if判断不足引用helper
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...