演示：

Question

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

Answer 1

您需要获取以下元素：document.querySelectorAll(".main"); 然后你需要使用document.getElementById("searchtext")进行搜索，然后添加use 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）中。您可以通过调用.value标记的属性<input>来获取此值，您可以选择该标记，就像使用document.getElementById("searchtext")一样。然后使用document.getElementsByClassName("main")将要搜索的元素存储在另一个变量中，在本例中为数组（注意getElement s ByClassName，表示它返回一个集合）。你必须在某个地方调用你的功能。我刚将它添加到此行中的按钮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')返回 NodeList ，您可以使用values()函数返回列表中所有节点值的迭代器
然后使用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“）;”会工作，因为你应该在单独的变量中进行，例如搜索文本一个用于选择。希望这有帮助！

寻找元素

4 个答案:

演示：