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éveloppementVous pouvez également observer que l'ensemble du document comporte une série de nœuds via l'onglet Sources des outils de développementL'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);var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);var txtl = th1.firstChild； alert(txtl.nodeType); alert(txtl.nodeName); alert(txtl.nodeValue)
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)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 contenufunction fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerText = "我被单击了！";
}
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerHTML = "我被单击了！<br>换行了";
}<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")
createTextNode Crée un nœud de texte
, crée une valeur du nœud de texte "Contenu texte".createTextNode("文本内容")
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>p2.parentNode.removeChild(p2);
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中文网其它相关文章！
推荐阅读：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
