Question

基本上，我正在尝试访问一堆链接标记，以便让它们交换位置，但是我尝试，我访问链接的href属性而不是链接的实际HTML对象。

解决方案可能很明显，但目前我很无能......

window.addEventListener("load", function () {

    var divs = document.getElementsByClassName("div");
    var As = divs[0].getElementsByTagName("A");
  
    alert(As[0]) //Displays a url, not an html object


});

<div class="div">
  <a href="">
  Hello
  </a>

 <a href="">
  Hello again
  </a>
  
  

</div>

Answer 1

假设你想要访问标签而不是'href'属性，这里有解释：

尝试运行此代码：

    <html>
        <body>
            <div class="div">
               <a href="mylocation">
                 Hello
               </a>

               <a href="">
                 Hello again
               </a>
           </div>
       </body>
       <script>
          window.addEventListener("load", function () {
             var divs = document.getElementsByClassName("div");
             var As = divs[0].getElementsByTagName("a");

             alert(As[0]); //Displays a url, not an html object
             console.log(As[0]);
             As[0].innerHTML = "Some shit";
          });

       </script>
    </html>

Console.log 显示所选标记，但警告显示该位置。因此，您正确地访问该元素。记得在打开文件时检查控制台。

Anchor代码与“警报”的行为不同，请查看：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Answer 2

当您发出警报时，它会显示网址（我不确切知道原因），但是如果您想操纵元素或获取其内容（或者您可以使用元素执行的任何操作），请按照示例操作：

window.addEventListener("load", function () {
    var divs = document.querySelectorAll("div");
    var As = divs[0].querySelectorAll("a");

    //example by manipulating
    As[0].style.color = "red"; //change the color (example)
    alert(As[0].innerHTML); //return "Hello"
    alert(typeof As[0]); //return "object"
    
    //but console.log return te element
    console.log(As[0]);
});

<div class="div">
  <a href="">
    Hello
  </a>

  <a href="">
    Hello again
  </a>
</div>

PS：使用typeof返回该类型是一个对象，但我真的不知道为什么它会在alert()时显示一个引用href的字符串。

Answer 3

请参阅MDN documentation：

从其父级HTMLElement继承方法，并实现HTMLHyperlinkElementUtils中的方法。

和

HTMLHyperlinkElementUtils.toString（）：返回包含整个URL的USVString。它是URLUtils.href的同义词，但它不能用于修改值。

您正在访问href值，因为您要将As[0]转换为字符串（隐式，因为alert()会将您传递给它的所有内容转换为字符串）。

如果您想查看元素本身：不要将其转换为字符串。

您可以使用console.log代替alert。您可以访问元素的属性（例如alert(As[0].innerHTML)。等等。

从DivElement

3 个答案: