javascript - 如何从 HTML 标签中获取子标签信息

Question

我有以下代码：

            <ul id="menu">
                <li id = 1><a href="http://google.com" >Link</a></li>
                <li id = 2><a href="http://http://stackoverflow.com/" >Link</a></li>
            </ul>

<script>
  for (var i = 1; i < 3; i++)
  {
    var element = document.getElementById(i);
    var liLink = document.getElementById(i).childNodes[0].baseURI;
    console.log(liLink );
  }
  </script>

我在控制台中看到

   2 "http://google.com". 

预期是：

 "http://google.com"
 "http://http://stackoverflow.com/"

但是，当我记录元素时，我可以看到 childNodes[0].baseURI 是不同的。你能告诉我有什么问题吗？

谢谢，振亚

Answer 1

您需要阅读 href 属性，而不是 baseURI。

<ul id="menu">
    <li id="1"><a href="http://google.com" >Link</a></li>
    <li id="2"><a href="http://http://stackoverflow.com/" >Link</a></li>
</ul>

<script>
  for (var i = 1; i < 3; i++)
  {
    var element = document.getElementById(i);
    var liLink = document.getElementById(i).childNodes[0].getAttribute('href');
    console.log(liLink );
  }
</script>

Answer 2

你的代码应该是这样的

for (var i = 1; i < 3; i++)
  {
    var element = document.getElementById(i);
    var liLink = document.getElementById(i).childNodes[0];    
    console.log(liLink.href);
  }

检查这个JSFiddle