Partage des points de connaissances DOM en js-js tutoriel-php.cn

Partage des points de connaissances DOM en js

小云云

Libérer： 2018-03-14 16:41:24

original

1491 Les gens l'ont consulté

1. childNodes et nodeType

childNodes obtient les nœuds enfants, mais l'espace entre une étiquette et une autre étiquette est calculé comme un nœud de texte. nodeType détermine le type de nœud qu'est un nœud. Uniquement lorsque nodeType==1 est le nœud d'élément, 2 est le nœud d'attribut et 3 est le nœud de texte.
2. Les enfants obtiennent des nœuds enfants. Il ne renvoie que les nœuds HTML, pas même les nœuds de texte. Bien qu'il ne s'agisse pas d'un attribut DOM standard, il est pris en charge par presque tous les navigateurs comme la méthode innerHTML.
3. offsetParent obtient le nœud d'élément parent positionné du nœud.
4. FirstChild() et firstElementChild() ont des problèmes de compatibilité. Utilisez if pour résoudre les problèmes de compatibilité. Le reste de lastchild et ainsi de suite sont similaires à ceci.
5. Utilisez dom pour obtenir les attributs de l'élément, utilisez setAttribute('attribute to be set', 'set attribue value'), removeAttribute(name), getAttribute(name), qui ne sont fondamentalement pas couramment utilisés. Mais il existe aussi des situations où il faut l’utiliser.
6. Utilisez className pour sélectionner des éléments, qui peuvent encapsuler une méthode simple. Il s'agit désormais d'une version basse, sans bugs, mais qui présente de fortes limitations

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>     
    </head>
    <body>
        <p id="p1">
            <ul>
                <li class="box"></li>
                <li></li>
                <li></li>
                <li class="box"></li>
                <li class="box"></li>
                <li></li>
                <li></li>
                <li class="box"></li>
            </ul>
        </p>
    </body>
    <script>
        function getByClass(oParent,sClass){
            //*号代表通配符
            var aResult=[];            var aEle = oParent.getElementsByTagName(&#39;*&#39;);            for(var i=0;i<aEle.length;i++){                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }               
            }            return aResult;
        }        var p1 = document.getElementById(&#39;p1&#39;);        var aBox = getByClass(p1,&#39;box&#39;);        for(var i=0;i<aBox.length;i++){
            aBox[i].style.backgroundColor=&#39;red&#39;;
        }    </script></html>

Copier après la connexion

Créer des nœuds tels que des forums Fonction
6. 🎜> Assurez-vous d'ajouter le nœud créé à son élément parent
creatElement() pour créer le nœud
appendChild() pour ajouter le nœud créé à son élément parent avant
insertBefore() Insérer
removeChild () avant un nœud pour supprimer un nœud

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>创建节点</title>
        <script>
            window.onload=function(){
                var oUl = document.getElementById(&#39;oUl&#39;);                var oBtn = document.getElementById(&#39;btn&#39;);                var input1 = document.getElementById(&#39;input1&#39;);                var aLi = document.getElementsByTagName(&#39;li&#39;);
                oBtn.onclick=function(){
                    var oLi = document.createElement(&#39;li&#39;);                 
                    oLi.innerHTML=input1.value;                    if(aLi.length>0){
                        oUl.insertBefore(oLi,aLi[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }
                }
            }        </script>
    </head>
    <body>
        <p>
            <input id="input1" type="text" />
            <input id=&#39;btn&#39; type="button" value="创建" />
            <ul id=&#39;oUl&#39;>
            </ul>
        </p>
    </body></html>

Copier après la connexion

Recommandations associées :

Un résumé de l'utilisation de DOM

En profondeur application du DOM en JavaScript

Résumé des opérations JavaScript natives sur les nœuds dom

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!