Maison > Article > interface Web > Méthodes de manipulation du DOM entre JS et JQuery

Méthodes de manipulation du DOM entre JS et JQuery

小云云original: 2018-03-26 17:17:341189parcourir

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>

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 = &#39;单标签试一试&#39;)
	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>

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("45a2772a6b6107b401db3c9b82c049c212354bdf357c58b8a65c66d7c19c8e4d114")

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>

jQuert :

Créer un nœud :

$("contenu du nœud");

$( "45a2772a6b6107b401db3c9b82c049c2Bonjour54bdf357c58b8a65c66d7c19c8e4d114")

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!

JavaScript jquery css less html 封装 .net append JS 对象事件 dom 选择器 https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé et partage des points de connaissances de base de jsArticle suivant：Résumé et partage des points de connaissances de base de js

Articles Liés

Voir plus