Maison >interface Web >js tutoriel >Explication détaillée des étapes pour ajouter, supprimer et modifier des éléments JavaScript DOM

Explication détaillée des étapes pour ajouter, supprimer et modifier des éléments JavaScript DOM

php中世界最好的语言original: 2018-05-22 14:32:461343parcourir

Cette fois, je vous apporte une explication détaillée des étapes d'ajout, de suppression et de modification d'éléments DOM à l'aide de JavaScript Quelles sont les précautions pour ajouter, supprimer et modifier des éléments DOM JavaScript. Voici des cas pratiques, jetons un oeil.

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

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

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)

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

et getElementsByTagName. getElementsByClassName

Modifier l'élément

(1) Modifier le contenu

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

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>换行了";
}

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

HTML

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>

Ajouter et supprimer des éléments

(1)

CreateElementCréer un nœud d'élément

Crée un paragraphe CreateElement("p")

(2)

createTextNode Crée un nœud de texte

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

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

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>

Cette méthode consiste à trouver le nœud parent et le nœud à supprimer respectivement, puis exécutez l'opération de suppression. Une prémisse de 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 :

动态添加和动态删除，删除动态添加的奇数段落

思路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]);
    }
  }
}

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

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

导航

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>

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

Articles Liés

Voir plus