分享程序员开发的那些事...
更新时间：2023-01-15 21:12:46
主要原因是效率.
在文档级别，需要维护一个ID参考表，并且对文档的任何更改都需要 O(1) 对该表的修改.为了在节点级别实现它，需要为每个节点维护一个等效表，并更新任何给定元素，无论它是否附加到文档中，都需要遍历每个元素其父节点.这样很快就会消耗大量内存，并且需要很长时间才能更新DOM.
要注意的另一重要事项是(至少从Java脚本的角度来看)每个元素归文档(或文档片段)所有.因此，但只要有一个ID附加到文档中，我就可以有重复的ID"这样的说法实际上并没有堆叠-仅 可以根据节点上的节点进行管理考虑到DOM.
I thing that if .getElementById were available on all nodes, there would be two main advantages:
It could be possible to select nodes which don't belong to the document.
For example, I would like to do something like
function foo(html){
var el = document.createElement('div');
el.innerHTML = html;
var target = el.getElementById('target');
/* Do something with `target` */
}
But I can't because I get TypeError: el.getElementById is not a function.
Then, I don't want to use a class instead of an id, I must do
function foo(html){
var el = document.createElement('div');
el.innerHTML = html;
document.body.appendChild(el);
var target = document.getElementById('target');
document.body.removeChild(el);
/* Do something with `target` */
}
But the document could already have an element with id="target". Then, I should do
function foo(html){
var iframe = document.createElement('iframe');
iframe.onload = function(){
var doc = iframe.contentDocument || iframe.contentWindow.document,
el = document.createElement('div');
el.innerHTML = html;
doc.body.appendChild(el);
var target = doc.getElementById('target');
document.body.removeChild(iframe);
/* Do something with `target` */
};
iframe.src = 'about:blank';
document.body.appendChild(iframe);
}
But the code above doesn't work if I want foo to return something related with html, because the main code runs after, with the onload event.
It could increase the performance, if the document has lots of elements and you know that the element you are searching is a descendant of an element that you already have in a variable
For example, if I have a document with the following structure:
<body>
<div id="div-1">
<div id="div-1-1">
<div id="div-1-1-1">
...
</div>
<div id="div-1-1-2">
...
</div>
...
</div>
<div id="div-1-2">
<div id="div-1-2-1">
...
</div>
<div id="div-1-2-2">
...
</div>
...
</div>
...
</div>
<div id="div-2">
<div id="div-2-1">
<div id="div-2-1-1">
...
</div>
<div id="div-2-1-2">
...
</div>
...
</div>
<div id="div-2-2">
<div id="div-2-2-1">
...
</div>
<div id="div-2-2-2">
...
</div>
...
</div>
...
</div>
...
</body>
And I do...
var el1 = document.getElementById('div-9999999'),
el2 = document.getElementById('div-9999999-1-2'),
el3 = document.getElementById('div-9999999-1-2-999999'),
el4 = document.getElementById('div-9999999-1-2-999999-1-2-3-4-5');
... it could be much slower than
var el1 = document.getElementById('div-9999999'),
el2 = el1.getElementById('div-9999999-1-2'),
el3 = el2.getElementById('div-9999999-1-2-999999'),
el4 = el3.getElementById('div-9999999-1-2-999999-1-2-3-4-5');
(Of course, this example is a simplification, and in this case using .childNodes[] or .children[] would be much better);
Then, why doesn't .getElementById work on a node? I don't see any disadvantage, only advantages
The primary reason is efficiency.
At the document level, a single ID reference table needs to be maintained, and any alterations to the document require an O(1) modification to this table. To implement it at the node level, an equivalent table would need to be maintained for each node and updates to any given element, regardless of whether it is attached to the document, would need to bubble through every one of its parent nodes. This very quickly eats a lot of memory and takes a long time to update the DOM.
Another important thing to note is that (from a Javascript point of view, at least) every element is owned by a document (or document fragment). Therefore the argument of "but I can have duplicated IDs as long as only one of them is attached to the document" doesn't really stack up - it's only possible to manage this based on the nodes on the DOM when you take this into account.