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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Explication détaillée de l'obtention des droits d'administrateur dans Win11
Mar 08, 2024 pm 03:06 PM
Le système d'exploitation Windows est l'un des systèmes d'exploitation les plus populaires au monde et sa nouvelle version Win11 a beaucoup attiré l'attention. Dans le système Win11, l'obtention des droits d'administrateur est une opération importante. Les droits d'administrateur permettent aux utilisateurs d'effectuer davantage d'opérations et de paramètres sur le système. Cet article présentera en détail comment obtenir les autorisations d'administrateur dans le système Win11 et comment gérer efficacement les autorisations. Dans le système Win11, les droits d'administrateur sont divisés en deux types : administrateur local et administrateur de domaine. Un administrateur local dispose de tous les droits d'administration sur l'ordinateur local
Recommandé : Excellent projet de détection et de reconnaissance des visages open source JS
Apr 03, 2024 am 11:55 AM
La technologie de détection et de reconnaissance des visages est déjà une technologie relativement mature et largement utilisée. Actuellement, le langage d'application Internet le plus utilisé est JS. La mise en œuvre de la détection et de la reconnaissance faciale sur le front-end Web présente des avantages et des inconvénients par rapport à la reconnaissance faciale back-end. Les avantages incluent la réduction de l'interaction réseau et de la reconnaissance en temps réel, ce qui réduit considérablement le temps d'attente des utilisateurs et améliore l'expérience utilisateur. Les inconvénients sont les suivants : il est limité par la taille du modèle et la précision est également limitée ; Comment utiliser js pour implémenter la détection de visage sur le web ? Afin de mettre en œuvre la reconnaissance faciale sur le Web, vous devez être familier avec les langages et technologies de programmation associés, tels que JavaScript, HTML, CSS, WebRTC, etc. Dans le même temps, vous devez également maîtriser les technologies pertinentes de vision par ordinateur et d’intelligence artificielle. Il convient de noter qu'en raison de la conception du côté Web
Explication détaillée du fonctionnement de la division dans Oracle SQL
Mar 10, 2024 am 09:51 AM
Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL
Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP
Mar 19, 2024 pm 04:33 PM
L'opérateur modulo (%) en PHP est utilisé pour obtenir le reste de la division de deux nombres. Dans cet article, nous discuterons en détail du rôle et de l'utilisation de l'opérateur modulo et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre. 1. Le rôle de l'opérateur modulo En mathématiques, lorsqu'on divise un entier par un autre entier, on obtient un quotient et un reste. Par exemple, lorsque l’on divise 10 par 3, le quotient est 3 et le reste est 1. L'opérateur modulo est utilisé pour obtenir ce reste. 2. Utilisation de l'opérateur modulo En PHP, utilisez le symbole % pour représenter le module
Explication détaillée de la fonction d'appel système Linux system()
Feb 22, 2024 pm 08:21 PM
Explication détaillée de la fonction d'appel système Linux system() L'appel système est une partie très importante du système d'exploitation Linux. Il fournit un moyen d'interagir avec le noyau système. Parmi elles, la fonction system() est l’une des fonctions d’appel système couramment utilisées. Cet article présentera en détail l’utilisation de la fonction system() et fournira des exemples de code correspondants. Concepts de base des appels système Les appels système sont un moyen permettant aux programmes utilisateur d'interagir avec le noyau du système d'exploitation. Les programmes utilisateur demandent au système d'exploitation en appelant des fonctions d'appel système
Explication détaillée de la commande Linux curl
Feb 21, 2024 pm 10:33 PM
Explication détaillée de la commande curl de Linux Résumé : curl est un puissant outil de ligne de commande utilisé pour la communication de données avec le serveur. Cet article présentera l'utilisation de base de la commande curl et fournira des exemples de code réels pour aider les lecteurs à mieux comprendre et appliquer la commande. 1. Qu’est-ce que la boucle ? curl est un outil de ligne de commande utilisé pour envoyer et recevoir diverses requêtes réseau. Il prend en charge plusieurs protocoles, tels que HTTP, FTP, TELNET, etc., et fournit des fonctions riches, telles que le téléchargement de fichiers, le téléchargement de fichiers, la transmission de données, le proxy.
Analyse détaillée du parcours d'apprentissage du langage C
Feb 18, 2024 am 10:38 AM
En tant que langage de programmation largement utilisé dans le domaine du développement de logiciels, le langage C est le premier choix de nombreux programmeurs débutants. L'apprentissage du langage C peut non seulement nous aider à acquérir des connaissances de base en programmation, mais également à améliorer nos capacités de résolution de problèmes et de réflexion. Cet article présentera en détail une feuille de route d'apprentissage du langage C pour aider les débutants à mieux planifier leur processus d'apprentissage. 1. Apprendre la grammaire de base Avant de commencer à apprendre le langage C, nous devons d'abord comprendre les règles de grammaire de base du langage C. Cela inclut les variables et les types de données, les opérateurs, les instructions de contrôle (telles que les instructions if,
La relation entre js et vue
Mar 11, 2024 pm 05:21 PM
La relation entre js et vue : 1. JS comme pierre angulaire du développement Web ; 2. L'essor de Vue.js en tant que framework front-end ; 3. La relation complémentaire entre JS et Vue ; Vue.
