돔
DOM : 문서 개체 모델;
마디
요소 노드 : DOM의 원자는 요소 노드입니다. <body>, <p>, <ul> 등과 같은 요소는 다른 요소를 포함 할 수 있습니다. 다른 요소에 포함되지 않은 유일한 요소는 <html> 요소입니다.
텍스트 노드 : XHTML 문서에서 텍스트 노드는 항상 요소 노드 내부에 포함됩니다.
속성 노드 : 속성 노드는 요소에 대한보다 구체적인 설명을 제공하는 데 사용됩니다. 예를 들어, 거의 모든 요소에는 제목 속성이 있으며이 속성을 사용하여 요소에 포함 된 내용을 정확하게 설명 할 수 있습니다.
<p>이 물건을 사는 것을 잊지 마십시오. </p>
DOM에서 Title = "A Gentle Reminder"는 속성 노드입니다.
CSS
요소를 얻으십시오
getElementById, getElementsByTagName, getElementsByClassName 요소 노드를 얻는 세 가지 방법.
getElementsByTagName은 와일드 카드를 매개 변수로 허용합니다. 즉, 문서의 각 요소가 함수에 의해 반환 된 배열에 위치를 갖게됩니다. 와일드 카드 ( "*")는 인용문이 있어야하며, 이는 곱셈 연산과 다릅니다.
GetElementById 및 getElementsByTagName을 사용할 수도 있습니다. 아래 그림과 같이 :
코드 사본은 다음과 같습니다.
var 쇼핑 = document.getElementById ( "구매");
var 항목 = 쇼핑 .getElementsByTagName ( "*");
이렇게하면 ID 속성 값 구매가 포함 된 요소의 요소 수를 얻을 수 있습니다.
getElementsByClassName 메소드는 최신 브라우저에서만 지원됩니다. 이를 위해 DOM 스크립트 프로그래머는 기존 DOM 메소드를 사용하여 자체 GetElementsByClassName을 구현해야합니다. 대부분의 경우 구현 프로세스는 다음 getElementsByClassName과 거의 유사합니다.
코드 사본은 다음과 같습니다.
함수 getElementsByClassName (노드, 클래스 이름) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}또 다른{
var results = new Array ();
var elems = node.getElementsByTagName ( "*");
for (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! = -1) {
결과 [results.length] = elems [i];
}
}
반환 결과;
}
}
getElementsByClassName 함수는 두 매개 변수를 수락합니다. 첫 번째 노드는 DOM 트리에서 검색 시작점을 나타내고 두 번째 클래스 이름은 검색 할 클래스 이름입니다.
속성을 얻고 설정하십시오
getAttribute는 하나의 매개 변수 만있는 함수입니다. 쿼리하려는 속성의 이름입니다.
코드 사본은 다음과 같습니다.
Object.getAttribute (속성)
setattribute ()를 사용하면 속성 노드의 값을 수정할 수 있습니다. setAttribute를 통해 문서를 수정 한 후 브라우저의보기 소스 옵션을 통해 문서의 소스 코드를 볼 때는 이전 속성 값, 즉 stattribute의 수정은 문서 자체의 소스 코드에 반영되지 않습니다. 이 "내부 및 외부"의이 현상은 DOM의 작업 모드에서 비롯됩니다. 먼저 문서의 정적 내용을로드 한 다음 동적으로 새로 고침 된 동적 새로 고침은 문서의 정적 내용에 영향을 미치지 않습니다. 이것은 DOM의 진정한 힘입니다. 브라우저의 페이지를 새로 고치지 않고 페이지 컨텐츠를 새로 고침합니다.