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>Nach dem Login kopieren
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 = '单标签试一试')
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>Nach dem Login kopieren
jQuery:
HTML-Inhalt des Knotens lesen und schreiben (unterstützt). Untertags): Entspricht Punkt 2 des obigen js
obj.html()/obj.html("123")
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>Nach dem Login kopieren
jQuert:
Knoten erstellen:
$("node content");
$( "Hallo")
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!
