//使用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获取元素的子元素的更多相关文章

  1. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  2. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  3. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  4. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  5. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  6. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  8. 在Js中得到元素的子元素集合注意事项

    http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...

  9. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

随机推荐

  1. 【Python】启动迅雷下载

    import subprocess import base64 thunder_path = 'E:\Thunder\Program\Thunder.exe' def Url2Thunder(url) ...

  2. react portals

    来源:https://segmentfault.com/a/1190000011668286 Portals是react 16.3 提供的官方解决方案,使得组件可以脱离父组件层级挂载在DOM树的任何位 ...

  3. Apache配置默认主页

    Apache配置默认主页 进入Apache的conf目录 打开httpd.conf文件输入: 在文件末位添加: <Directory "F:/www_php/blog_com/my_b ...

  4. python入门学习1

    实学习每一种语言,都可以找到很快乐的学习方法.有兴趣,有乐趣,才会一直想学.知道print().input().if/else就可以做一个简陋的游戏了. print() # 打印函数,将信息打印出来 ...

  5. Nginx 工作原理

    Nginx 工作原理 Nginx由内核和模块组成. Nginx本身做的工作实际很少,当它接到一个HTTP请求时,它仅仅是通过查找配置文件将此次请求映射到一个location block,而此locat ...

  6. ntp时间同步参考

    https://blog.csdn.net/kamereon/article/details/54344114

  7. Match-----Gray-value-----基于灰度值的模板匹配

    rot 带旋转 mg 带金字塔 rad 角度转弧度 deg 弧度转角度 基于灰度受光照影响比较显著,实际项目中用的不多. MaxOverlap:0~1  指遮挡的部分比例  例如0.6,意思是遮挡了0 ...

  8. linux百万并发之 tcp_mem

    百万并发之 tcp_mem   在服务端,连接达到一定数量,诸如50W时,有些隐藏很深的问题,就不断的抛出来. 通过查看dmesg命令查看,发现大量TCP: too many of orphaned ...

  9. H5学习的例子

    https://github.com/NalvyBoo/HTML5   https://github.com/yujinjin/fans   github看到这里 https://github.com ...

  10. weld

    weld - 必应词典 美[weld]英[weld] v.焊接:熔接:锻接:使紧密结合 n.焊接点:焊接处 网络焊缝