자바스크립트 소개 8장 js dom 노드 속성 설명_기본지식

지난 두 기사에서는 DOM을 사용하여 노드 생성, 노드 복사, 노드 삽입, 노드 삭제, 노드 교체, 노드 찾기, 속성 가져오기 등에 대해 이야기했습니다. . .

오늘은 DOM 속성에 대해 이야기하겠습니다.
사실 우리는 이미 이전에 DOM 속성을 다루었습니다.
예:
nodeName, nodeType.... 오늘은 자세히 설명하겠습니다.


1, nodeName 속성: 노드의 이름입니다.
노드가 요소 노드인 경우 요소 이름을 반환합니다. 이때는 tagName 속성과 동일합니다.
예:

aaaa

그러면 p 가 반환됩니다.
속성 노드인 경우 nodeName은 이 속성의 이름을 반환합니다.
텍스트 노드인 경우 nodeName은 #text 문자열을 반환합니다.

또 말씀드리고 싶은 점은 nodeName 속성은 읽기 전용 속성이므로 설정(쓰기)할 수 없다는 것입니다.
값을 대문자로 반환합니다.

2,,nodeType 속성: 이 노드의 유형을 나타내는 정수를 반환합니다.
우리는 일반적으로 3가지 유형을 사용합니다.
nodeType == 1 : 요소 노드
nodeType == 2 : 속성 노드
nodeType == 3 : 텍스트 노드
기억하고 싶다면 우리는 다음과 같이 기억할 수 있습니다.
예:

test

앞에서 뒤로 읽으면 첫 번째가 요소 노드(1)이고 다음이 속성 노드임을 알 수 있습니다. (2), 마지막으로 텍스트 노드(3)를 사용하면 nodeType이 나타내는 유형을 쉽게 기억할 수 있습니다. (약간의 트릭을 요약했습니다. ^_^.)

nodeType 속성은 잘못된 노드 유형에서 잘못된 작업이 수행되지 않도록 하기 위해 if와 함께 자주 사용됩니다.
예:
function cs_demo(mynode){
if(mynode.nodeType == 1){
mynode.setAttribute("title","demo")
}
}
코드 설명: 먼저 mynode의 nodeType 속성을 확인하여 그것이 나타내는 노드가 실제로 요소 노드인지 확인하세요.
nodeName 속성과 마찬가지로 읽기 전용 속성이므로 설정(쓰기)할 수 없습니다.

3. nodeValue 속성: 이 노드의 값인 문자열을 반환합니다.
노드가 요소 노드인 경우 null이 반환됩니다(아래 참고).
속성 노드인 경우 nodeValue는 이 속성의 값을 반환합니다.
텍스트 노드인 경우 nodeValue는 이 텍스트 노드의 콘텐츠를 반환합니다.
예:

aaaaaaaaaaaaaaa

nodeValue는 읽고 쓸 수 있는 속성입니다. 그러나 요소 노드의 값은 설정할 수 없습니다.
다음 예를 다시 살펴보세요.

aaaaaaaaaaaaaaa

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

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

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

요소에 하위 노드가 있는지 확인하는 데 사용되는 hasChildNodes 메서드를 사용할 수 있습니다.
또는 if (container.childNodes.length
childNodes도 읽기 전용 속성입니다. 노드를 추가하려면appendChild() 또는 insertBefore()를 사용할 수 있습니다.
노드를 삭제하려면 RemoveChild()를 사용할 수 있습니다.
작업 후 childNodes 속성이 자동으로 새로 고쳐집니다.

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


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

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

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

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

그럼 DOM의 공통 속성과 메서드에 대한 것입니다. 이러한 메서드의 사용을 이해하세요.
저는 모든 사람의 DOM 프로그래밍 기술이 크게 향상될 것이라고 믿습니다.


아직도 이해가 안가신다면 구글에서 정보를 검색해보시면 됩니다.