DOM 기본 튜토리얼: DOM_기본 지식 사용

DOM(Text Object Model)의 프레임워크와 노드를 이해한 후 가장 중요한 것은 이러한 노드를 사용하여 HTML 웹페이지를 처리하는 것입니다

DOM 노드 노드에는 사용할 수 있는 일련의 속성과 메서드가 있습니다. 일반적으로 사용되는 것은 다음 표와 같습니다.

완벽함: http://www.w3school.com.cn/xmldom/dom_element.asp

1. 액세스 노드

BOM은 노드에 액세스하기 위한 몇 가지 경계 방법을 제공하며 일반적으로 사용되는 방법은 getElementsByTagName() 및 getElementById()입니다.

코드 복사 코드는 다음과 같습니다.

클라이언트 언어

• HTML


• 자바스크립트


• CSS

서버측 언어

• ASP.NET


• JSP


• PHP

본문>

document.getElementById()

코드 복사 코드는 다음과 같습니다.

PHP

코드 복사 코드는 다음과 같습니다.

//id가 className을 가져옴

2. 노드 유형 감지

nodeType을 통해 노드 유형을 감지할 수 있습니다. 이 매개변수는 12개의 정수 값을 반환합니다.

document.nodeType과 같은 표현식 형식

정말 유용한 것은 DOM(1) 모델에서 언급한 세 가지 유형의 모델 노드입니다

요소 노드, 텍스트 노드 및 속성 노드

1. 요소 노드의 반환 값은 1입니다

2. 속성 노드 반환 값은 2입니다

3. 텍스트 노드는 3의 값을 반환합니다

코드 복사 코드는 다음과 같습니다.

CSS

반환: nodeType: 1

이는 특정 노드를 개별적으로 처리할 수 있다는 의미이며, 이는 노드를 검색할 때 매우 실용적입니다. 나중에 그것에 대해 이야기하겠습니다.

3. 아버지, 아들, 형제의 관계를 활용하여 노드를 찾습니다

첫 번째 섹션의 노드에 액세스할 때 해당 노드의 childNodes 속성을 사용하여 요소 노드에 포함된 텍스트 노드에 액세스합니다.

이 섹션에서는 노드의 부모-자식-형제 관계를 사용하여 노드를 찾습니다

*hasChildNodes 및 childNodes 속성을 사용하여 이 노드에 포함된 모든 노드를 가져옵니다

코드 복사 코드는 다음과 같습니다.

        window.onload = 함수 myDOMIspector(){
                var oUl = document.getElementById("myList");                                                                      |           //

태그 가져오기
          var DOMString = "";
>                                                              var oCh = oUl.childNodes;
For (var I = 0; i & lt; och.length; i) //
참조 DOMString = oCh[i].nodeName "
";
            }
                document.write(DOMString);
}

머리>




• 달콤달콤 돼지갈비


• 당면을 곁들인 둥근 돼지고기찜


• 김치


• 밤구이치킨


• 마파두부



본문>

4.DOM은 노드의 상위 노드를 가져옵니다

코드 복사 코드는 다음과 같습니다.

        window.onload = function(){
var food = document.getElementById("mydearfood");
Document.write(food.parentNode.tagName)
}

머리>

• 달콤달콤 돼지갈비


• 당면을 곁들인 둥근 돼지고기찜


• 김치


• 밤구이치킨


• 마파두부

//ul 반환

부모 노드를 이용하여 지정한 노드의 부모 노드를 성공적으로 획득했습니다

5. parentNode 속성 사용

코드 복사 코드는 다음과 같습니다.

        window.onload = function(){
var food = document.getElementById("mydearfood");
          var parentElm = food.parentNode;
​​​​​​while(parentElm.className != "colorful" && parentElm != document.body)
                상위 Elm = parentElm.parentNode;                document.write("tageName:" parentElm.tagName "
");
               document.write("claaName:" parentElm.className "
");
                document.write("typeOf:" typeof(food) "
");
}

머리>

• 달콤달콤 돼지갈비


• 당면을 곁들인 둥근 돼지고기찜


• 김치


• 밤구이치킨


• 마파두부

//출력
//tageName:DIV
claaName:colorful
typeOf:object

하위 노드부터 시작하여 노드의 클래스 이름이 "colorful"이 될 때까지 상위 노드를 위쪽으로 검색합니다.

6.dom의 형제애

코드 복사 코드는 다음과 같습니다.

        window.onload = function(){
var food = document.getElementById("mydearfood");
var nextF = food.nextSibling;
Alert("nextSibling:" nextF.tagName "
");
}

머리>

• 달콤달콤 돼지갈비


• 당면을 곁들인 둥근 돼지고기찜


• 김치


• 밤구이치킨


• 마파두부

>          >         

본문>



nextsibling 및 PreviousSibling 속성을 사용하여 형제 노드에 액세스하는 것이 좋아 보입니다.

단, IE 브라우저에만 해당됩니다

코드 사용 시 호환성이 좋으려면 nodeType을 사용하여 판단해야 합니다

호환성 처리는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

함수 nextSib(노드){
var tempLast = node.parentNode.lastChild;
//마지막 노드인지 판단하고, 그렇다면 null을 반환
If(노드 ​​== tempLast)
        null을 반환합니다.
var tempObj = node.nextSibling;
//요소 노드를 찾을 때까지 다음 형제 노드를 하나씩 검색합니다
While(tempObj.nodeType!=1 && tempObj.nextSibling!=null)
         tempObj = tempObj.nextSibling;
//삼항 연산자, 요소 노드인 경우 노드 자체를 반환하고, 그렇지 않으면 null을 반환합니다
반환(tempObj.nodeType==1)?tempObj:null;
}
함수 prevSib(노드){
var tempFirst = node.parentNode.firstChild;
//첫 번째 노드인지 확인하고, 그렇다면 null을 반환합니다
If(노드 ​​== tempFirst)
        null을 반환합니다.
var tempObj = node.previousSibling;
//요소 노드를 찾을 때까지 이전 형제 노드를 하나씩 검색합니다
While(tempObj.nodeType!=1 && tempObj.previousSibling!=null)
         tempObj = tempObj.previousSibling;
반환(tempObj.nodeType==1)?tempObj:null;
}
함수 myDOMIspector(){
var myItem = document.getElementById("myDearFood");
//다음 요소 형제 노드를 가져옵니다
var nextListItem = nextSib(myItem);
//이전 요소 형제 노드 가져오기
var preListItem = prevSib(myItem);
Alert("다음 항목:" ((nextListItem!=null)?nextListItem.firstChild.nodeValue:null) " 이전 항목:" ((preListItem!=null)?preListItem.firstChild.nodeValue:null) );
}

머리>

> > > >                     >

본문>



7. 노드 속성 설정

코드 복사

코드는 다음과 같습니다.

        window.onload = function(){

// 사진 가져오기           var imgDataBe = document.getElementsByTagName("img")[0];
//이미지의 제목 속성을 가져옵니다
              imgDataBe.setAttribute("src","02.gif");
             imgDataBe.setAttribute("title","人情波");
             document.write(imgDataBe.getAttribute("title"));
              document.write(imgDataBe.getAttribute("alt"));
              document.write(imgDataBe.getAttribute("node-data"));
             document.write(imgDataBe.getAttribute("node_data"));
}

머리>

본문>

setAttribute() 메소드를 사용하여 노드 속성 설정

코드 복사 코드는 다음과 같습니다.

>           
           <script><br />                window.onload = function() {<br />               var bkk = document.getElementById("new5");<br />               var clickbk = document.getElementById("qiehuan");<br />                      clickbk.onclick = dsqiehuan;<br />                     기능 dsqiehuan() {<br />                         bkk.setAttribute("class", "xxx")<br />                 }<br />             }<br /> > >              .xxx{색상:#ddd}<br /> > </머리><br /> <본문><br />            <div id="new5"><br />               555<br /> >            <em id="qiehuan">스위치<br /> </본문><br /> <br /><br /> <br />8.createElement()가 노드를 생성합니다<br /> <br /></script>

코드 복사

코드는 다음과 같습니다. >                      <script></script>

               window.onload = function() {

         var oP = document.createElement("p");
​​​​ var oText = document.createTextNode("dom을 사용하여 노드 생성");
        var oText1 = document.createTextNode("dom을 사용하여 노드 123 생성");
oP.appendChild(oText);
oP.appendChild(oText1);
           document.body.appendChild(oP);
            }
> 머리>

여기에 P가 있습니다. createElement()를 테스트해 보세요

본문>



9.removeChild는 노드를 제거합니다

코드 복사

코드는 다음과 같습니다.

>           
          <script><br />                window.onload = function() {<br />          var oP = document.getElementsByTagName("p")[0];<br /> oP.parentNode.removeChild(oP); // .removeChild("oP")가 아닌 .removeChild(oP)로 끝납니다<br />             }<br /> > </머리><br /> <본문><br /> <p>여기에 P가 있습니다. createElement()를 테스트해 보세요<br /> </본문><br /> <br /><br /> </script>

10.insertBefore()는 특정 노드 앞에 노드를 삽입합니다

코드 복사 코드는 다음과 같습니다.

>           
          <script><br />                window.onload = function() {<br />          var oPold = document.getElementsByTagName("p")[0];<br />          var oPnew = document.createElement("p");<br />         var oText = document.createTextNode("새 노드")<br /> oPnew.appendChild(oText) ;<br /> ​​​​ oPold.parentNode.insertBefore(oPnew,oPold);//두 개의 매개변수를 받습니다. 하나는 새 매개변수이고 다른 하나는 이전 노드 매개변수입니다<br />             }<br /> > </머리><br /> <본문><br /> <p>원래는 P<br /> </본문><br /> <br /><br /> <br />11. 특정 노드 뒤에 새 요소 삽입(2015년 1월 9일 추가) <br /> </script>

DOM에서 제공하는 메서드는 insertBefore()를 사용하여 대상 요소 앞에 새 요소를 추가하거나,appendchild() 메서드를 사용하여 상위 요소의 childNodes 끝에 새 요소를 추가할 수 있습니다(예: 주소 ).

실제로는 특정 요소 끝에 새 요소를 추가할 때 사용되는 경우가 많습니다. DOM 메소드에는 insertBefore() 메소드가 없지만 기존 지식을 활용하여 작성할 수 있습니다.

코드 아이디어는 다음과 같습니다

코드 복사

코드는 다음과 같습니다. 함수 insertAfter(newElement, targetElement) {                     var oparent = targetElement.parentNode //대상 요소의 상위 요소 찾기

If (oparent.lastChild == targetElement) //대상이 마지막 요소인 경우

                 oparent.appendChild(newElement); //마지막 요소 뒤에 직접 추가
else //다음 요소의 상위 요소 노드 앞에 삽입 oparent.insertBefore(newElement, targetElement.nextSibling)



인스턴스: (요소 외부에 추가) 원본 인스턴스: 주소

코드 복사

코드는 다음과 같습니다.

          
> 머리>

                                                                          & Lt; p ID = "대상" & lt;/p & gt;          

코드 복사

코드는 다음과 같습니다.

   
       
       
       
            window.onload = function() {
    var oPold = document.getElementsByTagName("p")[0];
    var aColors = ["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure ","갈색","청동","딥핑크","앨리스블루","회색","구리","산호","장석","오렌지","난초","핑크","자두", "석영","보라색"];
    var oFragment = document.createDocumentFragment();    //创建文档碎그림
    for(var i=0;i         var oP = document.createElement("p");
        var oText = document.createTextNode(aColors[i]);
        oP.appendChild(oText);
        oFragment.appendChild(oP);        //将节点先添加到碎文中
    }
    //document.body.appendChild(oFragment);    //最后一次性添加到页면
     oPold.parentNode.insertBefore(oFragment,oPold);//结합삽입Before使文档碎文添加到节点之前
            }
       
    머리>
   
   

这里本来有个P

    본문>