Zusammenfassung der JavaScript-Knoten- und Listenoperationsbeispiele_Javascript-Kenntnisse

Die Beispiele in diesem Artikel fassen die Methoden von JavaScript-Knoten- und Listenoperationen zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

(1) Neuen Knoten erstellen

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

(2) Hinzufügen, entfernen, ersetzen, einfügen

appendChild()
removeChild()
replaceChild()
insertBefore()

(3) Suchen

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

HTML-Beispiele zur Verwendung in diesem Abschnitt

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

1. Elementknoten erstellen

Die Methode document.createElement() wird zum Erstellen von Elementen verwendet, akzeptiert einen Parameter, nämlich den Tag-Namen des zu erstellenden Elements, und gibt den erstellten Elementknoten zurück

var div = document.createElement("div"); //创建一个div元素
div.id = "myDiv"; //设置div的id
div.className = "box"; //设置div的class

Nachdem Sie das Element erstellt haben, müssen Sie es auch zum Dokumentenbaum hinzufügen

2. Elementknoten hinzufügen

Die Methode appendChild() wird verwendet, um einen Knoten am Ende der childNodes-Liste hinzuzufügen, und gibt den hinzuzufügenden Elementknoten zurück

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML = "项目四"; //向li内添加文本
ul.appendChild(li); //把li 添加到ul子节点的末尾

Nach dem Hinzufügen:

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>

Die appendChild()-Methode kann auch ein vorhandenes Element hinzufügen und das Element von seiner ursprünglichen Position an eine neue Position verschieben

var ul = document.getElementById("myList"); //获得ul
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

Nach dem Laufen (IE):

<ul id="myList">
<li>项目二</li>
<li>项目三</li>
<li>项目一</li>
</ul>

insertBefore()-Methode: Wenn Sie den Knoten nicht am Ende einfügen, sondern an einer bestimmten Position platzieren möchten, verwenden Sie diese Methode. Diese Methode akzeptiert 2 Parameter, der erste ist der einzufügende Knoten und der Der zweite ist der Referenzknoten und gibt den hinzuzufügenden Elementknoten zurück

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前

Nach dem Hinzufügen:

<ul id="myList">
<li>项目四</li>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾

Nach dem Hinzufügen:

<ul id="myList">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>

var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前

Nach dem Hinzufügen:

<ul id="myList">
<li>项目一</li>
<li>项目四</li>
<li>项目二</li>
<li>项目三</li>
</ul>

3. Elementknoten entfernen

Die

removeChild()-Methode, die zum Entfernen von Knoten verwendet wird, akzeptiert einen Parameter, nämlich den zu entfernenden Knoten, und gibt den entfernten Knoten zurück. Beachten Sie, dass sich der entfernte Knoten noch im Dokument befindet, seine Position jedoch nicht mehr Dokument.

var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
var ul = document.getElementById("myList"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异

4. Elementknoten ersetzen

replaceChild()-Methode, die zum Ersetzen von Knoten verwendet wird, akzeptiert zwei Parameter, der erste Parameter ist der einzufügende Knoten, der zweite Parameter ist der zu ersetzende Knoten und gibt den ersetzten Knoten zurück

var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
var ul = document.getElementById("myList"); //获得ul;
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li

5. Knoten kopieren

cloneNode()-Methode, die zum Kopieren von Knoten verwendet wird, akzeptiert einen booleschen Parameter, true bedeutet tiefe Kopie (Kopieren des Knotens und aller seiner untergeordneten Knoten), false bedeutet flache Kopie (kopieren Sie den Knoten selbst, nicht die untergeordneten Knoten)

var ul = document.getElementById("myList"); //获得ul
var deepList = ul.cloneNode(true); //深复制
var shallowList = ul.cloneNode(false); //浅复制

Das Folgende ist ein vollständiges Beispiel für die Erstellung eines Listenprojekts mit JavaScript und das Kopieren untergeordneter Knoten:

Dieser JavaScript-Code zeigt Listenelemente an und erstellt sie, kopiert untergeordnete Knoten und kopiert Knotenbäume. Dies ist ein sehr nützliches Beispiel, insbesondere beim Erstellen von Baummenüs.

Der Betriebseffekt ist wie folgt:

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>建立列表项目</title>
<script language="JavaScript">
function printChilds(objNode) {
  var strMsg = "节点名称 =" + objNode.nodeName + "\n";
  if (objNode.hasChildNodes()){
   var nodeCount = objNode.childNodes.length;
   strMsg += "子节点数 = " + objNode.childNodes.length + "\n";
   for(var i = 0; i < nodeCount; i++)
     strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n";
   alert(strMsg);
  }
}
function copyNode(objNode, objDupNode, deep){
  var tempNode = objDupNode.cloneNode(deep);
  objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表项目</h2>
<hr>
<ul id="myUL">
  <li>项目1
  <li>项目2
   <ol id="myOL">
     <li>次项目1
     <li>次项目2
   </ol>
  <li>项目3
</ul>
<form>
<input type="button" value="显示列表的子节点" onclick="printChilds(myUL)">
<input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.