Heim > Artikel > Web-Frontend > Methoden zur Manipulation von DOM zwischen JS und JQuery

Methoden zur Manipulation von DOM zwischen JS und JQuery

小云云Original: 2018-03-26 17:17:341189Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie DOM mit JS und JQuery betreiben, hauptsächlich mithilfe von Code. Ich hoffe, er kann Ihnen helfen.

Abfrageknoten:

js: 1. Abfrage basierend auf der ID; 2. Abfrage basierend auf dem Namen; 4. Abfrage basierend auf der Ebene; :

<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: Verwenden Sie den jQuery-Selektor direkt, um Elemente auszuwählen und Operationen auszuführen. Bitte lesen Sie einen anderen Artikel: jQuery-Selektor https://blog.csdn.net/huang_yx/article/details/79686975 ( Klicken Sie, um den Link zu öffnen.

Knoten lesen und schreiben:

js: grob unterteilt in: 1. Knotennamen und -typen lesen und schreiben; 2. Knoteninhalt lesen und schreiben; und Knotenattribute schreiben; 4. Der Wert des Formularsteuerelements lautet wie folgt:

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

HTML-Inhalt des Knotens lesen und schreiben (unterstützt). Untertags): Entspricht Punkt 2 des obigen js

obj.html()/obj.html("45a2772a6b6107b401db3c9b82c049c212354bdf357c58b8a65c66d7c19c8e4d114")

Lesen und schreiben der Textinhalt des Knotens (Untertags werden nicht unterstützt): Entspricht Punkt 2 des obigen js

obj.text()/obj.text("123")

Lesen und schreiben Sie den Attributwert des Knotens: entsprechend dem dritten Punkt von js oben

obj.attr("Attribute name")/obj.val("Attribute name", "Attribute value")

Lesen und schreiben Sie den Wertattributwert des Knotens: Entspricht dem 4. Punkt von js oben

obj.val()/obj .val("abc")

Hinweis: obj stellt ein jQuery-Objekt dar

Knoten hinzufügen und löschen: JS kann Knoten nur über den übergeordneten Knoten hinzufügen und löschen, aber jQuery ist viel praktischer und verfügt über viele entsprechende APIs

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:

Knoten erstellen:

$("node content");

$( "45a2772a6b6107b401db3c9b82c049c2Hallo54bdf357c58b8a65c66d7c19c8e4d114")

Knoten einfügen: Gemeinsame API

parent.append(obj): Als letzten untergeordneten Knoten hinzufügen

parent.prepend(obj): Als ersten untergeordneten Knoten hinzugefügt

brother.after(obj): Als nächster Geschwisterknoten hinzugefügt

brother.before(obj): Als Der vorherige Geschwisterknoten wurde hinzugefügt

Knoten löschen: Gemeinsame API

obj.remove(): Knoten löschen

obj.remove(selector): Nur Knoten löschen, die den Selektor erfüllen

obj.empty(): Knoten löschen

Knoten durchqueren: Einige APIs entsprechen jQuery, um Knotenoperationen zu erleichtern

children()/children(selector): direkte untergeordnete Knoten

next()/next(selector): nächster Geschwisterknoten Knoten

prev()/prev(selector): vorheriger Geschwisterknoten

siblings()/siblings( selector): Alle Brüder

find(selector): Alle Nachkommen finden die den Selektor erfüllen

parent(): Parent node

Zusammenfassung:

js Die Operationen an Knoten mit jQuery sind nichts anderes als das Hinzufügen, Löschen, Ändern und Überprüfen, Aber jQuery ist ein js-Framework und sein Kernkonzept lautet: Weniger schreiben, mehr tun; es vereinfacht das Schreiben von Code erheblich. Es kapselt JS, CSS und DOM und bietet eine konsistente und einfache API, die bequemer und schneller zu verwenden ist, und die entsprechende Schreibmethode ist ebenfalls einfacher.

Verwandte Empfehlungen:

So bedienen Sie DOM-Elemente in js

Detaillierte Erläuterung des DOM-Ereignisflusses in js

JavaScript-optimiertes DOM

Das obige ist der detaillierte Inhalt vonMethoden zur Manipulation von DOM zwischen JS und JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung und Austausch der grundlegenden Wissenspunkte von jsNächster Artikel：Zusammenfassung und Austausch der grundlegenden Wissenspunkte von js

In Verbindung stehende Artikel

Mehr sehen