Question

我刚刚开始学习Javascript，我正在尝试使用它来更改锚标记的HTML。我宁愿不通过每个ID这样做，因为我最终会有一些相同的锚点，所以我想用一个类来做。

    <div class="testing2">
            <a  href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="wpc-customize-product">Customize</a>
        </div>

        <script type="text/javascript"> 

           var test = document.getElementsByClassName('testing2');
           var anchors = test.getElementsByTagName('a');
            if (anchors[0]) {
                anchors[0].innerHTML="Blank";
}


        </script>

问题是，我可以在使用id时使用它而不是在使用类时 - 我收到错误Uncaught TypeError：test.getElementsByTagName不是函数。

我错过了什么？

Answer 1

您只需使用querySelector即可实现此目标

document.querySelectorAll('.testing2 a')[0].innerHTML

Answer 2

此处的问题是test包含一个数组，但您并未将其称为一个数组。

var anchors = test[0].getElementsByTagName('a');

Answer 3

首先，您需要querySelectorAll('.testing2 a')选择元素a内的所有.testing2元素

第二，你需要一个forEach循环遍历所有选中的元素并处理将innerHTML更新为Blank。

<div class="testing2">
  <a href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="wpc-customize-product"> Customize1</a>
  <a href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="wpc-customize-product"> Customize2</a>
  <a href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="wpc-customize-product"> Customize3</a>
  <a href="http://802.f5f.myftpupload.com/11550-2/design/11544/" class="wpc-customize-product"> Customize4</a>
</div>

<script type="text/javascript">
  var testing2 = document.querySelectorAll('.testing2 a');
  Array.prototype.forEach.call(testing2, function(el) {
    el.innerHTML = "Blank";
  });
</script>

简单的JavaScript查询

3 个答案: