总结：如何获取同一个DIV里的多个不同子标签的值，并赋值给input？

这个问题说起来简单，但对于新手来说，也着实卡了好久，并且我在网上搜了好久没能找到合适的答案，

于是去博问问了一下，得到许多大神们的帮助与回答，接下来我就总结一下能够实现这个效果的几种方法，既为了自己更加能够更加深刻的记住也为了万一能够给其他人提供到帮助，哪也不错。

1.要实现的效果：

　　要实现效果是：点击右边的最近联系人列表，能够同时获取联系人的名字、银行卡号、银行名称的值，并将其值赋给对应的input文本框。

　　

2.问题的分析：

　　首先来简单分析一下html代码的结构（css就不多提了）

• 最近每一个联系人列表的div：

　　<div  id="P1"  onclick="list(this.id)">　　　　　　 //点击调用list（）函数并把点击的div相应的id值传入

　　　　<img src="..."/>

　　　　<strong>shoulder</strong>         　　　　    //联系人名字

　　　　<span>6217000****0000</span>  　　　　  //银行卡号

　　　　<a>Maybank</a>　　　　　　　　　　　　　　//银行名称

　　</div>

• input文本框的代码结构：

　　<form>

　　　　<input  type="text"  id="CName"  />

　　　　<input  type="text"  id="BName"/>

　　　　<input  type="text"  id="CNo" />

　　</form>

　　接着分析实现效果的过程：

　　　　1.点击div

　　　　2.获取对应div的id

　　　　3.根据id找到对应div里的子标签<strong>、<span>、<a>

　　　　4.获取子标签的值

　　　　5.根据id找到对应的input

　　　　6.将标签里的值赋给对应的input

　　

3.解决方法汇总：

　　解决的方法是有很多的，但因为我想学习一下javascript于是就侧重于Javascript的解决办法，当然jquery也是不错的选择

　　方法一：

　　<script type="text/javascript">

　　　　var oDiv=document.getElementById("id");

　　　　var mynam=oDiv.firstElementChild.nextElementSibling.innerHTML;

　　　　ducument.getElementById("CName").value=myname;

　　　　var mybank=oDiv.firstElementChild.nextElementSibling.nextElementSibling.innerHTML;

　　　　document.getElementById("BName").value=mybank;

　　　　var mynumber=oDiv.lastElementChild.innerHTML;

　　　　document.getElementById("CNo").value=mynumber;

　　</script>

　　这种方法就比较繁琐，对于div里有三个以上的子标签时不建议使用，这时候（像本例有四个子标签）可以用到childnodes比较好解决。

这个时候我们得到这种解决方法：

　　方法二：

　　var oDiv=document.getElementById(id);

　　myname=oDiv.childNodes[3].innerHTML;

　　mybank=oDiv.childNodes[5].innerHTML;

　　mynumber=oDiv.childNodes[7].innerHTML;

　　document.getElementById("CName").value=myname;

　　document.getElementById("BName").value=mybank;

　　document.getElementById("CNo").value=mynumber;

　　方法二也有缺点的地方，当使用IE浏览器时我们的对应的childNodes为：childNodes[1]、childNodes[2]、childNodes[3]；但在其他浏览器上时，浏览器会把元素与元素之间的前后空白符也当作一个子标签，因此当我们获取第二个标签<strong>时为childNodes[3]，以此类推。

　　这样看的话childNodes也不是很好用，还有没有别的类似的办法呢？ 其实有一个children属性是可以解决浏览器针对这点的差别的，这时候若要获取第一个标签则是children[0]、第二个为children[1]这种正常顺序就可以了。

　　方法三：

　　这是我觉得对我来说最理想的方法，因为用这种方法可以不需要去定义列表联系人的每一个div的id值，很适合我这种现在暂时还不懂怎么动态为元素赋id值或者循环之类巴拉巴拉的（当然以后会学补回来！）。　

　  <div  onclick="list(this)" >联系人的Div</div>

　　function list(dom){

　　var name = dom.getElementsByTagName("strong")[0].innerHTML;
　　document.getElementById("CName").value=name;

　　var num = dom.getElementsByTagName("span")[0].innerHTML;
　　document.getElementById("CNo").value=num;

　　var bank = dom.getElementsByTagName("a")[0].innerHTML;
　　document.getElementById("BName").value=bank;

　　}