获取href(如果可用)

我正在尝试从tr-td列表中获取href数据(请参阅示例代码(。但它总是返回null值。我尝试过.getElementby...()的其他方法，但我总是在某个地方碰壁。

<!DOCTYPE html>
<html>
<body>
<p>Click the button to see the 2 results in an alerte box.</p>
<button onclick="myFunction()">Try it</button>
<table class="list" role="presentation">
<thead>
<tr>
<th><a href="/Parliamentarians/fr/constituencies?sortBy=Name&sortDescending=True">Circonscription</a><span class="icon-ascending"></span></th>
<th><a href="/Parliamentarians/fr/constituencies?sortBy=Province&sortDescending=False">Province / Territoire</a></th>
</tr>
</thead>
<tbody>
<tr>
<td class="constituency">
<a title="Cliquez pour acc&#233;der au profil de la circonscription" href="/Parliamentarians/fr/constituencies/Abbotsford(898)">Abbotsford</a>
</td>
<td class="constituency">Colombie-Britannique</td>
<td class="personName">
<a title="Cliquez pour acc&#233;der au profil du d&#233;put&#233;" href="/Parliamentarians/fr/members/Ed-Fast(35904)">Fast, Ed  <abbr>(L'hon.)</abbr></a>
</td>
<td class="caucus">
<a target="_blank" title="Site Web du parti politique - Ouvre une nouvelle fen&#234;tre" href="http://www.conservateur.ca">Conservateur</a>
</td>
</tr>
<tr>
<td class="constituency">
<a title="Cliquez pour acc&#233;der au profil de la circonscription" href="/Parliamentarians/fr/constituencies/Abitibi-Baie-James-Nunavik-Eeyou(637)">Abitibi—Baie-James—Nunavik—Eeyou</a>
</td>
<td class="constituency">Qu&#233;bec</td>
<td class="personName">
</td>
<td class="caucus">
</td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var nodeList = document.querySelectorAll('.constituency');
var nodeList2 = document.querySelectorAll('.personName');
var nodeList3 = document.getElementsByClassName('caucus');
/* i+=2, because first is circonscription and next is province */
for (var i = 0, j = 0; i < nodeList.length; i += 2, j++) {
alert(nodeList[i].innerText + '|' + nodeList[i].getAttribute('href') + '|' + nodeList[i + 1].innerText + '|' + nodeList2[j].innerText + '|' + nodeList2[j].getAttribute('href') + '|' + nodeList3[j].innerText + '|' + nodeList3[j].getAttributeNode('href'));
}
}
</script>
</body>
</html>

谢谢。

当您的代码希望在td/tr上找到"a"标记的href are属性时。你在循环中又错过了一个层次。

<td class="constituency">
<!-- note the href on the a tag -->
<a title="Cliquez pour acc&#233;der au profil de la circonscription" href="/Parliamentarians/fr/constituencies/Abbotsford(898)">Abbotsford</a>
</td>

您的javascript代码应该看起来像：

nodeList[i].children[0].getAttribute('href')

您正在迭代包含元素的元素。

在for循环中，您需要插入另一个将在childNodes上迭代的for循环，或者您可以尝试跳过它，并通过firstChild属性访问A元素。

无论哪种方式都应该对您有所帮助：

nodeList3[j].childNodes[0].getAttribute('href')
nodeList3[j].firstChild.getAttribute('href')

我认为最简单的方法可能是更新javascript中的css选择器，以限制类选择器的"第一个子"：

<!DOCTYPE html>
<html>
<body>
<p>Click the button to see the 2 results in an alerte box.</p>
<button onclick="myFunction()">Try it</button>
<table class="list" role="presentation">
<thead>
<tr>
<th><a href="/Parliamentarians/fr/constituencies?sortBy=Name&sortDescending=True">Circonscription</a><span class="icon-ascending"></span></th>            
<th><a href="/Parliamentarians/fr/constituencies?sortBy=Province&sortDescending=False">Province / Territoire</a></th>            
</tr>
</thead>
<tbody>
<tr>
<td class="constituency">
<a title="Cliquez pour acc&#233;der au profil de la circonscription" href="/Parliamentarians/fr/constituencies/Abbotsford(898)">Abbotsford</a>
</td>
<td class="constituency">Colombie-Britannique</td>
<td class="personName">
<a title="Cliquez pour acc&#233;der au profil du d&#233;put&#233;" href="/Parliamentarians/fr/members/Ed-Fast(35904)">Fast, Ed  <abbr>(L'hon.)</abbr></a>
</td>
<td class="caucus">
<a target="_blank" title="Site Web du parti politique - Ouvre une nouvelle fen&#234;tre" href="http://www.conservateur.ca">Conservateur</a>
</td>
</tr>
<tr>
<td class="constituency">
<a title="Cliquez pour acc&#233;der au profil de la circonscription" href="/Parliamentarians/fr/constituencies/Abitibi-Baie-James-Nunavik-Eeyou(637)">Abitibi—Baie-James—Nunavik—Eeyou</a>
</td>
<td class="constituency">Qu&#233;bec</td>
<td class="personName">
</td>
<td class="caucus">
</td>
</tr>
</tbody>
</table>
<script>
function myFunction() {
var nodeList = document.querySelectorAll('.constituency > a');
var nodeList2 = document.querySelectorAll('.personName > a');
var nodeList3 = document.getElementsByClassName('.caucus > a');
/* i+=2, because first is circonscription and next is province */
for(var i = 0, j = 0; i < nodeList.length; i+=2, j++ ) {
alert(nodeList[i].innerText + '|' + nodeList[i].getAttribute('href') + '|' + nodeList[i+1].innerText + '|' + nodeList2[j].innerText + '|' + nodeList2[j].getAttribute('href') + '|' + nodeList3[j].innerText + '|' + nodeList3[j].getAttributeNode('href'));
}
}
</script>
</body>
</html>

您可以在几个选择器中选择所有<a>，querySelectorAll中有,，一旦您有了.href元素来选择所有url的

var nodeList = document.querySelectorAll('.constituency > a, .personName > a, .caucus > a');
for(let i = 0; i<nodeList.length; i++){
console.log(nodeList[i].href);
}

完整示例如下：http://jsfiddle.net/0c2fgdLu/17/

相关内容

最新更新

热门标签：