Heim >Web-Frontend >js-Tutorial >Eine ausführliche Erklärung der DOM-Knotennavigation in JavaScript
Eine ausführliche Erklärung der DOM-Knotennavigation in JavaScript
- 藏色散人nach vorne
- 2022-08-06 16:49:561685Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von DOM-Knoten zum Abrufen von Seitenelementen vorgestellt. Alles im Seitendokument ist ein Knoten: einschließlich Elementknoten, Textknoten, Attributknoten, Dokumentknoten und Kommentarknoten. Im Folgenden werden zwei Hauptmethoden zum Abrufen von Knoten beschrieben:
(1) Knoten abrufen (einschließlich aller Knoten wie Textknoten, Elementknoten usw.)
1.parentNode: Den übergeordneten Knoten abrufen
2. childNodes: Untergeordnete Knoten abrufen, jeden untergeordneten Knoten über den Indexwert abrufen
3.firstChild: Den ersten untergeordneten Knoten des übergeordneten Knotens abrufen
4.lastChild: Den letzten untergeordneten Knoten des übergeordneten Knotens abrufen
5.nextSibling : Holen Sie sich den nächsten benachbarten untergeordneten Knoten. Ein Geschwisterknoten.
6. previousSibling: Holen Sie sich den vorherigen Geschwisterknoten neben dem untergeordneten Knoten.
7.attributes: Holen Sie sich den Attributknoten 1.parentElement: Den übergeordneten Elementknoten abrufen
2.children: Den untergeordneten Elementknoten abrufen, jeden untergeordneten Elementknoten über den Indexwert abrufen3.firstElementChild: Den ersten untergeordneten Elementknoten des übergeordneten Elements abrufen
4.lastElementChild : Den letzten untergeordneten Elementknoten des übergeordneten Elements abrufen
5.nextElementSibling: Den angrenzenden nächsten Geschwisterelementknoten abrufen
6. previousElementSibling: Den angrenzenden vorherigen Geschwisterelementknoten abrufen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>由节点关系获取元素</title>
<style>
</style>
</head>
<body>
<div name="div1">
<p name='p1'>文本节点</p>
<p>2</p>
<ul>
<li>3</li>
<li id="li4">4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<section>7</section>
<main><span>8</span><i>9</i></main>
<script>
//注意换行和空格也属于结点，属于文本节点，按节点关系访问时需要考虑。属性节点无须考虑。
//1. parentNode获取div
console.log(document.querySelector('p').parentNode);
console.log(document.querySelector('p').parentNode.attributes[0]);
console.log(document.querySelector('p').parentNode.nodeName); //DIV
console.log(document.querySelector('p').parentNode.nodeValue); //null
console.log(document.querySelector('p').parentNode.nodeType); //1 元素节点
// 2.通过childNodes获取第一个p
console.log(document.querySelector('div').childNodes[1]);
console.log(document.querySelector('div').childNodes[1].firstChild.nodeName);
console.log(document.querySelector('div').childNodes[1].firstChild.nodeType); //2 文本节点
console.log(document.querySelector('div').childNodes[1].firstChild.nodeValue);
// 3.firstChild获取main中的第一个子节点
console.log(document.querySelector('main').firstChild);
// 4.lastChild获取main中的最后一个子节点
console.log(document.querySelector('main').lastChild);
// 5.nextSibling获取相邻下一个兄弟元素
console.log(document.querySelector('#li4').nextSibling.nextSibling);
// 6.previousSibling获取相邻上一个兄弟元素
console.log(document.querySelector('#li4').previousSibling.previousSibling);
// 总结：除parentNode外，其他方法谨慎选择，一旦代码格式有变，就会出现错误
// 通过nodeName获取节点名称
//通过nodeValue获取节点值
// 通过nodeType返回节点类型
</script>
</body>
</html>Verwandte Empfehlungen: [
JavaScript-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung der DOM-Knotennavigation in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!