Grundlegendes Tutorial zum Betrieb von HTML-DOM-Knoten mit JavaScript

Aufgrund der Existenz von DOM können wir Knoten über JavaScript abrufen, erstellen, ändern oder löschen.
HINWEIS: Bei den Elementen in den unten aufgeführten Beispielen handelt es sich ausschließlich um Elementknoten.
Knoten abrufen

Vater-Sohn-Beziehung

element.parentNode
element.firstChild/element.lastChild
element.childNodes/element.children

Nach dem Login kopieren

Brüderliche Beziehung

element.previousSibling/element.nextSibling
element.previousElementSibling/element.nextElementSibling

Nach dem Login kopieren

Der Erwerb von Knoten über die direkte Beziehung zwischen Knoten verringert die Wartbarkeit des Codes erheblich (Änderungen in der Beziehung zwischen Knoten wirken sich direkt auf den Erwerb von Knoten aus), aber dieses Problem kann durch Schnittstellen effektiv gelöst werden.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>ELEMENT_NODE & TEXT_NODE</title>
</head>
<body>
 <ul id="ul">
 <li>First</li>
 <li>Second</li>
 <li>Third</li>
 <li>Fourth</li>
 </ul>
 <p>Hello</p>
 <script type="text/javascript">
 var ulNode = document.getElementsByTagName("ul")[0];
 console.log(ulNode.parentNode);    //<body></body>
 console.log(ulNode.previousElementSibling); //null
 console.log(ulNode.nextElementSibling);  //<p>Hello</p>
 console.log(ulNode.firstElementChild);  //<li>First</li>
 console.log(ulNode.lastElementChild);  //<li>Fourth</li>
 </script>
</body>
</html>

Nach dem Login kopieren

NTOE: Aufmerksame Leute werden feststellen, dass es im Beispiel der Knotendurchquerung keine Leerzeichen zwischen den Knoten body, ul, li und p gibt, denn wenn Leerzeichen vorhanden sind, werden die Leerzeichen als TEXT-Knoten betrachtet. Verwenden Sie also ulNode. previousSibling, um einen leeren Textknoten anstelle des

First

-Knotens zu erhalten. Das heißt, mehrere Attribute der Knotendurchquerung erhalten alle Knotentypen, während die Elementdurchquerung nur die entsprechenden Elementknoten erhält. Unter normalen Umständen wird häufiger das Traversal-Attribut von Elementknoten verwendet.
Implementieren Sie eine browserkompatible Version von element.children
Einige ältere Browser unterstützen die Methode element.children nicht, wir können jedoch die folgende Methode verwenden, um Kompatibilität zu erreichen.

<html lang>
<head>
 <meta charest="utf-8">
 <title>Compatible Children Method</title>
</head>
<body id="body">
 <div id="item">
 <div>123</div>
 <p>ppp</p>
 <h1>h1</h1>
 </div>
 <script type="text/javascript">
 function getElementChildren(e){
  if(e.children){
  return e.children;
  }else{
  /* compatible other browse */
  var i, len, children = [];
  var child = element.firstChild;
  if(child != element.lastChild){
   while(child != null){
   if(child.nodeType == 1){
    children.push(child);
   }
   child = child.nextSibling;
   }
  }else{
   children.push(child);
  }
  return children;
  }
 }
 /* Test method getElementChildren(e) */
 var item = document.getElementById("item");
 var children = getElementChildren(item);
 for(var i =0; i < children.length; i++){
  alert(children[i]);
 }
 </script>
</body>
</html>

Nach dem Login kopieren

HINWEIS: Diese Kompatibilitätsmethode ist ein vorläufiger Entwurf und wurde nicht auf Kompatibilität getestet.
Schnittstelle zum Abrufen des Elementknotens

getElementById
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

Nach dem Login kopieren

2016311163518624.png (793×256)

getElementById

Rufen Sie das Knotenobjekt mit der angegebenen ID im Dokument ab.

var element = document.getElementById('id');
getElementsByTagName

Nach dem Login kopieren

Erhalten Sie dynamisch eine Sammlung von Elementknoten mit angegebenen Tags (der Rückgabewert wird von DOM-Änderungen beeinflusst und sein Wert ändert sich). Diese Schnittstelle kann direkt über das Element abgerufen werden und muss nicht direkt auf das Dokument einwirken.

// 示例
var collection = element.getElementsByTagName('tagName');

// 获取指定元素的所有节点
var allNodes = document.getElementsByTagName('*');

// 获取所有 p 元素的节点
var elements = document.getElementsByTagName('p');
// 取出第一个 p 元素
var p = elements[0];

Nach dem Login kopieren

getElementsByClassName
Alle Knoten mit der angegebenen Klasse im angegebenen Element abrufen. Mehrere Klassenoptionen können unabhängig von der Reihenfolge durch Leerzeichen getrennt werden.
var elements = element.getElementsByClassName('className');
HINWEIS: IE9 und niedriger unterstützen getElementsByClassName
nicht Kompatible Methoden

function getElementsByClassName(root, className) {
 // 特性侦测
 if (root.getElementsByClassName) {
 // 优先使用 W3C 规范接口
 return root.getElementsByClassName(className);
 } else {
 // 获取所有后代节点
 var elements = root.getElementsByTagName('*');
 var result = [];
 var element = null;
 var classNameStr = null;
 var flag = null;

 className = className.split(' ');

 // 选择包含 class 的元素
 for (var i = 0, element; element = elements[i]; i++) {
  classNameStr = ' ' + element.getAttribute('class') + ' ';
  flag = true;
  for (var j = 0, name; name = className[j]; j++) {
  if (classNameStr.indexOf(' ' + name + ' ') === -1) {
   flag = false;
   break;
  }
  }
  if (flag) {
  result.push(element);
  }
 }
 return result;
 }
}

Nach dem Login kopieren

querySelector / querySelectorAll

Rufen Sie das erste Element oder alle Elemente einer Liste ab (das Rückgabeergebnis wird durch nachfolgende DOM-Änderungen nicht beeinflusst und ändert sich nach der Erfassung nicht), das mit dem eingehenden CSS-Selektor übereinstimmt.

var listElementNode = element.querySelector('selector');
var listElementsNodes = element.querySelectorAll('selector');

var sampleSingleNode = element.querySelector('#className');
var sampleAllNodes = element.querySelectorAll('#className');

Nach dem Login kopieren

HINWEIS: IE9 unterstützt querySelector und querySelectorAll nicht
Knoten erstellen

Knoten erstellen -> Eigenschaften festlegen -> Knoten einfügen

var element = document.createElement('tagName');

Nach dem Login kopieren

Knoten ändern

textContent
Ruft den Textinhalt des Knotens und seiner untergeordneten Knoten ab oder legt diesen fest (für den gesamten Textinhalt im Knoten).

element.textContent; // 获取
element.textContent = 'New Content';

Nach dem Login kopieren

HINWEIS: IE 9 und niedriger werden nicht unterstützt.
innerText (nicht W3C-kompatibel)
Ruft den Textinhalt des Knotens und seiner Nachkommen ab oder legt ihn fest. Es funktioniert fast identisch mit textContent.

element.innerText;

Nach dem Login kopieren

HINWEIS: Entspricht nicht den W3C-Spezifikationen und unterstützt den Firefox-Browser nicht.
FireFox-Kompatibilitätslösung

if (!('innerText' in document.body)) {
 HTMLElement.prototype.__defineGetter__('innerText', function(){
 return this.textContent;
 });
 HTMLElement.prototype.__defineSetter__('innerText', function(s) {
 return this.textContent = s;
 });
}

Nach dem Login kopieren

Knoten einfügen

appendChild

Fügen Sie einen Elementknoten innerhalb des angegebenen Elements hinzu.

var aChild = element.appendChild(aChild);

Nach dem Login kopieren

insertBefore

Fügen Sie das angegebene Element vor dem angegebenen Knoten des angegebenen Elements ein.

var aChild = element.insertBefore(aChild, referenceChild);

Nach dem Login kopieren

Knoten löschen

Löschen Sie die untergeordneten Elementknoten des angegebenen Knotens.

var child = element.removeChild(child);

Nach dem Login kopieren

innerHTML

Alle HTML-Inhalte im angegebenen Knoten abrufen oder festlegen. Ersetzt alle vorherigen internen Inhalte und erstellt einen völlig neuen Stapel von Knoten (wobei zuvor hinzugefügte Ereignisse und Stile entfernt werden). innerHTML prüft den Inhalt nicht, wird direkt ausgeführt und ersetzt den ursprünglichen Inhalt.
HINWEIS: Dies wird nur beim Erstellen eines brandneuen Knotens empfohlen. Darf nicht unter Benutzerkontrolle verwendet werden.

var elementsHTML = element.innerHTML;

Nach dem Login kopieren

存在的问题+

低版本 IE 存在内存泄露
安全问题（用户可以在名称中运行脚本代码）

PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，

//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点 
//使用appendChild()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true 
 
//使用insertBefore()方法插入节点 
var returnedNode = someNode.appendChild(newNode); 
alert(returnedNode == newNode) //true

Nach dem Login kopieren

值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 //var tt = a.cloneNode(true); 
 t.appendChild(a); 
</script>

Nach dem Login kopieren

在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。

<div id="test"> 
 <div>adscasdjk</div> 
  <div id="a">adscasdjk</div> 
</div> 
<script type="text/javascript"> 
 var t = document.getElementById("test"); 
 var a = document.getElementById('a'); 
 var tt = a.cloneNode(true); 
 t.appendChild(tt); 
</script>

Nach dem Login kopieren

相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。