Résumé des exemples d'opérations de nœud et de liste JavaScript_compétences Javascript

Les exemples de cet article résument les méthodes d'opérations de nœuds et de listes JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

(1) Créer un nouveau nœud

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

(2) Ajouter, supprimer, remplacer, insérer

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

(3) Recherche

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

Exemples HTML à utiliser dans cette section

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

1. Créer un nœud d'élément

La méthode document.createElement() est utilisée pour créer des éléments, accepte un paramètre, qui est le nom de la balise de l'élément à créer, et renvoie le nœud de l'élément créé

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

Après avoir créé l'élément, vous devez également ajouter l'élément à l'arborescence du document

2. Ajouter un nœud d'élément

La méthode appendChild() est utilisée pour ajouter un nœud à la fin de la liste childNodes et renvoie le nœud d'élément à ajouter

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

Après avoir ajouté :

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

La méthode appendChild() peut également ajouter un élément existant et déplacer l'élément de sa position d'origine vers une nouvelle position

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

Après l'exécution (IE) :

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

Méthode insertBefore(), si vous n'insérez pas le nœud à la fin, mais souhaitez le placer à une position précise, utilisez cette méthode. Cette méthode accepte 2 paramètres, le premier est le nœud à insérer, et le. le second est le nœud de référence, renvoie le nœud d'élément à ajouter

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

Après avoir ajouté :

<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的子节点末尾

Après avoir ajouté :

<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节点前

Après avoir ajouté :

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

3. Supprimer le nœud d'élément

La méthode RemoveChild(), utilisée pour supprimer des nœuds, accepte un paramètre, qui est le nœud à supprimer, et renvoie le nœud supprimé. Notez que le nœud supprimé est toujours dans le document, mais sa position n'est plus dans le document. documenter

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. Remplacer le nœud d'élément

La méthode replaceChild(), utilisée pour remplacer des nœuds, accepte deux paramètres, le premier paramètre est le nœud à insérer, le deuxième paramètre est le nœud à remplacer et renvoie le nœud remplacé

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. Copier le nœud

La méthode cloneNode(), utilisée pour copier des nœuds, accepte un paramètre booléen, true signifie copie complète (copier le nœud et tous ses nœuds enfants), false signifie copie superficielle (copier le nœud lui-même, pas copier les nœuds enfants)

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

Ce qui suit est un exemple complet de création d'un projet de liste à l'aide de JavaScript et de copie de nœuds enfants :

Ce code JavaScript affiche et crée des éléments de liste, copie les nœuds enfants et copie les arborescences de nœuds. C'est un exemple très utile, particulièrement utile lors de la création de menus arborescents.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant :

<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>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.