js에서 DOM 지식 포인트 공유

小云云원래의: 2018-03-14 16:41:241513검색

1. childNodes 및 nodeType

childNodes는 하위 노드를 가져오지만 한 레이블과 다른 레이블 사이의 공간은 텍스트 노드로 계산됩니다. nodeType은 노드가 어떤 유형의 노드인지 결정합니다. nodeType==1이 요소 노드인 경우에만, 2는 속성 노드, 3은 텍스트 노드입니다.
2. 어린이는 하위 노드를 가져옵니다. 표준 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>

js에서 DOM 지식 포인트 공유

관련 기사