Eine ausführliche Erklärung der DOM-Knotennavigation in JavaScript-js-Tutorial-php.cn

Eine ausführliche Erklärung der DOM-Knotennavigation in JavaScript

藏色散人

Freigeben： 2022-08-06 16:49:56

nach vorne

1713 Leute haben es durchsucht

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=&#39;p1&#39;>文本节点</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(&#39;p&#39;).parentNode);
        console.log(document.querySelector(&#39;p&#39;).parentNode.attributes[0]);
        console.log(document.querySelector(&#39;p&#39;).parentNode.nodeName); //DIV
        console.log(document.querySelector(&#39;p&#39;).parentNode.nodeValue); //null
        console.log(document.querySelector(&#39;p&#39;).parentNode.nodeType); //1 元素节点
        // 2.通过childNodes获取第一个p
        console.log(document.querySelector(&#39;div&#39;).childNodes[1]);
        console.log(document.querySelector(&#39;div&#39;).childNodes[1].firstChild.nodeName);
        console.log(document.querySelector(&#39;div&#39;).childNodes[1].firstChild.nodeType); //2 文本节点
        console.log(document.querySelector(&#39;div&#39;).childNodes[1].firstChild.nodeValue);
        // 3.firstChild获取main中的第一个子节点
        console.log(document.querySelector(&#39;main&#39;).firstChild);
        // 4.lastChild获取main中的最后一个子节点
        console.log(document.querySelector(&#39;main&#39;).lastChild);
        // 5.nextSibling获取相邻下一个兄弟元素
        console.log(document.querySelector(&#39;#li4&#39;).nextSibling.nextSibling);
        // 6.previousSibling获取相邻上一个兄弟元素
        console.log(document.querySelector(&#39;#li4&#39;).previousSibling.previousSibling);
        // 总结：除parentNode外，其他方法谨慎选择，一旦代码格式有变，就会出现错误
        // 通过nodeName获取节点名称
        //通过nodeValue获取节点值
        // 通过nodeType返回节点类型
    </script>
</body>
 
</html>

Nach dem Login kopieren

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!