[英]Javascript DOM: What is the recommended way to search a child element in HTMLDivElements how it does document.getElementById?
When i search for a element by example by Id, I use the well know method getElementById
like this: 当我通过ID通过示例搜索元素时,我使用众所周知的
getElementById
方法,如下所示:
HTML 的HTML
<div id="my-first-div">
<div class="anotherDiv">
<button id="main-btn"> </button>
</div>
</div>
Javascript Java脚本
const mainDiv = document.getElementById("my-first-div");
const mainButton = mainDiv.querySelector("#main-btn");
//const mainButton = mainDiv.getElementById("main-btn"); //this doesn't work
So, the only way for find a child inside of a div is using querySelector
method that in this basic example works fine, but for huge HTML markup it's more slow compared with the document.getElementById
. 因此,在div内查找子项的唯一方法是使用
querySelector
方法,该方法在此基本示例中可以正常工作,但是对于巨大的HTML标记,与document.getElementById
相比,它要慢得多。 See https://jsperf.com/getelementbyid-vs-queryselector/11 参见https://jsperf.com/getelementbyid-vs-queryselector/11
My question is: 我的问题是:
Exists a better way for find child elements by id (or class, or tagName) without use querySelector for HTMLDivElement? 是否存在一种更好的方法,可以通过id(或类或tagName)查找子元素,而无需为HTMLDivElement使用querySelector?
EDIT 编辑
I just noticed that you were already aware of document.querySelector
- use it until it becomes too slow for you. 我只是注意到您已经知道
document.querySelector
使用它,直到它变得对您来说太慢为止。 Just because it's slower than document.getElementById
doesn't mean it's not still ridiculously fast. 仅仅因为它比
document.getElementById
慢,并不意味着它仍然不快。
Like one of the commentors pointed out, don't optimize prematurely. 就像评论者之一指出的那样,不要过早优化。
As an answer to you question, no the browser exposes no other usable API that is faster than these APIs to get DOM elements and I imagine that all of the getElement(s)By
methods probably internally route to a querySelector
method with a flag to return the first or all of the matched nodes. 作为对您问题的回答,没有浏览器提供比这些API更快的其他可用API来获取DOM元素,并且我想所有的
getElement(s)By
方法都可能在内部路由到带有标志返回的querySelector
方法。第一个或所有匹配的节点。
ORIGINAL ANSWER 原始答案
document
also contains the querySelector
method : document
还包含querySelector
方法 :
const mainDiv = document.getElementById("my-first-div");
const mainButton = mainDiv.querySelector("#main-btn");
is the same as: 是相同的:
const mainButton = document.querySelector('#my-first-div #main-btn');
That being said, if main-btn
is an id
, then it's unique so you can just do: 话虽如此,如果
main-btn
是一个id
,那么它是唯一的,因此您可以执行以下操作:
const mainButton = document.getElementById('main-btn');
There are other JavaScript methods that are "equivalent" to a single facet of querySelector()
and theoretically should be faster since these methods do one thing only. 还有其他JavaScript方法与
querySelector()
的一个方面“等效”,并且从理论上讲应该更快,因为这些方法仅做一件事。
Normally these methods will collect all of whatever they are designed to collect and return a HTMLCollection (an array-like object that is "live", meaning that if anything is added or removed, or changed in some way, it will automatically comply to said changes.) Notice the bracket notation [0]
. 通常,这些方法将收集所有旨在收集的内容,并返回HTMLCollection (“实时”的类似数组的对象,这意味着,如果添加或删除或以某种方式进行了更改,它将自动遵循更改。)请注意括号符号
[0]
。 This will return the first element of a document (or element) just like .querySelector()
. 这将返回文档(或元素)的第一个元素,就像
.querySelector()
。
Also added some HTMLElement Interfaces for <table>
and <form>
. 还为
<table>
和<form>
添加了一些HTMLElement接口 。
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';
div { border: 1px dashed red } td { border: 1px solid blue } input { display: inline-block; }
<div class='a'><DIV>ISION a <div class='b'><DIV>ISION b <table> <caption><TABLE> 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'><DIV>ISION c <input name='TEXT' value='<INPUT> get by NAME'> <div class='d'><DIV>ISION d <div class='e'><DIV>ISION e <a href='#/'><A>NCHOR get by [ATTRIBUTE]</a> <div class='f'><DIV>ISION f <form><input value='<INPUT>'> <input value='<INPUT>'> <input value='<INPUT>'> </form> <div class='g'><DIV>ISION g <aside><ASIDE> get by TAGNAME</aside> <div class='h'><DIV>ISION h get by .CLASS <div class='i'><DIV>ISION i <div class='j'><DIV>ISION j </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
try 尝试
document.getElementsByClassName('.class')
document.getElementsByTagName('div')
though getElementById is the quickest of the 3 尽管getElementById是3中最快的
the more specific you are with your classes the easier they will be to find 您的课程越具体,他们越容易找到
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.