从多个span标签获取标题值

getting title value from multiple span tag

本文关键字：获取 标题 标签 span      更新时间：2023-09-26

我有多个li标签与标签，因为跨度是在li标签他们有相同的id名称。我希望能够在选择特定的li标记时获得span标记内的值。这是我的HTML代码

<li>
    <form action="" method="post" name="topdivform">
        <span id="editedpart" title="first div"><a href="#" title="edit" id="edit" onclick="showeditpage()">first div</a></span>
    </form>
</li>
<li>
    <form action="" method="post" name="topdivform">
        <span id="editedpart" title="second div"><a href="#" title="edit" id="edit" onclick="showeditpage()">second div</a></span>
    </form>
</li>
<li>
    <form action="" method="post" name="topdivform">
        <span id="editedpart" title="third div"><a href="#" title="edit" id="edit" onclick="showeditpage()">third div</a></span>
    </form>
</li>
这是我的javascript 
var elem = document.getElementById("editedpart");
var str ="";
for(var i = 0; i< elem.length; ++i){
    str = elem[i].innerText;
    alert(str);
}

它没有在span标签内获取文本由于

由于您为多个元素提供了相同的id，因此无法预测调用GetElementById将返回哪个元素。您需要重新构建标记，以避免为多个元素提供相同的id。

var elem = document.getElementsByName("topdivform");
var str ="";
for(var i = 0; i< elem.length; ++i){
    str = elem[i].textContent || elem[i].innerText;
    alert(str);
}

如果你需要更具体的DOM选择，你可以使用querySelectorAll()，尽管它在IE6/7中不支持。

var elem = document.querySelectorAll("li > form[name=topdivform] > span > a[title=edit]");

您可以向li的单击事件添加一个事件监听器(https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener)，并将子span节点的全局变量设置为您的选择值。您可以使用类名(<span class="isSelected"></span>)或data-* (<span data-selected="true"></span>)来表示在单击事件期间"选择"了哪个span。第一个很好，因为您只需根据需要更改该值。第二种方法要求您解析DOM，并在每次选择更改时替换该属性或类。

相关文章：