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

PHP中文网original: 2017-06-21 13:20:591129parcourir

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

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>

 　　　　　　　　　　　　ary.push(cur);

　　　　　　　　　　　　}
                   
                }
            }return ary;

        }

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation de l'effet "glisser-déposer" d'une petite démoArticle suivant：Implémentation de l'effet "glisser-déposer" d'une petite démo

Articles Liés

Voir plus