> 웹 프론트엔드 > JS 튜토리얼 > js에서 DOM 지식 포인트 공유

js에서 DOM 지식 포인트 공유

小云云
풀어 주다: 2018-03-14 16:41:24
원래의
1486명이 탐색했습니다.

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>
로그인 후 복사
관련 권장 사항 :

DOM 사용에 대한 요약

JavaScript에서 DOM의 심층적인 고급 응용 프로그램

dom 노드의 기본 JavaScript 작업 요약

위 내용은 js에서 DOM 지식 포인트 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿