"JavaScript DOM 프로그래밍 기술" 읽기 노트 DOM 기본_javascript 기술

DOM
         
DOM: 문서 ​​객체 모델

노드

요소 노드: DOM의 원자는 요소 노드입니다.

,

,

과 같은 요소입니다. 요소에는 다른 요소가 포함될 수 있습니다. 다른 요소 내에 포함되지 않은 유일한 요소는 요소입니다.

텍스트 노드: XHTML 문서에서 텍스트 노드는 항상 요소 노드 내에 포함됩니다.

속성 노드: 속성 노드는 요소에 대한 보다 구체적인 설명을 제공하는 데 사용됩니다. 예를 들어 거의 모든 요소에는 제목 속성이 있으며 이 속성을 사용하여 요소에 포함된 내용을 정확하게 설명할 수 있습니다.

 

이 물건을 구입하는 것을 잊지 마세요.

DOM에서 title="a 젠틀 알림"은 속성 노드입니다.

CSS

요소 가져오기
요소 노드를 가져오는 방법에는 getElementById, getElementsByTagName 및 getElementsByClassName의 세 가지 방법이 있습니다.

GetElementsByTagName은 와일드카드를 매개변수로 허용합니다. 즉, 문서의 모든 요소가 이 함수에서 반환된 배열에 위치를 갖게 됩니다. 와일드카드 문자("*")는 곱하기 연산과 구별하기 위해 따옴표로 묶어야 합니다.

getElementById와 getElementsByTagName을 결합할 수도 있습니다. 아래와 같이:

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

    var shopping = document.getElementById("purchase");
    var items = shopping.getElementsByTagName("*");


이렇게 하면 구매의 id 속성 값을 가진 요소에 몇 개의 요소가 포함되어 있는지 얻을 수 있습니다.

getElementsByClassName 메소드는 최신 브라우저에서만 지원됩니다. 이를 보완하기 위해 DOM 스크립트 프로그래머는 기존 DOM 메서드를 사용하여 자신만의 getElementsByClassName을 구현해야 합니다. 대부분의 경우 구현 프로세스는 다음 getElementsByClassName과 대략 유사합니다.

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

함수 getElementsByClassName(노드, 클래스 이름){
If(node.getElementsByClassName){
             return node.getElementsByClassName(클래스 이름);
         }그 외{
        var 결과 = new Array();
            var elems = node.getElementsByTagName("*");
for(var i=0;i If(elems[i].className.indexOf(클래스 이름) != -1){
결과[결과.길이] = 요소[i];
            }
         }
         결과 반환
}
}


이 getElementsByClassName 함수는 두 개의 매개변수를 허용합니다. 첫 번째 노드는 DOM 트리에서 검색 요소의 시작점을 나타내고 두 번째 클래스 이름은 검색할 클래스 이름입니다.

속성 가져오기 및 설정

getAttribute는 쿼리하려는 속성의 이름인 매개변수가 하나만 있는 함수입니다.

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

object.getAttribute(속성)


setAttribute()를 사용하면 속성 노드의 값을 수정할 수 있습니다. setAttribute를 통해 문서를 수정한 후 브라우저의 소스 보기 옵션을 통해 문서의 소스 코드를 보면 변경 전의 속성 값이 계속 표시됩니다. 즉, setAttribute에 의해 수정된 내용은 변경되지 않습니다. 문서 자체의 소스 코드에 반영됩니다. 이러한 "외관과 내부의 불일치" 현상은 DOM의 작업 모드에서 발생합니다. 즉, 문서의 정적 콘텐츠가 먼저 로드된 다음 동적으로 새로 고쳐집니다. 동적 새로 고침은 문서의 정적 콘텐츠에 영향을 주지 않습니다. 이것이 DOM의 진정한 힘입니다. 즉, 브라우저에서 페이지를 새로 고치지 않고 페이지 콘텐츠를 새로 고치는 것입니다.