Javascript 获取可用的href_Javascript_Html

Javascript 获取可用的href

javascript html

Javascript 获取可用的href,javascript,html,Javascript,Html,我试图从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<

我试图从

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>


单击按钮可在警报框中查看2个结果
试试看
哥伦比亚不列颠
曲é；bec
函数myFunction（）{
var nodeList=document.querySelectorAll（'.community'）；
var nodeList2=document.querySelectorAll（'.personName'）；
var nodeList3=document.getElementsByClassName（'caucus'）；
/*i+=2，因为第一个是CirconScript，第二个是省*/
对于（变量i=0，j=0；i


谢谢。href是'a'标记的属性，而您的代码希望在td/tr上找到它。
你在你的循环中又少了一个层次
<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>

您正在迭代包含元素的元素
在for循环中，您需要插入另一个将迭代的for循环，或者您可以尝试跳过该循环并通过属性访问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>


单击按钮可在警报框中查看2个结果
试试看
哥伦比亚不列颠
曲é；bec
函数myFunction（）{
var nodeList=document.querySelectorAll（'.construction>a'）；
var nodeList2=document.querySelectorAll（'.personName>a'）；
var nodeList3=document.getElementsByClassName（'.caucus>a'）；
/*i+=2，因为第一个是CirconScript，第二个是省*/
对于（变量i=0，j=0；i
您可以选择所有只需获取tds的子元素和类选区，然后获取它们的href属性。不知道为什么，但firstChild在我的情况下不起作用。
<!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>

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