웹 페이지_javascript 기술에서 지정된 노드의 상위 노드와 하위 노드를 얻는 javascript의 방법 요약

실제 개발에서는 페이지에서 html 요소를 가져와 해당 요소의 스타일, 콘텐츠 속성 등을 동적으로 업데이트해야 하는 경우가 많습니다.
그러면 이러한 요소를 업데이트하는 방법은 여러 가지가 있습니다. 다음은 문서 노드를 통해
를 가져오는 방법입니다.
(1) document.getElementById(elementId): 이 방법은 노드의 ID를 통해 필요한 요소를 정확하게 얻을 수 있는 방법으로 비교적 간단하고 빠릅니다. 페이지에 동일한 ID를 가진 여러 노드가 포함된 경우 첫 번째 노드만 반환됩니다. 요즘에는 $(id)라는 더 간단한 메소드를 제공하는 프로토타입 및 Mootools와 같은 많은 JavaScript 라이브러리가 등장했으며 매개변수는 여전히 노드의 ID입니다. 이 메소드는 document.getElementById()를 작성하는 또 다른 방법으로 간주될 수 있지만 $()의 기능이 더 강력합니다. 구체적인 사용법은 해당 API 문서를 참조하세요. (2) document.getElementsByName(elementName): 이름에서 알 수 있듯이 이 메소드는 노드 요소가 아니라 동일한 이름을 가진 노드 배열을 반환합니다. 그런 다음 노드의 특정 속성을 획득하여 필요한 노드인지 여부를 확인하기 위해 반복할 수 있습니다.
예: HTML에서 체크박스와 라디오는 동일한 이름 속성 값을 사용하여 그룹의 요소를 식별합니다. 지금 선택한 요소를 가져오려면 먼저 섞인 요소를 가져온 다음 루프를 통해 노드의 확인된 속성 값이 true인지 확인합니다.
(3) document.getElementsByTagName(tagName): 이 메소드는 태그를 통해 노드를 가져옵니다. 예를 들어 document.getElementsByTagName('A')는 페이지의 모든 하이퍼링크 노드를 반환합니다. 노드를 얻기 전에 일반적으로 노드의 유형이 알려져 있으므로 이 방법을 사용하는 것이 비교적 간단합니다. 그러나 단점도 분명합니다. 즉, 반환된 배열이 매우 커서 많은 시간을 낭비할 수 있다는 것입니다. 그렇다면 이 방법은 쓸모가 없는 걸까요? 물론 그렇지 않습니다. 이 방법은 위의 두 가지 방법과 다릅니다. 이는 문서 노드의 고유한 방법이 아니며 아래에서 언급할 다른 노드에도 적용할 수 있습니다.


2. 상위 노드를 통해
가져오기:
(1) parentObj.firstChild: 이 메서드는 노드가 알려진 노드(parentObj)의 첫 번째 하위 노드인 경우 사용할 수 있습니다. . 이 속성은 재귀적으로 사용될 수 있습니다. 즉, parentObj.firstChild.firstChild.firstChild... 형식을 지원하므로 더 깊은 노드를 얻을 수 있습니다. (2) parentObj.lastChild: 분명히 이 속성은 알려진 노드(parentObj)의 마지막 하위 노드를 가져오는 것입니다. firstChild와 마찬가지로 재귀적으로 사용할 수도 있습니다. 사용 중 두 가지를 결합하면 다음과 같은 더 흥미로운 효과를 얻을 수 있습니다. 즉, parentObj.firstChild.lastChild.lastChild...
(3) parentObj.childNodes: 자식 배열을 알아보세요. 노드의 노드를 찾아 루핑이나 인덱싱을 통해 필요한 노드를 찾을 수 있습니다.
참고: 테스트 결과 IE7에서는 직접 하위 노드의 배열을 얻은 반면, Firefox2.0.0.11에서는 하위 노드의 하위 노드를 포함한 모든 하위 노드를 얻은 것으로 나타났습니다. .
(4) parentObj.children: 알려진 노드의 직접 하위 노드 배열을 가져옵니다.
참고: 테스트 후 IE7에서는 childNodes와 효과가 동일하지만 Firefox2.0.0.11에서는 지원하지 않습니다. 이것이 제가 다른 방법들과 다른 스타일을 사용하는 이유입니다. 따라서 사용을 권장하지 않습니다.
(5) parentObj.getElementsByTagName(tagName): 사용법은 자세히 설명하지 않습니다. 알려진 노드의 모든 하위 노드 중 지정된 값의 하위 노드 배열을 반환합니다. 예를 들어 parentObj.getElementsByTagName('A')는 알려진 하위 노드의 모든 하이퍼링크를 반환합니다.


3. 인접 노드를 통해
획득:
(1) neighborNode.previousSibling: 알려진 노드(neighbourNode)의 이전 노드를 가져옵니다. 이 속성은 이전 firstChild와 동일합니다. lastChild는 모두 재귀적으로 사용할 수 있는 것 같습니다. (2) neighborNode.nextSibling: 알려진 노드(neighbourNode)의 다음 노드를 가져오고 재귀도 지원합니다.

4. 하위 노드를 통해
가져오기:
(1) childNode.parentNode: 알려진 노드의 상위 노드를 가져옵니다. 위에 언급된 방법은 단지 몇 가지 기본 방법일 뿐입니다. Prototype과 같은 JavaScript 라이브러리를 사용하는 경우 노드의 클래스를 통해 가져오는 등 다른 방법을 얻을 수도 있습니다. 그러나 위의 다양한 방법을 유연하게 사용할 수 있다면 대부분의 프로그램을 다룰 수 있을 것이라고 생각합니다.