html JS中如何获取某ID下的某个标签的某个属性值
比如我有：
<div id="d1" class="d1>
<a href="#" target="_blank" linkId="link_1"></a>
<a href="#" target="_blank" linkId="link_2"></a>
<a href="#" target="_blank" linkId="link_3"></a>
</div>
我现在想用JS控制户点击link_1、link_2、link_3分别发生3个不同的事件，事件的代码又比较长，我该怎么获取【id】为【d1】下【a】标签里的【linkId】的属性值？ 展开
使用JavaScript获取某个元素的属性值可以使用jQuery中的选择器+attr()方法。
工具原料：编辑器、浏览器
1、实现的思路是先使用选择器通过id获取到这个元素，然后使用attr方法获取某个属性的值，代码如下：
<div id="div1" class="test">
</div>
<script>
console.log($('#div1').attr('class'));
</script>
2、运行的结果是获取到了class的值test，如下图：
首先我要吐槽一下，你的div的class少了个引号...
然后可以两种方法实现，希望可以帮到你：
1. JS方法：
<script>
window.onload=function(){
var va = document.getElementById("d1").childNodes;
for(var i=0;i<va.length;i++){
if(va[i].nodeName.toLocaleUpperCase() == "A"){
alert("JS: "+va[i].attributes["linkId"].nodeValue);
}
}
};
</script>
2. Jquery方法：
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#d1 a").each(function(){
alert("Jquery: "+$(this).attr("linkId"));
});
});
</script>
我不是想遍历它，我是想把用户点击的哪个a标签里的linkId的值赋给一个参数，然后再判断这个参数的值来决定它的事件。
那就用Jquery吧，方便些：
<div id="d1" class="d1">
<a href="javascript:void(0);" target="_blank" linkId="link_1">111</a>
<a href="javascript:void(0);" target="_blank" linkId="link_2">222</a>
<a href="javascript:void(0);" target="_blank" linkId="link_3">333</a>
</div>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#d1 a").click(function(){
alert($(this).attr("linkId")); //这样就得到点击的链接的linkId参数了，然后你可以用这个值来做其它的事
});
});
</script>
不是很明白你具体想要什么，但是获取属性值可以用obj.getAttribute('属性名');
例如下面的：
<body>
<div id="d1" class="d1">
<a href="#" target="_blank" linkId="link_1"></a>
<a href="#" target="_blank" linkId="link_2"></a>
<a href="#" target="_blank" linkId="link_3"></a>
</div>
</body>
<script type="text/javascript">
function getLinkObj(linkId){
var oDiv = document.getElementById('d1');
var aLinks = oDiv.getElementsByTagName('a');
for(var i=0; i<aLinks.length; i++){
if(aLinks[i].getAttribute('linkId') == linkId){
return aLinks[i];
}
}
}
alert(getLinkObj('link_3').getAttribute('linkId'));
</script>
希望能够帮到你！
我不是想遍历它，我是想把用户点击的哪个a标签里的linkId的值赋给一个参数，然后再判断这个参数的值来决定它的事件。
如果用原生可以这样
<body>
<div id="d1" class="d1">
<a href="#" target="_blank" linkId="link_1" onclick="dosomething(this)"></a>
<a href="#" target="_blank" linkId="link_2" onclick="dosomething(this)"></a>
<a href="#" target="_blank" linkId="link_3" onclick="dosomething(this)"></a>
</div>
</body>
<script type="text/javascript">
function dosomething(obj){
var idName = obj.getAttribute('linkId');
if(idName!=null){
switch(idName){
case "link_1":
//dosomething
break;
case "link_2":
//dosomething
break;
//.....
}
}
}
alert(getLinkObj('link_3').getAttribute('linkId'));
</script>
不过你想快的话，可以用jquery，
1.JS方法：
<script>window.onload=function(){
var va = document.getElementById("d1").childNodes;
for(var i=0;i<va.length;i++){
if(va[i].nodeName.toLocaleUpperCase() == "A"){
alert("JS: "+va[i].attributes["linkId"].nodeValue);
}
}
};
</script>
2. Jquery方法：
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#d1 a").each(function(){
alert("Jquery: "+$(this).attr("linkId"));
});
});
</script>
【JS 获取HTML标签内的子节点的方法】
子节点的个数：
document.getElementById("id").childNodes.length
注意： 标签开/闭合算2个节点 第几个子几点：
document.getElementById("id").childNodes[n]
示例：
这里是 length-4 处，margin-left：20px
输出：length=8
实例：
<div id="page_kx" style="text-align: center;" class="tac"> <span class="fy2">1</span> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">下一页</a> <a href="#">末页</a> </div> <script> var gor=document.getElementById("page_kx"); var gorL=Number(gor.childNodes.length)-4; gor.childNodes[gorL].style.margin="0 0 0 20px"; </script>
$("#d1 a").eq(0).attr("linkId");//第一个a标签
$("#d1 a").eq(1).attr("linkId");//第二个a标签
$("#d1 a").eq(2).attr("linkId");//第三个a标签
