Explication détaillée des opérations courantes d'ajout, de suppression, de modification et de requête des éléments JS DOM-js tutoriel-php.cn

Cette fois, je vais vous apporter une explication détaillée des opérations courantes d'ajout, de suppression, de modification et de recherche d'éléments JS DOM Quelles sont les précautions pour les opérations courantes d'ajout, de suppression, de modification et de recherche de. Éléments JS DOM Ce qui suit est un cas pratique, jetons un coup d'œil.

Concept DOM

DOM (Document Object Model) : Modèle Objet de Document.

Vous pouvez le visualiser via l'onglet Éléments des outils de développement

Vous pouvez également observer que l'ensemble du document comporte une série de nœuds via l'onglet Sources des outils de développement

L'ensemble du document est composé d'un arbre composé d'une série d'objets nœuds.

Le nœud (Node) comprend le nœud d'élément (1), le nœud d'attribut (2), le nœud de texte (3) (1..2..3.. représente le type de nœud)_

var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);

Copier après la connexion

th1 représente un nœud d'élément (nodeType=1), nodeName est le nom de l'étiquette (th) et nodeValue=null du nœud d'élément.

var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);

Copier après la connexion

La méthode getAttributeNode consiste à obtenir le nœud d'attribut de l'élément à ce stade, le type de nœud de sortie est le nœud d'attribut (2), le nom du nœud est le nom de l'attribut (nom) et la valeur du nœud est la valeur de l'attribut (sexe)

var txtl = th1.firstChild；
alert(txtl.nodeType);
alert(txtl.nodeName);
alert(txtl.nodeValue)

Copier après la connexion

txt1 est un nœud de texte (3), le nom du nœud est fixé sur #text et la valeur du nœud est le contenu du texte.

Obtenir l'élément

(1)getElementByid

Obtenez l'élément en fonction de l'attribut id de l'élément Ce que vous. get est un élément.

(2)getElementsByTagName

Obtenez des éléments en fonction des noms de balises, et le résultat est une collection d'éléments.

(3)getElementsByClassName

Obtenez des éléments en fonction de l'attribut de classe, et le résultat est une collection d'éléments.

(4)getElementsByName

Obtenez des éléments en fonction de l'attribut name, et le résultat est une collection d'éléments.

Résumé : L'obtention d'éléments peut être obtenue en fonction du nom de la balise ou en fonction de l'identifiant, du nom et des attributs de classe. Le résultat obtenu en fonction de l'attribut id est un élément, tandis que les autres résultats sont une collection.

L'objet document prend en charge les quatre types ci-dessus, tandis que l'objet élément ne prend en charge que getElementsByTagName et getElementsByClassName.

Modifier l'élément

(1) Modifier le contenu

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerText = "我被单击了！";
}

Copier après la connexion

Le texte du contenu de l'étiquette peut être lu ou défini via l'attribut .innerText

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerHTML = "我被单击了！<br>换行了";
}

Copier après la connexion

Vous pouvez également obtenir ou définir le texte du contenu via l'attribut innerHTML

La différence entre les deux : innerHTML analysera le texte selon les règles HTML, tandis que innerText le traitera simplement comme du contenu textuel ordinaire.

(1) Modifier le style

A. xxx. style.Attribute name="valeur"

B． xxx. classname="..." (équivalent à modifier les attributs de la classe)

<style>
    .style1{
      color:red;
      font-size:20px;
      text-decoration:underline;
    }
    .style2{
      color:blue;
      font-size:32px;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
<p id="p1">修改样式测试</p>
<input type="button"value="样式一"onclick="style1()">
<input type="button"value="样式二"onclick="style2()">
</body>
<script>
  var p1 = document.getElementById("p1");
  function style1(){
    p1.className = "style1"
  }
  function style2(){
    p1.className = "style2"
  }
</script>
</html>

Copier après la connexion

Ajouter et supprimer des éléments

(1)CreateElementCréer un nœud d'élément

CreateElement("p")Crée un paragraphe

(2) createTextNode Crée un nœud de texte

createTextNode("文本内容"), crée une valeur du nœud de texte "Contenu texte".

(3)appendChildAjouter un nœud enfant

(4)removeChild Supprimer le nœud enfant

Ajout dynamique

<body>
<p id="p1">
</p>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局变量
  var index = 1;
  function add(){
    //创建一个段落标签
    var p = document.createElement("p");
    //创建文本节点
    var content= "第"+index+"段落";
    var txt = document.createTextNode(content);
    //创建文本节点添加的段落
    p.appendChild(txt);
    //将段落添加到p中
    var p1 = document.getElementById("p1");
    p1.appendChild(p);
    index++
  }
</script>

Copier après la connexion

Suppression dynamique

<body>
<p id="p1">
  <p id="p1">第1段落 </p>
  <p id="p2">第2段落 </p>
  <p id="p3">第3段落 </p>
  <p id="p4">第4段落 </p>
</p>
<input type="button"value="删除第二段"onclick="del()">
</body>
<script>
  function del(){
    //先找到父节点
    var p1 = document.getElementById("p1");
    //再找到要删除的节点
    var p2 = document.getElementById("p2");
    //将要删除的节点从父节点中移除
    p1.removeChild(p2);
  }
</script>
</html>

Copier après la connexion

Cette méthode consiste à trouver le nœud parent et le nœud à supprimer respectivement, puis exécutez l'opération de suppression. Un prérequis pour cette méthode est de savoir qui est le nœud parent

Donc si vous ne savez pas qui est le nœud parent, comment le supprimer

p2.parentNode.removeChild(p2);

Cette méthode ne fonctionne pas. Qui a besoin du nœud parent ?

Ajout et suppression dynamiques :

Ajout dynamique et suppression dynamique, supprime les paragraphes impairs ajoutés dynamiquement

思路1：获取p1 下的所以段落，遍历所以的段落，将序号为奇数的段落删除。

function del(){
  var p1 = document.getElementById("p1");
  var paras = p1.getElementsByTagName("p");
  for(var i in paras){
    if((i+1)%2 == 1){
      p1.removeChild(paras[i]);
    }
  }
}

Copier après la connexion

这种在初始时是可以的,但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判

思路2：添加通过设置class属性，然后通过getElementsByclassName来获取奇数行

（也可以从后往前删）

<body>
<p id="p1">
</p>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="删除奇数第二段" onclick="de1()">
</body>
<script>
  var index = 1;
  function add(){
    //创建一个段落标签
    var p = document.createElement("p");
    //创建文本节点
    var content = "第" + index + "段落";
    var txt = document.createTextNode(content);
    //将文本节点添加到段落
    p.appendChild(txt);
    if (index % 2 == 1) {
      p.setAttribute("class","odd");
    }
    //将段落添加到p中
    var p1 = document.getElementById("p1");
    p1.appendChild(p);
    index++;
  }
  /*function de1(){
   var p1 = document.getElementById("p1");
   var paras =p1.getElementsByTagName("p");
   for(var i in paras){
   if((i+1)%2 == 1){
   p1.removeChild(paras[i]);
   }
   }
   }*/
  functionde1() {
    var p1 = document.getElementById("p1");
    var paras = p1.getElementsByClassName("odd");
//    varparas = document.getElementsByName("odd");
    for (var i = paras.length - 1; i >= 0; i--) {
      p1.removeChild(paras[i]);
    }
  }
</script>
</html>

Copier après la connexion

导航

Document：是根节点

ParentNode：获取父节点

childNodes：获取所有子节点

firstChild：第一个子节点

lastChlid：获取最后一个子节点

</head>
<body>
<p name="第一章">
   <p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</p>
<input type="button"value="获取父节点的name属性"onclick="fun1()">
<input type="button"value="显示p1子节点的个数"onclick="fun2()">
<input type="button"value="显示p1第一个子节点的类型"onclick="fun3()">
<input type="button"value="显示p1最后一个子节点的类型"onclick="fun4()">
</body>
<script>
var p1 =document.getElementById("p1");
function fun1(){
  var value=p1.parentNode.getAttribute("name");
  alert(value);
}
function fun2(){
  var chlids = p1.childNodes;
  alert(chlids.length)
}
function fun3(){
  alert(p1.firstChild.nodeType);
}
function fun4(){
  alert(p1.lastChild.nodeType);
}
</script>
</html>

Copier après la connexion

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！