如何获取同一个div里，多个不同的子标签的值？

悬赏园豆：20 [已解决问题] 解决于 2016-09-10 17:13

如下面的代码，为父元素<div>设置了id值，它里面有不同的标签<strong>、<span>、<a>等子元素，我要怎么样才能够点击父元素<div>然后能够分别获取到每个子标签的值，并将其赋值到相应的input的文本框内容里。

<div href="#" id="l1" onclick="list(this.id)">
　　<strong >Karitika Anggrain</strong>
　　<span >6222123****1234 </span>
　　<a href="#"> Maybank</a >
</div>

我写的js代码如下，只能获取一个子标签<srong>的值，本想按照同样方法把其他的子标签值也赋给对应input，但发现好像因为id的问题无法实现重复用，所以就只能获取第一个子元素的值。

/* var mybank=document.getElementById(id).getElementsByTagName("span")[0].innerHTML;
　　document.getElementById("BName").value=mybank;*/
}
</script>

网各位大神帮帮忙，指导指导，非常谢谢！

前端 javascript

shoulder11 | 初学一级 | 园豆：181
提问于：2016-09-10 11:12

< >

最佳答案

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div href="#" onclick="list(this)">
        <strong>Karitika Anggrain</strong>
        <span>6222123****1234 </span>
        <a href="#"> Maybank</a>
    </div>

    <div href="#" onclick="list(this)">
        <strong>Karitika Anggrain</strong>
        <span>6222123****1234 </span>
        <a href="#"> Maybank</a>
    </div>
</body>
</html>
<script>
    function list(dom) {

        var strong = dom.getElementsByTagName("strong")[0].innerHTML;
        var span = dom.getElementsByTagName("span")[0].innerHTML;
        var a = dom.getElementsByTagName("a")[0].innerHTML;

        alert(strong);
        alert(span);
        alert(a);
    }
</script>

收获园豆：20

小小高 | 小虾三级 |园豆：1095 | 2016-09-10 13:30

firefox里面没问题。。不知道理解对了没有。。

小小高 | 园豆：1095 (小虾三级) | 2016-09-10 13:31

@小小高: 谢谢！理解是对的，

但是为什么我还没有弄成功呢T。T

请问其中的list(dom)，其中的dom是什么意思呢？

shoulder11 | 园豆：181 (初学一级) | 2016-09-10 15:28

@shoulder11: 当前dom对象呀，指的你点击的哪个div

小小高 | 园豆：1095 (小虾三级) | 2016-09-10 15:57

@小小高: 这方法我觉得挺好的，就不用设div的id值了。

我用的谷歌浏览器，但是出不来alert的弹出对话框T。T

shoulder11 | 园豆：181 (初学一级) | 2016-09-10 16:10

@shoulder11:

小小高 | 园豆：1095 (小虾三级) | 2016-09-10 16:13

@shoulder11: 你要点击div要。。我的chrome可以呀。。

小小高 | 园豆：1095 (小虾三级) | 2016-09-10 16:14

@shoulder11:

小小高 | 园豆：1095 (小虾三级) | 2016-09-10 16:14

@小小高:

小小高 | 园豆：1095 (小虾三级) | 2016-09-10 16:16

@小小高:

这种方法也成功了！非常感谢~

我又敲了一遍，之前可能因为书写的原因

谢谢指教！

shoulder11 | 园豆：181 (初学一级) | 2016-09-10 17:08

其他回答(4)

jquery？

顾晓北 | 园豆：10844 (专家六级) | 2016-09-10 11:30

JavaScript最好，不介意的话也可以同时教练jq如何实现，谢谢！

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 11:34

@shoulder11: jquery简单，至于js，自己搜吧，太麻烦

http://www.itxueyuan.org/view/6349.html

支持(0) 反对(0) 顾晓北 | 园豆：10844 (专家六级) | 2016-09-10 11:37

@顾晓北:那jq是怎么实现呢？

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 11:48

@shoulder11: jq就简单多了啊，http://www.w3school.com.cn/jquery/jquery_selectors.asp

其实你需要搜索“jquery选择器”

支持(0) 反对(0) 顾晓北 | 园豆：10844 (专家六级) | 2016-09-10 11:56

@顾晓北: 好的！谢谢提供学习网址~

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 16:07

我理解能力有点差，好像没怎么完全理解你的意思o.0(学习js也不久)，希望能帮到你

 1 <script type="text/javascript">
 2 function list(id){
 3 　　var oDiv=document.getElementById(id);
 4     var myname = oDiv.firstElementChild.innerHTML;
 5 　　document.getElementById("CName").value=myname;
 6     var myNumber = oDiv.firstElementChild.nextElementSibling.innerHTML;
 7     document.getElementById('BName').value = myNumber;
 8     var myBank = oDiv.lastElementChild.innerHTML;
 9     document.getElementById('CNo').value = myBank;
10 }
11 </script>

老板丶鱼丸粗面 | 园豆：202 (菜鸟二级) | 2016-09-10 13:19

谢谢！我一时刚学一点点基础，好多都不懂呢~

如果是这种方法的话，只能获取第一个、第二个与最后一个子标签，若是如果我有四个的话

　　<img src="..."/>
　　<strong >Karitika Anggrain</strong>
　　<span >6222123****1234 </span>
　　<a href="#"> Maybank</a >
</div>

第二个标签<strong>可以oDiv.firstElementChild.nextElementSibling.innerHTML;

第三个标签<span>那么又要怎么做呢？

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 14:55

@shoulder11: <span>可以oDiv.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;

或者oDiv.lastElementChild.previousElementSibling.innerHTML;

当然有多个子元素时，上述方法就不太合适可以考虑使用childNodes属性

第一个标签<img>：oDiv.childNodes[0] //IE

　　　　　　　　　　oDiv.childNodes[1] //其他浏览器会把元素之间的空白符也会算为子元素

第三个标签<span>:oDiv.childNodes[2] //IE

　　　　　　　　　　oDiv.childNodes[5] //其他浏览器

其他子元素可以以此类推；

支持(1) 反对(0) 老板丶鱼丸粗面 | 园豆：202 (菜鸟二级) | 2016-09-10 15:18

@shoulder11: 啊啊不好意思，刚刚造成那样的问题是因为我忘记加上.innerHTML了！

嘿嘿，谢谢指教！

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 16:38

@老板丶鱼丸粗面:

@shoulder11: 啊啊不好意思，刚刚造成那样的问题是因为我忘记加上.innerHTML了！

嘿嘿，谢谢指教！

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 16:38

@shoulder11: 今天学习DOM扩展-专有扩展时，发现其中的children属性可以解决不同浏览器在处理空白符是的差异，所以上述的方法可以写成：

第一个标签<img>：oDiv.children[0];

第三个标签<span>:oDiv.children[2];

支持(0) 反对(0) 老板丶鱼丸粗面 | 园豆：202 (菜鸟二级) | 2016-09-11 17:26

@老板丶鱼丸粗面: 这样，我再去试试，太谢谢了。

TwT不过不好意思，圆豆没有给成你TwT，因为有个方法更加简单并且不需要给div设置id值，我最后用了他的方法。

但还是十分感谢！你也让我学到了很多~

我也都记下来了嘿嘿。

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-11 17:34

document.getElementById('XXX').getElementsByTagName('span/strong')[0]

getElementXXX不止针对document哦

野兽' | 园豆：227 (菜鸟二级) | 2016-09-10 14:19

document.getElementById('XXX').getElementsByTagName('span/strong')[0]

这样的话它得出来的是两个值吧？那要怎么接收它呢？

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 14:38

@shoulder11: getElementsByTagName 有s 是复数取索引对应的就行了

支持(0) 反对(0) 野兽' | 园豆：227 (菜鸟二级) | 2016-09-10 21:39

其实你的js并没有什么问题，问题在于你的两个div的id都是相同的，那肯定只能一个能获取到了。

另外，你这样写太麻烦，用jquery非常简单

function list(id) {
var div = $("#" + id);
$("#CName").val(div.find("strong").text());
$("#BName").val(div.find("span").text());
$("#CNo").val(div.find("a").text());
}

balahoho | 园豆：2050 (老鸟四级) | 2016-09-10 15:04

因为主要也想通过学习一些js的内容，但同时也会学习jq的。

非常谢谢~

支持(0) 反对(0) shoulder11 | 园豆：181 (初学一级) | 2016-09-10 15:41

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

如何获取同一个div里， 多个不同的子标签的值？

欢迎，请先登录或者注册。

如何获取同一个div里，多个不同的子标签的值？