집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트 소개 9장 자바스크립트 DOM 요약_기본지식

자바스크립트 소개 9장 자바스크립트 DOM 요약_기본지식

PHP中文网원래의: 2016-05-16 19:03:15974검색

js-DOM 개발자라면 다음 DOM 메소드를 알아야 합니다.

1, 노드를 생성합니다.
createElement():
var a = document.createElement(“p”);
요소 노드를 생성하므로 nodeType은 1입니다.
a.nodeName은 p를 반환합니다.
createElement() 메서드로 생성된 새 요소 노드는 문서에 자동으로 추가되지 않습니다. 자유로운 상태에서. 따라서 nodeParent 속성도 없습니다.
문서에 추가하려면appendChild(), insertBefore() 메서드 또는 replacementChild() 메서드를 사용할 수 있습니다. 물론 이전 예에서는 insertAfter() 메서드를 직접 작성했습니다.
예:
var a = document.createElement(“p”)
document.body.appendChild(a);
참고: appendChild()는 기본적으로 문서 끝에 추가됩니다. 즉, lastChild 하위 노드입니다.
어딘가에 추가하고 싶다면 insertBefore()를 사용하면 됩니다.
요소를 삽입하기 전에 요소에 속성을 추가하려는 경우. 다음과 같이 할 수 있습니다.
var a = document.createElement(“p”);
a.setAttribute(“title”,”my 데모”)
document.body.appendChild(a); 🎜 >
createTextNode():
var b = document.createTextNode(“my deco”)
텍스트 노드를 생성하므로 nodeType은 3입니다.
b.nodeName은 #text를 반환합니다.
createElement()와 마찬가지로 createTextNode()로 생성된 노드는 문서에 자동으로 추가되지 않습니다. AppendChild(), insertBefore() 메서드 또는 replacementChild() 메서드를 사용해야 합니다.
createElement()와 함께 자주 사용되는데, 그 이유를 아시나요? (요소 노드, 텍스트 노드.)
var mes = document.createTextNode(“hello world”);
var 컨테이너 = document.createElement(“p”)
container.appendChild(mes) ;
document.body.appendChild(container)

2, 노드를 복사합니다.
cloneNode(boolean) :
매개변수가 하나 있습니다.
var mes = document.createTextNode("hello world");
var 컨테이너 = document.createElement("p")
container.appendChild(mes)
document.body.appendChild( 컨테이너);
var newpara = 컨테이너.cloneNode(true);//참과 거짓의 차이
document.body.appendChild(newpara)
참고:
참: aaaa

false:

만 복제하고 내부 텍스트는 복제되지 않습니다.
예제를 직접 작성한 다음 Firebug를 사용하여 확인해 볼 수 있습니다.

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

3, 노드를 삽입합니다.
appendChild():
요소에 하위 노드를 추가하고 끝에 새 노드를 삽입합니다.
var 컨테이너 = document.createElement("p");
var t = document.createTextNode("cssrain")
container.appendChild(t)
document.body.appendChild(컨테이너 );
createElement(), createTextNode() 및 cloneNode()와 함께 자주 사용됩니다.
또한,appendChild()는 새 요소를 추가하는 데 사용할 수 있을 뿐만 아니라 문서의 기존 요소를 이동하는 데에도 사용할 수 있습니다.
아래 예를 살펴보세요.

msg

content

p id="aaa">aaaaaaa

content

msg

aaaaaaaa

insertBefore() :
이름에서 알 수 있듯이 대상 노드 앞에 새 노드를 삽입합니다.
Element.insertBefore( newNode , targerNode );

두 번째 매개변수는 선택사항입니다. 두 번째 매개변수를 작성하지 않으면 기본적으로 문서 끝에 추가됩니다. ();
insertBefore()가 어떻게 사용되는지 살펴보겠습니다:

1111

msg

테스트

222

🎜><script> var msg = document.getElementById("msg") var aaa = document.getElementById("aaa") var test = document.getElementById("cssrian") ; test.insertBefore( msg , aaa ); </script>
// aaa 앞에 msg의 ID가 삽입된 것을 확인했습니다.
Js의 내부 처리 방식은appendChild()와 유사합니다.

4, 노드를 삭제합니다.
removeChild() :

a
< ;p id="b">b

a
b

🎜 ><script> var ps = document.getElementById("cssrain") if(ps.hasChildNodes){ 경고( ps.childNodes.length ); ; /script> 8, DOM 속성: nodeName 속성: 노드의 이름입니다. 노드가 요소 노드인 경우 요소 이름을 반환합니다. 이때는 tagName 속성과 동일합니다. 예: aaaa 그러면 p 가 반환됩니다. 속성 노드인 경우 nodeName은 이 속성의 이름을 반환합니다. 텍스트 노드인 경우 nodeName은 #text 문자열을 반환합니다. 또 말씀드리고 싶은 점은 nodeName 속성은 읽기 전용 속성이므로 설정(쓰기)할 수 없다는 것입니다. nodeType 속성: 이 노드의 유형을 나타내는 정수를 반환합니다. 우리는 일반적으로 3가지 유형을 사용합니다. nodeType == 1 : Element 노드 nodeType == 2 : Attribute 노드 nodeType == 3 : Text 노드 기억하고 싶다면 위의 내용을 기억하세요. 순서는 앞에서 뒤로라고 생각하시면 됩니다. 예: test 앞에서 뒤로 읽으면 먼저 요소 노드, 그 다음 속성 노드, 마지막으로 텍스트 노드가 있음을 알 수 있으므로 쉽습니다. 기억해두세요 nodeType은 어떤 유형을 나타냅니까? nodeType 속성은 잘못된 노드 유형에서 잘못된 작업이 수행되지 않도록 하기 위해 if와 함께 사용되는 경우가 많습니다. 예: function cs_demo(mynode){ if(mynode.nodeType == 1){ mynode.setAttribute("title","demo") } } 코드 설명: 먼저 mynode의 nodeType 속성을 확인하여 그것이 나타내는 노드가 실제로 요소 노드인지 확인하세요. nodeName 속성과 마찬가지로 읽기 전용 속성이므로 설정(쓰기)할 수 없습니다. nodeValue 속성: 이 노드의 값인 문자열을 반환합니다. 노드가 요소 노드인 경우 null이 반환됩니다(아래 참고). 속성 노드인 경우 nodeValue는 이 속성의 값을 반환합니다. 텍스트 노드인 경우 nodeValue는 이 텍스트 노드의 콘텐츠를 반환합니다. 예: aaaaaaaaaaaaaaa <SCRIPT LANGUAGE="JavaScript"> var c= document.getElementById("c" ) ; Alert( c.nodeValue );//Return null </SCRIPT>
nodeValue는 읽고 쓸 수 있는 속성입니다. 그러나 요소 노드의 값은 설정할 수 없습니다.
아래 예를 살펴보세요.

aaaaaaaaaaaaaaa

물론 올바른 작동을 보장하기 위해 다음 코드를 추가할 수 있습니다.
< ;p id="c ">aaaaaaaaaaaaa

//요소 노드를 설정하려면 직접 설정할 수는 없지만 먼저 firstChild나 lastChild 등을 사용한 후 nodeValue를 설정해야 한다고 볼 수 있습니다.
nodeValue는 일반적으로 노드를 설정할 때만 사용됩니다. 텍스트 노드의 값입니다. 속성 노드의 값을 새로 고치려면 일반적으로 setAttribute()를 사용합니다.

childNodes 속성: 요소 노드의 하위 노드로 구성된 배열을 반환합니다.
텍스트 노드와 속성 노드는 더 이상 하위 노드를 포함할 수 없으므로
해당 childNodes 속성은 항상 빈 배열을 반환합니다.

요소에 하위 노드가 있는지 확인하는 데 사용되는 hasChildNodes 메서드를 사용할 수 있습니다.
또는 if (container.childNodes.length < 1)

childNodes도 읽기 전용 속성입니다. 노드를 추가하려면appendChild() 또는 insertBefore()를 사용할 수 있습니다.
노드를 삭제하려면 RemoveChild()를 사용할 수 있습니다. 작업 후 childNodes 속성이 자동으로 새로 고쳐집니다.

firstChild 속성:
텍스트 노드와 속성 노드는 더 이상 하위 노드를 포함할 수 없으므로
firstChild 속성은 항상 빈 배열을 반환합니다. 하위 노드가 없으면 null이 반환됩니다.
node.firstChild는 node.childNodes[0]과 동일합니다.
firstChild 속성은 읽기 전용 속성입니다.

lastChild 속성:
텍스트 노드와 속성 노드는 더 이상 하위 노드를 포함할 수 없으므로
lastChild 속성은 항상 빈 배열을 반환합니다. 하위 노드가 없으면 null이 반환됩니다.
node.lastChild는 node.childNodes[ node.childNodes.length - 1] 과 동일합니다.
lastChild 속성은 읽기 전용 속성입니다.

nextSibling 속성:
대상 노드의 다음 형제 노드를 반환합니다.
동일한 상위 노드에 속하는 대상 노드 뒤에 노드가 없으면 nextSibling은 null을 반환합니다.
nextSibling 속성은 읽기 전용 속성입니다.

previousSibling 속성:
대상 노드의 이전 형제 노드를 반환합니다.
동일한 상위 노드에 속하는 대상 노드 앞에 노드가 없으면 PreviousSibling은 null을 반환합니다.
이전 Sibling 속성은 읽기 전용 속성입니다.

parentNode 속성:
참고: 요소 노드에만 하위 노드가 있을 수 있으므로 parentNode 속성에서 반환되는 노드는 항상 요소 노드입니다.
물론 예외가 있습니다.
상위 노드가 없는 문서 노드입니다. 따라서 문서 노드의 parentNode 속성은 null을 반환합니다.
parentNode 속성은 읽기 전용 속성입니다.

성명：

이전 기사：javascript Firefox(firefox)가 로컬 이미지를 표시하지 않습니다 문제 해결 방법_이미지 특수 효과다음 기사：javascript Firefox(firefox)가 로컬 이미지를 표시하지 않습니다 문제 해결 방법_이미지 특수 효과

자바스크립트 소개 9장 자바스크립트 DOM 요약_기본지식

관련 기사