html JS中如何获取某ID下的某个标签的某个属性值

如题。比如我有:<divid="d1"class="d1><ahref="#"target="_blank"linkId="link_1"></a><ahref="#"t... 如题。
比如我有:
<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】的属性值?
展开
 我来答
码农小明哥
2017-05-21 · 互联网程序员一枚,欢迎交流
码农小明哥
采纳数:9602 获赞数:25061

向TA提问 私信TA
展开全部

使用JavaScript获取某个元素的属性值可以使用jQuery中的选择器+attr()方法。

工具原料:编辑器、浏览器

1、实现的思路是先使用选择器通过id获取到这个元素,然后使用attr方法获取某个属性的值,代码如下:

<div id="div1" class="test">

</div>
<script>
console.log($('#div1').attr('class'));
</script>

2、运行的结果是获取到了class的值test,如下图:

澤希Dc
2014-03-26 · TA获得超过1747个赞
知道小有建树答主
回答量:509
采纳率:0%
帮助的人:245万
展开全部

首先我要吐槽一下,你的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>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友2acf15a
2014-03-26 · TA获得超过1534个赞
知道小有建树答主
回答量:1123
采纳率:81%
帮助的人:260万
展开全部

不是很明白你具体想要什么,但是获取属性值可以用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,

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
海菜家的北北
2018-03-31 · TA获得超过2225个赞
知道小有建树答主
回答量:14
采纳率:25%
帮助的人:1983
展开全部

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>    

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
maogg241
2014-03-26 · 超过27用户采纳过TA的回答
知道答主
回答量:67
采纳率:0%
帮助的人:38.5万
展开全部
用jqeury:
$("#d1 a").eq(0).attr("linkId");//第一个a标签
$("#d1 a").eq(1).attr("linkId");//第二个a标签
$("#d1 a").eq(2).attr("linkId");//第三个a标签
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(4)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式