Question

当我通过Id按示例搜索元素时，我使用众所周知的方法getElementById，如下所示：

HTML

<div id="my-first-div">
    <div class="anotherDiv">
        <button id="main-btn"> </button>
    </div>
</div>

的Javascript

const mainDiv = document.getElementById("my-first-div");
const mainButton = mainDiv.querySelector("#main-btn");
//const mainButton = mainDiv.getElementById("main-btn"); //this doesn't work

因此，在div中查找子项的唯一方法是使用querySelector方法，在这个基本示例中工作正常，但对于大量HTML标记，它比{{1}更慢}}。见https://jsperf.com/getelementbyid-vs-queryselector/11

我的问题是：

存在一种更好的方法，可以通过id（或class或tagName）查找子元素，而无需使用querySelector for HTMLDivElement？

Answer 1

修改

我刚注意到你已经知道document.querySelector - 使用它直到它变得太慢了。仅仅因为它比document.getElementById慢，并不意味着它的速度仍然不是很快。

正如其中一位评论员指出的那样，不要过早优化。

作为对你问题的回答，没有浏览器公开任何比这些API更快的其他可用API来获取DOM元素，我想所有getElement(s)By方法都可能在内部路由到{{1}带有标志的方法，用于返回第一个或所有匹配的节点。

原始回答

document also contains the querySelector method：

querySelector

与：
相同
const mainDiv = document.getElementById("my-first-div"); const mainButton = mainDiv.querySelector("#main-btn");

话虽如此，如果const mainButton = document.querySelector('#my-first-div #main-btn');是main-btn，那么它是唯一的，所以你可以这样做：

id

Answer 2

还有其他JavaScript方法是＆＃34;等效的＆＃34;到querySelector()的单个方面，理论上应该更快，因为这些方法只做一件事。

通常，这些方法将收集它们旨在收集的所有内容并返回HTMLCollection（一个类似于数组的对象，即＃34; live＆＃34;，这意味着如果添加或删除任何内容，或以某种方式更改，它将自动遵守所述更改。）请注意括号表示法[0]。这将返回文档（或元素）的第一个元素，就像.querySelector()一样。

还为HTMLElement Interfaces和<table>添加了一些<form>。

演示

＆＃13;

var gTagName = document.getElementsByTagName('ASIDE')[0];
var qTagName = document.querySelector('ASIDE');

var gName = document.getElementsByName('TEXT')[0];
var qName = document.querySelector('[name=TEXT]');

var gClass = document.getElementsByClassName('h')[0];
var qClass = document.querySelector('.h');

var qAttribute = document.querySelector('[href]');

qTagName.style.border = '3px solid blue';
qName.style.backgroundColor = 'cyan';
qClass.style.backgroundColor = 'darkblue';
qAttribute.style.color = 'midnightblue';

gTagName.style.backgroundColor = 'tomato';
gName.style.border = '3px solid red';
gClass.style.backgroundColor = 'orange';

var cForm = document.forms[0];
var cFields = cForm.elements;
for (var F of cFields) {
  F.style.border = '3px dashed brown';
}
cFields[1].value = 'HTMLFormControlsCollection';
cFields[1].style.transform = 'scale(2,2)';

var cTable = document.querySelector('table');
var cRows = cTable.rows;
var cCells = cRows[0].cells
cCells[2].textContent = 'This cell\'s just got content';
cCells[2].style.color = 'red';

＆＃13;

div {
  border: 1px dashed red
}

td {
  border: 1px solid blue
}

input {
  display: inline-block;
}

＆＃13;

<div class='a'>&lt;DIV&gt;ISION a
  <div class='b'>&lt;DIV&gt;ISION b
    <table>
      <caption>&lt;TABLE&gt; get by HTMLTableCollection</caption>
      <tr>
        <td>TABLE DATA</td>
        <td>TABLE DATA</td>
        <td>TABLE DATA</td>
        <td>TABLE DATA</td>
      </tr>
    </table>
    <div class='c'>&lt;DIV&gt;ISION c
      <input name='TEXT' value='&lt;INPUT&gt; get by NAME'>
      <div class='d'>&lt;DIV&gt;ISION d
        <div class='e'>&lt;DIV&gt;ISION e
          <a href='#/'>&lt;A&gt;NCHOR get by [ATTRIBUTE]</a>
          <div class='f'>&lt;DIV&gt;ISION f
            <form><input value='&lt;INPUT&gt;'>
              <input value='&lt;INPUT&gt;'>
              <input value='&lt;INPUT&gt;'>
            </form>
            <div class='g'>&lt;DIV&gt;ISION g
              <aside>&lt;ASIDE&gt; get by TAGNAME</aside>
              <div class='h'>&lt;DIV&gt;ISION h get by .CLASS
                <div class='i'>&lt;DIV&gt;ISION i
                  <div class='j'>&lt;DIV&gt;ISION j

                  </div>

                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 3

尝试

document.getElementsByClassName('.class')
document.getElementsByTagName('div')

尽管getElementById是3

中最快的

您的课程越具体，就越容易找到

Javascript DOM：在HTMLDivElements中搜索子元素的推荐方法是什么？documentEgetById是什么？

3 个答案:

演示