搜索元素

Question

我被分配了作业，其中我必须使用给定的 HTML 文件并创建一个 Javascript 文件，该文件将在 div class 中搜索单词。我必须同时使用 document.getElementById() 和 .querySelectorAll。

Answer 1

您需要获取元素：document.querySelectorAll(".main"); 然后您需要使用 document.getElementById("searchtext") 进行搜索，然后您可以添加使用 addEventListener 以使其运行在 click 事件发生时成为您的函数：

function Search() 
{
    var elements = document.querySelectorAll(".main");
    let search = document.getElementById('searchtext').value;
    for (var i = 0; i < elements.length; i++)
    {
        if(elements[i].innerHTML.indexOf(search) > - 1)
        {
            alert('found');
        }
    }

}

document.getElementById('searchbutton').addEventListener('click', Search);

    <body>

        <div class="main">

            <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

            <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

            <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

            <ul>
                <li>Richard L. Bloch, investment broker/real estate developer...</li> 
                <li>Karl Eller, outdoor advertising company owner and former...</li>
                <li>Donald Pitt, Tucson-based attorney;</li>
                <li>Don Diamond, Tucson-based real estate investor.</li>
            </ul>

        <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

        </div>

        <hr />

        <div>

            Search for text:
            <input id="searchtext" type="text"  /> 
            <button id="searchbutton">Search</button>
        </div>

    </body>

Answer 2

您必须将要搜索的值存储在变量中 (search)。您可以通过调用 <input> 标记的属性 .value 来获取此值，您可以使用 select，就像您已经使用 document.getElementById("searchtext") 所做的那样。然后将要搜索的元素存储在另一个变量中，在本例中是使用 document.getElementsByClassName("main") 的数组（注意 getElementsByClassName 表示它 returns a collection)。而且你必须在某处调用你的函数。我只是将它添加到这一行的按钮 onclick 事件中：

<button id="searchbutton" onclick="search()">Search</button>

function search() {
  var search = document.getElementById("searchtext").value;
  var elements = document.getElementsByClassName("main");

  for (var i = 0; i < elements.length; i++) {
    if (elements[i].innerHTML.indexOf(search) > -1) {
      alert('found');
    }
  }
}

<div class="main">

  <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

  <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

  <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

  <ul>
    <li>Richard L. Bloch, investment broker/real estate developer...</li>
    <li>Karl Eller, outdoor advertising company owner and former...</li>
    <li>Donald Pitt, Tucson-based attorney;</li>
    <li>Don Diamond, Tucson-based real estate investor.</li>
  </ul>

  <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

</div>

<hr />

<div>

  Search for text:
  <input id="searchtext" type="text" />
  <button id="searchbutton" onclick="search()">Search</button>
</div>

Answer 3

用document.getElementById("searchtext").value
document.querySelectorAll('.main') returns 一个 NodeList，您可以在其上使用 values() 函数，该函数将 return 一个迭代器列表中的节点值
然后使用 for(var el of elements.values()) 并检查每个元素是否出现

演示：

function search() {
    var searchText = document.getElementById("searchtext").value,
        elements = document.querySelectorAll('.main');
        
    for(var el of elements.values()) { 
      var idx = el.innerHTML.indexOf(searchText);
      if(idx != -1){
        console.log("Found at: ", idx);
      }
      
    }

}

<head>
        <script src = "first.js" type = "text/javascript"></script>
        <link href= "dirststyle.css"  type = "text/css" rel = "stylesheet"/>
    </head>

    <body>

        <div class="main">

            <p>The Phoenix Suns are a professional basketball team based in Phoenix, Arizona. They are members of the ...</p>

            <p>The Suns have been generally successful since they began play as an expansion team in 1968. In forty years of play they have posted ...</p>

            <p>On January 22, 1968, the NBA awarded expansion franchises to an ownership group from Phoenix and one from Milwaukee. ...</p>

            <ul>
                <li>Richard L. Bloch, investment broker/real estate developer...</li> 
                <li>Karl Eller, outdoor advertising company owner and former...</li>
                <li>Donald Pitt, Tucson-based attorney;</li>
                <li>Don Diamond, Tucson-based real estate investor.</li>
            </ul>

        <p>Page by New Person. <br /> Some (all) information taken from Wikipedia.</p>

        </div>

        <hr />

        <div>

            Search for text:
            <input id="searchtext" type="text"  /> 
            <button id="searchbutton" onclick="search()">Search</button>
        </div>

    </body>

Answer 4

所以你应该在按钮上添加一个onclick函数，应该是这样的<button id=“searchbutton”, onclick=“Search()”>Search</button> 而且我也不认为“document.getElementById(“searchtext”).querySelectorAll(“main”);”之所以可行，是因为您应该在单独的变量中进行操作，例如一个用于搜索文本，一个用于选择。希望这对您有所帮助！

搜索元素

searching for elements

document

words

演示：