//使用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. Web项目中得到访问者的真实ip

    Web项目中得到访问者的真实ip 描述:最近要实现个功能是要记录管理员登录的真实ip,但在项目中如果直接使用request.getRemoteAddr()获得ip的话,获得的可能不是真实ip,是因为使 ...

  2. 常用命令npm,gulp, node

    npm常用命令: 检查npm模块的安装情况:(以常用模块 grunt为例说明) 1) 检查是否全局安装了模块Grunt: $npm list -g grunt 2) 列出所有已经全局安装的模块:$np ...

  3. 1. jdk内存配置

    -Xms256m -Xmx512m -XX:PermSize=256m -XX:MaxPermSize=512m

  4. jQuery.ajax()调用asp.net后台方法(非常重要)

    http://www.cnblogs.com/zxhoo/archive/2011/01/30/1947752.html 用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先 ...

  5. maven pom文件

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  6. leetcode19

    class Solution { public: ; ; ListNode* removeNthFromEnd(ListNode* head, int n) { ; ListNode* node = ...

  7. 为datagrid、treegrid增加右键表头菜单,用于显示或隐藏列,注意:冻结列不在此菜单中

    var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* gri ...

  8. 可以作为瘟到死(windows)路径的字符

    !#$%&""()+-0123456789;=@ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz[]^_`{}~

  9. php中使用com组件出现"拒绝访问"的处理

    php中使用com组件出现"拒绝访问"的处理 2010年05月14日 12:28:00 阅读数:1529 代码如下, // 建立一个指向新COM组件的索引 $word = new ...

  10. Halcon示例:bottlet.hdev 光学字符识别(创建OCR)

    * * Training of the OCR* The font is used in "bottle.hdev"* * * Step 0: PreparationsFontNa ...