suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen von DOM-Wissenspunkten in js

Teilen von DOM-Wissenspunkten in js

小云云
小云云Original
2018-03-14 16:41:241472Durchsuche

1. childNodes und nodeType

childNodes ruft die untergeordneten Knoten ab, aber der Abstand zwischen einer Beschriftung und einer anderen Beschriftung wird als Textknoten berechnet. nodeType bestimmt, um welchen Knotentyp es sich bei einem Knoten handelt. Nur wenn nodeType==1 der Elementknoten, 2 der Attributknoten und 3 der Textknoten ist.
2. Kinder erhalten nur HTML-Knoten, nicht einmal Textknoten. Obwohl es sich nicht um ein Standard-DOM-Attribut handelt, wird es von fast allen Browsern unterstützt.
3. offsetParent erhält den positionierten übergeordneten Elementknoten des Knotens.
4. FirstChild() und firstElementChild() haben Kompatibilitätsprobleme. Verwenden Sie if, um Kompatibilitätsprobleme zu lösen. Der Rest von lastchild usw. ähnelt diesem.
5. Verwenden Sie dom, um Elementattribute abzurufen, verwenden Sie setAttribute('attribute to be set', 'set attribute value'), removeAttribute(name), getAttribute(name), die grundsätzlich nicht häufig verwendet werden. Es gibt aber auch Situationen, in denen es eingesetzt werden muss.
6. Verwenden Sie className, um Elemente auszuwählen, die eine einfache Methode kapseln können. Dies ist jetzt eine niedrige Version ohne Fehler, weist jedoch starke Einschränkungen auf. 

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

Knoten wie Foren erstellen 🎜> Stellen Sie sicher, dass Sie den erstellten Knoten zu seinem übergeordneten Element hinzufügen
creatElement(), um den Knoten zu erstellen.
appendChild(), um den erstellten Knoten zu seinem übergeordneten Element hinzuzufügen, bevor Sie
insertBefore()
removeChild einfügen () vor einem Knoten, um einen Knoten zu löschen

<!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>
Verwandte Empfehlungen:

Einige Zusammenfassung der Verwendung von DOM

Ausführlich Anwendung von DOM in JavaScript

Zusammenfassung nativer JavaScript-Operationen auf Dom-Knoten

Das obige ist der detaillierte Inhalt vonTeilen von DOM-Wissenspunkten in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die gemeinsame Nutzung von js nahtlosem ScrollenNächster Artikel：Beispiel für die gemeinsame Nutzung von js nahtlosem Scrollen

In Verbindung stehende Artikel

Mehr sehen