js中DOM知識點分享-js教程-PHP中文網

js中DOM知識點分享

小云云

發布： 2018-03-14 16:41:24

原創

1481 人瀏覽過

1、childNodes和nodeType

childNodes取得子節點，但是會把中一個標籤與另一個標籤的空格當作文字節點來計算。 nodeType判斷一個節點是什麼類型的節點。只有當nodeType==1時才是元素節點，2是屬性節點，3是文字節點。
2、children取得子節點，它只回傳HTML節點，甚至不回傳文字節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支援。
3、offsetParent取得該節點有定位的父元素節點。
4、firstChild()和firstElementChild()，有相容問題，使用if來處理相容問題。其餘lastchild等的也是跟這個類似。
5、使用dom來取得元素屬性，使用setAttribute(‘要設定的屬性’，‘設定屬性的值’),removeAttribute(name)，getAttribute（名稱），基本上不常用。但也有必須用的情況。
6、使用className來選擇元素，可以封裝一個簡單的方法，現在這個是低版本的，沒有bug，但是有很強的限制

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

登入後複製