Javascript Part 6 js DOM 프로그래밍 소개_기본 지식

이전 글에서 제가 의아해했던 질문들은 이번 장과 다음 장에서 천천히 해결될 것입니다. 오늘부터 DOM 프로그래밍을 배워서 천천히 주니어 JS 프로그래머가 되어 봅시다. 그런 다음 js 장인의 방향으로 개발하십시오.

영어 배우기:
Dom: 문서 개체 모델. 문서 객체 모델
Bom: 브라우저 객체 모델.
참고: 창 개체 모델이라고도 합니다. (창 개체 모델.)
API: 응용 프로그래밍 인터페이스.
참고: DOM은 실제로 API로 간주될 수 있습니다.
노드: Node.
참고: 노드는 요소 노드, 속성 노드, 텍스트 노드로 구분됩니다.
요소 노드에는 속성 노드와 텍스트 노드가 포함됩니다.
돔 트리:
DOM을 어떻게 운영하는지 직접 살펴보겠습니다.
1, 요소 노드를 생성합니다. createElement():

Output; nodeType은 1입니다. a.nodeName은 p;
그래서 요소 노드를 생성합니다... 왜 문서 노드 p를 찾을 수 없습니까?
다음 예를 살펴보겠습니다.


firebug로 확인하여 문서에 필요한 결과가 이미 있는지 확인하세요.


createElement() 메소드로 생성된 새 요소 노드는 문서에 자동으로 추가되지 않는 것으로 나타났습니다. 자유 상태. 문서에 추가하려면appendChild(), insertBefore() 메서드 또는 replacementChild() 메서드(나중에 설명)를 사용할 수 있습니다.

2, 텍스트 노드를 만듭니다. createTextNode():
var b = document.createTextNode("my deco");
Alert( "노드 유형: " b.nodeType " ", 노드 이름: " b.nodeName);
output ; NodeType은 3입니다. a.nodeName은 #text입니다.
그래서 텍스트 노드가 생성됩니다... 왜 이 텍스트 노드가 문서에서 발견되지 않는지 궁금할 수도 있습니다. AppendChild()를 사용하여 문서에 추가해야 하는 createElement()와 동일한가요?

네, 당신 생각이 아주 맞습니다.
다음 예를 살펴보겠습니다.

에 요소 노드를 추가합니다.

3, 노드를 복사합니다. cloneNode(boolean): 매개변수 1개:
예제 보기:


firebug에서 결과를 확인하세요.


true와 false의 차이점을 확인하세요. 거짓.
참인 경우:

hello world

false:

만 복제하고 내부 텍스트는 복제되지 않습니다.
createElement()와 마찬가지로 복제 후 새 노드가 문서에 자동으로 삽입되지 않습니다. AppendChild()가 필요합니다.
또 다른 참고 사항: 복제 후 ID가 동일하면 setAttribute(“id”, “new_id “)
를 사용하여 새 노드의 ID를 변경하는 것을 잊지 마세요.

4, 노드 삽입. appendChild():
이전에 여러 번 사용해 봤기 때문에 일반적인 사용법을 알아야 합니다.
구체적인 설명은 다음과 같습니다.
요소에 하위 노드를 추가하고 끝에 새 노드를 삽입합니다.
var 컨테이너 = document.createElement("p")
var t = document.createTextNode("cssrain");
container.appendChild(t);
document.body.appendChild(container);

또한,appendChild()는 새 요소를 추가하는 데 사용되며 문서의 기존 요소를 이동할 수도 있습니다.
아래 예를 살펴보세요.

msg

content

p id="aaa">aaaaaaa

<script> <br>var mes = document.getElementById("msg") <br>var 컨테이너 = document.getElementById("content"); <br> Container.appendChild(mes); <br></script>
//msg가 콘텐츠 뒤에 있는 것을 발견했습니다.
Js 내부 처리 방법:
먼저 문서에서 ID msg인 문서를 삭제한 후 컨텐츠에 삽입하고 컨텐츠의 마지막 노드로 삽입합니다.
결과는 다음과 같습니다.

content

msg

aaaaaaaa

5, 노드 삽입. insertBefore():
이름에서 알 수 있듯이 대상 노드 앞에 새 노드를 삽입합니다.
Element.insertBefore( newNode , targerNode );
// 첫 번째 매개변수는 새 노드이고 그 뒤에 대상 노드(삽입 위치)가 옵니다.
// 새로운 노드는 게스트이므로 먼저 그를 섬겨야 합니다. . . ^_^

두 번째 매개변수는 선택사항입니다. 두 번째 매개변수를 작성하지 않으면 기본적으로 문서 끝에 추가됩니다. 이는appendChild()와 동일합니다. insertBefore()를 사용하려면 ：

1111

msg

테스트

222

aaaaaaaa

< /p>
<script> <br>var msg = document.getElementById("msg") <br>var aaa = document.getElementById("aaa"); = document.getElementById( "cssrian"); <br>test.insertBefore( msg , aaa ) <br></script>
// aaa 앞에 msg의 ID가 삽입된 것을 확인했습니다.
Js의 내부 처리 방식은appendChild()와 유사합니다. 또한:
먼저 문서에서 ID가 msg인 항목을 삭제한 다음 aaa의 이전 노드로 aaa 앞에 삽입합니다.


모두 손으로 써야 합니다. 그렇지 않으면 읽는 것만으로는 기억하기가 쉽지 않습니다.
지금은 여기까지입니다. 내일 계속하겠습니다.
오늘은 dom 메소드를 사용하여 노드를 생성하고, 노드를 복사하고, 노드를 삽입하는 방법에 대해 이야기했습니다.
내일은 노드 삭제, 노드 교체, 노드 찾기 등에 대해 이야기하겠습니다. . . . . .
그래도 이해가 안 되신다면 구글에서 정보를 검색해 보세요.