Résumé des propriétés des nœuds et des relations dans DOM-js tutoriel-php.cn

Résumé des propriétés des nœuds et des relations dans DOM

PHP中文网

Libérer： 2017-06-21 13:20:59

original

1161 Les gens l'ont consulté

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <h1>培训课程</h1>
        <ul>
            <li>html+css</li>
            <li>javascript</li>
            <li>正式课</li>
            <li>移动端课程</li>
            <li>node.js正式课</li>
        </ul>
    </div>
    <script>//获取关系的属性var oDiv = document.getElementById("div1");
        console.log(oDiv.childNodes);//获取所有的子节点console.log(oDiv.children);//获取所有的元素子节点</script>
</body>
</html>

Copier après la connexion

Nœud : Balises de nœud, texte, commentaires dans une page. . . Ce sont tous des nœuds

childNodes : Obtenez tous les nœuds enfants

children : Obtenez tous les nœuds enfants des éléments

parentNode : obtenez le nœud parent

previousSibling : obtenez le nœud frère précédent

nextSibling : obtenez le nœud frère suivant

firstChild : Obtenez le premier de tous les nœuds enfants

lastChild : Obtenez le dernier de tous les nœuds enfants

Les types de nœuds que nous devons maîtriser en js : 🎜>Nœud d'élément (étiquette d'élément) 1 Nom de balise null

Nœud de texte (texte) 3　　#comment　　　Contenu du commentaire

Document　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　connectez-nous Nœud texte

Méthode : Simuler notre méthode enfants pour obtenir le nœud enfant de l'élément

sous l'élément spécifié

Récupérer l'élément frère précédent d'un élément Nœuds enfants 　 Récupérer tous les nœuds d'élément frère d'un élément

<em><em><span style="color: #008000">       /        * getMyChildren:获取制定元素下的所有的元素节点<em><em><em>        * @parameter：</em></em></em> <br>　　*   ele:我们要获取谁下面的，就把谁传过来<br>　　　　　　　tagName:获取元素的类型
        * @return:
        *   我们最后获取的元素子节点
        *   by xxxxxxxxx
        * </span><span style="color: #008000">*/</span><span style="color: #0000ff">function</span><span style="color: #000000"> getMyChildren(ele,tagName){</span><span style="color: #0000ff">var</span> ary = [],nodes =<span style="color: #000000"> ele.childNodes;</span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0;i<nodes.length;i++<span style="color: #000000">){</span><span style="color: #0000ff">var</span> cur =<span style="color: #000000"> nodes[i];</span><span style="color: #0000ff">if</span>(cur.nodeType===1<span style="color: #000000">){<br>　　　　　　　　　　　　if(tagName){<br>　　　　　　　　　　　　　　if(cur.nodeName.toLowerCase===tagName.toLowerCase){<br>　　　　　　　　　　　　　　　　ary.push(cur)<br>　　　　　　　　　　　　　　}<br>　<br>　　　　　　　　　　　　}else{<br></span></em></em>

Copier après la connexion

 　　　　　　　　　　　　ary.push(cur);

Copier après la connexion

　　　　　　　　　　　　}
                   
                }
            }return ary;

        }

Copier après la connexion

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!