Zusammenfassung gängiger nativer JavaScript-DOM-Operations-APIs

Ich blieb während des letzten Interviews bei dieser Frage hängen und habe mir daher die Zeit genommen, sie sorgfältig durchzugehen.

Mehrere Objekte

Node

Node ist eine Schnittstelle, auf Chinesisch Node genannt, und viele Arten von DOM-Elementen sind es Davon abgeleitet haben alle dieselben grundlegenden Eigenschaften und Methoden. Zu den allgemeinen Knoten gehören Elemente, Texte, Attribute, Kommentare, Dokumente usw. (Achten Sie daher auf den Unterschied zwischen Knoten und Elementen. Element ist ein Knotentyp).

Node hat ein Attribut nodeType, das den Typ von Node darstellt. Es ist eine Ganzzahl und seine Werte stellen den entsprechenden Node-Typ wie folgt dar:

{
    ELEMENT_NODE: 1, // 元素节点
    ATTRIBUTE_NODE: 2, // 属性节点
    TEXT_NODE: 3, // 文本节点
    DATA_SECTION_NODE: 4,
    ENTITY_REFERENCE_NODE: 5,
    ENTITY_NODE: 6,
    PROCESSING_INSTRUCTION_NODE: 7,
    COMMENT_NODE: 8, // 注释节点
    DOCUMENT_NODE: 9, // 文档
    DOCUMENT_TYPE_NODE: 10,
    DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
    NOTATION_NODE: 12,
    DOCUMENT_POSITION_DISCONNECTED: 1,
    DOCUMENT_POSITION_PRECEDING: 2,
    DOCUMENT_POSITION_FOLLOWING: 4,
    DOCUMENT_POSITION_CONTAINS: 8,
    DOCUMENT_POSITION_CONTAINED_BY: 16,
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32
}

NodeList

Das NodeList-Objekt ist eine Sammlung von Knoten, die im Allgemeinen von Node.childNodes, document.getElementsByName und document.querySelectorAll zurückgegeben werden.

Es ist jedoch zu beachten, dass die Ergebnisse von NodeList, die von Node.childNodes und document.getElementsByName zurückgegeben werden, in Echtzeit erfolgen (ähnlich wie derzeit HTMLCollection), während die von document.querySelectorAll zurückgegebenen Ergebnisse fest sind. Das ist etwas ganz Besonderes.

Zum Beispiel:

var childNodes = document.body.childNodes;
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('p'));
console.log(childNodes.length); // 此时的输出是“3”

HTMLCollection

HTMLCollection ist eine spezielle NodeList, die angibt, dass sie mehrere Elemente enthält (die Reihenfolge der Elemente ist in der Dokumentenflussreihenfolge), wird es in Echtzeit aktualisiert und aktualisiert sich automatisch, wenn sich die darin enthaltenen Elemente ändern. Darüber hinaus handelt es sich um ein Pseudo-Array. Wenn Sie sie wie ein Array betreiben möchten, müssen Sie es wie folgt aufrufen: Array.prototype.slice.call(nodeList, 2).

Knotensuch-API

• document.getElementById: Elemente basierend auf der ID suchen, Groß-/Kleinschreibung beachten, bei mehreren Ergebnissen nur das erste Es wird jeweils eines zurückgegeben.

• document.getElementsByClassName: Elemente basierend auf Klassennamen suchen, werden durch Leerzeichen getrennt und eine HTMLCollection wird zurückgegeben. Beachten Sie, dass die Kompatibilität IE9+ (einschließlich) beträgt. Darüber hinaus unterstützen nicht nur Dokumente, sondern auch andere Elemente die Methode getElementsByClassName.

• document.getElementsByTagName: Elemente basierend auf Tags suchen. * bedeutet, alle Tags abzufragen und eine HTMLCollection zurückzugeben.

• document.getElementsByName: Suche basierend auf dem Namensattribut des Elements und gibt eine NodeList zurück.

• document.querySelector: Gibt einen einzelnen Knoten zurück, IE8+ (einschließlich), wenn mehrere Ergebnisse übereinstimmen, wird nur das erste zurückgegeben.

• document.querySelectorAll: Gibt eine NodeList zurück, IE8+ (einschließlich).

• document.forms: Ruft alle Formulare auf der aktuellen Seite ab und gibt eine HTMLCollection zurück; 🎜>

  Die Knotenerstellungs-API umfasst hauptsächlich vier Methoden: createElement, createTextNode, cloneNode und createDocumentFragment.

createElement

Element erstellen:

Das durch createElement erstellte Element gehört nicht zum Dokumentobjekt. Es wird nur erstellt und nicht Zum HTML-Dokument müssen Sie Methoden wie appendChild oder insertBefore aufrufen, um es dem HTML-Dokument hinzuzufügen.

createTextNode

var elem = document.createElement("p");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

Erstellen Sie einen Textknoten:

cloneNode

Klonen Sie einen Knoten: Knoten .cloneNode(true/false), der einen Bool-Parameter empfängt, um anzugeben, ob untergeordnete Elemente kopiert werden sollen.

var node = document.createTextNode("我是文本节点");
document.body.appendChild(node);

Durch das Klonen eines Knotens wird das Ereignis nicht geklont, es sei denn, das Ereignis wird mit 7c44e228916a0ba857090b7d794510e094b3e26ee717c64999d7867364b1b4a3 mithilfe von addEventListener und node gebunden =xxx; wird nicht kopiert.

createDocumentFragment

var from = document.getElementById("test");
var clone = from.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);

Diese Methode wird zum Erstellen eines DocumentFragment verwendet, bei dem es sich um ein Dokumentfragment handelt, das hauptsächlich zum Speichern temporärer Knoten verwendet wird kann die Leistung bei der Bearbeitung großer DOM-Mengen erheblich verbessern.

Angenommen, es gibt eine bestehende Frage, die das Hinzufügen von 10.000 li zu ul erfordert. Wir verwenden zunächst die einfachste Methode zum Spleißen von Zeichenfolgen, um dies zu erreichen:

Dann wechseln wir nacheinander zur Append-Methode Erstens, keine Notwendigkeit. Diese Methode ist definitiv ineffizient:

Probieren Sie abschließend die Methode zur Dokumentfragmentierung aus. Es ist absehbar, dass diese Methode definitiv viel besser ist als die zweite Methode, aber das sollte nicht der Fall sein schnell wie die erste Methode. :

<ul id="ul"></ul>
<script>
(function()
{
    var start = Date.now();
    var str = &#39;&#39;;
    for(var i=0; i<10000; i++) 
    {
        str += &#39;<li>第&#39;+i+&#39;个子节点</li>&#39;;
    }
    document.getElementById(&#39;ul&#39;).innerHTML = str;
    console.log(&#39;耗时：&#39;+(Date.now()-start)+&#39;毫秒&#39;); // 44毫秒
})();
</script>

Knotenmodifikations-API

<ul id="ul"></ul>
<script>
(function()
{
    var start = Date.now();
    var str = &#39;&#39;, li;
    var ul = document.getElementById(&#39;ul&#39;);
    for(var i=0; i<10000; i++)
    {
        li = document.createElement(&#39;li&#39;);
        li.textContent = &#39;第&#39;+i+&#39;个子节点&#39;;
        ul.appendChild(li);
    }
    console.log(&#39;耗时：&#39;+(Date.now()-start)+&#39;毫秒&#39;); // 82毫秒
})();
</script>

Knotenmodifikations-API hat die folgenden Eigenschaften:

<ul id="ul"></ul>
<script>
(function()
{
    var start = Date.now();
    var str = &#39;&#39;, li;
    var ul = document.getElementById(&#39;ul&#39;);
    var fragment = document.createDocumentFragment();
    for(var i=0; i<10000; i++)
    {
        li = document.createElement(&#39;li&#39;);
        li.textContent = &#39;第&#39;+i+&#39;个子节点&#39;;
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
    console.log(&#39;耗时：&#39;+(Date.now()-start)+&#39;毫秒&#39;); // 63毫秒
})();
</script>

Ob ein Knoten hinzugefügt oder ersetzt werden soll, wenn er sich ursprünglich auf der Seite befindet, wird der Knoten an der ursprünglichen Position entfernt

Ereignisse, die an den Knoten selbst gebunden sind, werden nicht entfernt verschwinden nach der Änderung;

appendChild

2. Dies wurde tatsächlich schon oft verwendet:

Der untergeordnete Knoten wird an den letzten untergeordneten Knoten des übergeordneten Knotens angehängt. Wenn es sich bei dem hinzugefügten Knoten außerdem um einen Knoten handelt, der auf einer Seite vorhanden ist, wird der Knoten nach der Ausführung an einem neuen Speicherort hinzugefügt und der Knoten wird von seinem ursprünglichen Speicherort entfernt, was bedeutet, dass an der Seite keine zwei Knoten vorhanden sind Gleichzeitig bleiben die Ereignisse auf der Seite erhalten.

insertBefore

parent.appendChild(child);

Einen Knoten vor einem anderen Knoten einfügen, Syntax:

parentNode.insertBefore(newNode, refNode);

这个API个人觉得设置的非常不合理，因为插入节点只需要知道newNode和refNode就可以了，parentNode是多余的，所以jQuery封装的API就比较好：

newNode.insertBefore(refNode); // 如 $("p").insertBefore("#foo");

所以切记不要把这个原生API和jQuery的API使用方法搞混了！为了加深理解，这里写一个简单的例子：

<p id="parent">
    我是父节点
    <p id="child">
        我是旧的子节点
    </p>
</p>
<input type="button" id="insertNode" value="插入节点" />
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").addEventListener(&#39;click&#39;, function()
{
    var newNode = document.createElement("p");
    newNode.textContent = "我是新节点";
    parent.insertBefore(newNode, child);
}, false);
</script>

关于第二个参数：

• refNode是必传的，如果不传该参数会报错；

• 如果refNode是undefined或null，则insertBefore会将节点添加到末尾；

removeChild

removeChild用于删除指定的子节点并返回子节点，语法：

var deletedChild = parent.removeChild(node);

deletedChild指向被删除节点的引用，它仍然存在于内存中，可以对其进行下一步操作。另外，如果被删除的节点不是其子节点，则将会报错。一般删除节点都是这么删的：

function removeNode(node)
{
    if(!node) return;
    if(node.parentNode) node.parentNode.removeChild(node);
}

replaceChild

replaceChild用于将一个节点替换另一个节点，语法：

parent.replaceChild(newChild, oldChild);

节点关系API

DOM中的节点相互之间存在着各种各样的关系，如父子关系，兄弟关系等。

父关系API

• parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment；

• parentElement ：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是，则返回null；

子关系API

• children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；

• childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；

• firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；

• lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild ；

兄弟关系型API

• previousSibling ：节点的前一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。

• nextSibling ：节点的后一个节点，如果不存在则返回null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。

• previousElementSibling ：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。

• nextElementSibling ：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器不支持。

元素属性型API

setAttribute

给元素设置属性：

element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。

getAttribute

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：

var value = element.getAttribute("id");

样式相关API

直接修改元素的样式

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

动态添加样式规则

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);

window.getComputedStyle

通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。

var style = window.getComputedStyle(element[, pseudoElt]);

getBoundingClientRect

getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：

var clientRect = element.getBoundingClientRect();

clientRect是一个 DOMRect 对象，包含width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。

 

以上就是JavaScript常见原生DOM操作API总结的内容，更多相关内容请关注PHP中文网（www.php.cn）！