jsでのDOMナレッジポイントの共有-jsチュートリアル-php.cn

jsでのDOMナレッジポイントの共有

小云云

リリース： 2018-03-14 16:41:24

オリジナル

1490 人が閲覧しました

1. childNodesとnodeType

childNodesは子ノードを取得しますが、あるラベルと別のラベルの間のスペースはテキストノードとして計算されます。 nodeType は、ノードがどのタイプのノードであるかを決定します。 nodeType==1 が要素ノード、2 が属性ノード、3 がテキストノードの場合のみ。
2. Children は子ノードを取得します。これは標準の DOM 属性ではなく、HTML ノードのみを返しますが、innerHTML メソッドと同様に、ほとんどすべてのブラウザでサポートされています。
3. offsetParent は、ノードの配置された親要素ノードを取得します。
4. FirstChild() と firstElementChild() には互換性の問題があります。互換性の問題に対処するには if を使用します。 lastchild の残りの部分などはこれと同様です。
5. 要素の属性を取得するには dom を使用し、setAttribute('設定する属性', '属性値を設定')、removeAttribute(name)、getAttribute(name) を使用しますが、これらは基本的にはあまり使用されません。しかし、それを使用しなければならない状況もあります。
6. className を使用して要素を選択すると、単純なメソッドをカプセル化できます。これにはバグはありませんが、強力な制限があります

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

ログイン後にコピー

7. フォーラム関数などのノードを作成するときは必ず作成してください。ノードを親要素の下に追加します
creatElement() でノードを作成します
appendChild() で親要素の前に作成されたノードを追加します
insertBefore() ノードの前に挿入します
removeChild() ノードを削除します

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

ログイン後にコピー