Cet article vous explique principalement comment faire fonctionner DOM avec JS et JQuery, principalement en utilisant du code. J'espère qu'il pourra vous aider.
Nœud de requête :
js : 1. Requête basée sur l'ID ; 2. Requête basée sur le nom de la balise ; 3. Requête basée sur le nom 4. La requête basée sur le niveau ; :
<script>
//1.根据ID查询节点
var ul = document.getElementById("city");
var cd = document.getElementById("cd");
console.log(ul);
console.log(cd);
//2.根据标签名查询节点
//2.1在整个文档（document）内查询
console.log(document.getElementsByTagName("li"));
//2.2在某个元素节点（element）内查询
console.log(ul.getElementsByTagName("li"));
//3.根据name查询节点（基本都是给表单控件用的）
console.log(document.getElementsByName("sex"));
//4.根据层次查询节点
//获取已得到的节点的父亲、孩子和兄弟
//4.1获取父亲,返回的是单个值
console.log(cd.parentNode);
//4.2获取孩子，返回的是多个值
//这种方式返回的节点是个数组，并且会把空格当做孩子放入数组中
console.log(ul.childNodes);
//不带空格的获取孩子的节点
console.log(ul.getElementsByTagName("li"));
//标准API中没有直接查询兄弟的方法，
//必须通过查询父亲、查询孩子来实现查询兄弟,
//下面的语句输出：上海
console.log(cd.parentNode.getElementsByTagName("li")[1]);
</script>Copier après la connexion
jQuery : utilisez le sélecteur jQuery directement pour sélectionner des éléments et effectuer des opérations ; veuillez consulter un autre article : sélecteur jQuery https://blog.csdn.net/huang_yx/article/details/79686975 ( cliquez pour ouvrir le lien )
Lire et écrire des nœuds :
js : grossièrement divisé en : 1. Lire et écrire les noms et types de nœuds 2. Lire et écrire le contenu des nœuds ; et écrire les attributs du nœud ; 4. Lire et écrire La valeur du contrôle de formulaire ; les détails sont les suivants :
<script>
//1.读取节点的名称和类型
//获取p1
var p1 =document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
//2.读写节点的内容（<p>内容</p>）
//innerHTML:支持子标签
console.log(p1.innerHTML)
console.log(p1.innerHTML = '单标签试一试')
console.log(p1.innerHTML)
//innerText:不支持子标签
var p2 = document.getElementById("p2");
console.log(p2.innerText);
p2.innerText = "2.<u>查询</u>节点";
//3.读写节点的属性
//3.1.标准的API是下面的三个
//先取到这个节点
var img = document.getElementById("li");
console.log(img.getAttribute("src"));
img.setAttribute("src", "../img/add.png");
img.removeAttribute("src");
//3.2.新的API(低版本浏览器不支持)
//节点.属性名（class除外，要写成className）
//注意点：.style和.className是标准的
var a = document.getElementById("baidu");
console.log(a.href);
a.href = "undifined";
//4.读写表单控件的值
//input.value/input.value=""
</script>Copier après la connexion
jQuery :
Lire et écrire le contenu HTML du nœud (prend en charge sub-tags) : Correspond au point 2 du js ci-dessus
obj.html()/obj.html("123")
Lire et écrire le contenu texte du nœud (les sous-balises ne sont pas supportées) : Correspond au point 2 du js ci-dessus
obj.text()/obj.text("123")
Lire et écrivez la valeur d'attribut du nœud : correspondant au troisième point de js ci-dessus
obj.attr("Attribute name")/obj.val("Attribute name", "Attribute value")
Lire et écrire la valeur de l'attribut value du nœud : Correspondant au 4ème point de js ci-dessus
obj.val()/obj .val("abc")
Remarque : obj représente un objet jQuery
Ajouter et supprimer des nœuds : JS ne peut ajouter et supprimer des nœuds que via le nœud parent, mais jQuery est beaucoup plus pratique et possède de nombreuses API correspondantes
js :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>增删节点</title>
<script>
function add(){
//创建新节点
//相当于在内存中创建了一个<li></li>
var li = document.createElement("li");
//相当于在<li>中创建了一个内容
li.innerHTML = "天津";
//追加新节点,可以通过父亲的孩子获取，也可以直接通过ID获取
var ul = document.getElementById("city");
ul.appendChild(li);
}
//插入到节点中间
function insertion(){
//创建新节点
var li = document.createElement("li");
li.innerHTML = "成都";
//插入新节点,到广州之前
var ul = document.getElementById("city");
var gz = document.getElementById("gz");
ul.insertBefore(li, gz)
}
//删除节点,必须通过父亲来删除
function del(){
//获取要删除的节点
var sz = document.getElementById("sz");
//必须通过父亲才能取删除孩子的节点
sz.parentNode.removeChild(sz);
}
</script>
</head>
<body>
<p>
<input type="button" value="增加"
onclick="add();"/>
<input type="button" value="插入"
onclick="insertion()"/>
<input type="button" value="删除"
onclick="del()"/>
</p>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
</body>
</html>Copier après la connexion
jQuert :
Créer un nœud :
$("contenu du nœud");
$( "Bonjour")
Insérer un nœud : API commune
parent.append(obj) : Ajouter comme dernier nœud enfant
parent.prepend(obj) : Ajouté comme premier nœud enfant
brother.after(obj) : ajouté comme nœud frère suivant
brother.before(obj) : comme le nœud frère précédent est ajouté
Supprimer le nœud : API commune
obj.remove() : Supprimer le nœud
obj.remove(selector) : Supprimer uniquement les nœuds qui satisfont au sélecteur
obj.empty() : Effacer les nœuds
Traverser les nœuds : quelques API correspondant à jQuery pour faciliter les opérations sur les nœuds
children()/children(selector) : nœuds enfants directs
next()/next(selector) : prochain frère node
prev()/prev(selector) : frère précédent node
siblings()/siblings( selector) : Tous les frères
find(selector) : Rechercher tous les descendants qui satisfont le sélecteur
parent() : Nœud parent
Résumé :
js Les opérations sur les nœuds avec jQuery ne sont rien d'autre que l'ajout, la suppression, la modification et la vérification, mais jQuery est un framework js, et son concept de base est le suivant : écrivez moins, faites plus ; cela simplifie grandement l'écriture de code. Il encapsule JS, CSS et DOM et fournit une API cohérente et simple, plus pratique et plus rapide à utiliser, et la méthode d'écriture correspondante est également plus simple.
Recommandations associées :
Comment faire fonctionner les éléments DOM dans js
Explication détaillée du flux d'événements DOM dans js
DOM optimisé pour JavaScript
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)
