javascript - 如何定位在 php 中没有任何 ID 或标记的 元素的 innerHTML？

Question

我的 WordPress 网站上有如下所示的 HTML:

<div id="content" class="clearfix">
  <header class="page-header">
    <h1 class="page-title">
      <span>
        Archives
      </span>
    </h1>
  </header><!-- .page-header -->

  <div class="article-container">

如何用“test string”替换字符串“Archives”？

这是我目前拥有的，但不起作用。

<?php
?>

<script>
var spans = document.getElementsByTagName("span");

for (var i=0; i < spans.length; i++)
{
    if (spans[i].innerHTML.contains("Archives"))
    {
        //is this the "Welcome" span?
        spans[i].innerHTML = "test string";  //change to new value
        break;                               //hop out of the loop, we're done
    }
}
</script>

Answer 1

您可以像下面这样使用 span 的父级:

document.querySelector('h1.page-title span').textContent = 'test string';

<div id="content" class="clearfix">

  <header class="page-header">
    <h1 class="page-title">
      <span>
        Archives                    
      </span>
    </h1>
  </header><!-- .page-header -->

<div class="article-container">

jQuery 解决方案:

$('h1.page-title span:first').text('test string');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="clearfix">

  <header class="page-header">
    <h1 class="page-title">
      <span>
        Archives                    
      </span>
    </h1>
  </header><!-- .page-header -->

<div class="article-container">