JS 부모 노드 가져오기 Method_javascript 팁

업데이트할 요소를 구하는 방법이 해결해야 할 첫 번째 문제입니다. 다행스럽게도 JavaScript를 사용하여 노드를 얻는 방법은 여러 가지가 있습니다. 다음은 간략한 요약입니다(다음 방법은 IE7 및 Firefox2.0.0.11에서 테스트되었습니다).
    1. 최상위 문서 노드를 통해 가져옵니다. :
(1) document.getElementById(elementId): 이 메소드는 노드의 ID를 통해 필요한 요소를 정확하게 얻을 수 있으며, 이는 비교 쉽고 빠른 방법입니다. 페이지에 동일한 ID를 가진 여러 노드가 포함된 경우 첫 번째 노드만 반환됩니다.
요즘에는 프로토타입, Mootools 등 더 간단한 메서드인 $(id)를 제공하는 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와 같은 더 흥미로운 효과를 얻을 수 있습니다. : 알려진 노드의 하위 노드 배열을 가져온 다음 루핑이나 인덱싱을 통해 필요한 노드를 찾습니다.
                                                                                                                   노드의 하위 노드입니다.          (4)
parentObj.children: 알려진 노드의 직접 하위 노드 배열을 가져옵니다.    참고
: 테스트 결과 IE7의 childNodes와 동일한 효과가 있지만 Firefox2.0.0.11에서는 지원하지 않습니다. 이것이 제가 다른 방법들과 다른 스타일을 사용하는 이유입니다.따라서 사용을 권장하지 않습니다.
       (5) parentObj.getElementsByTagName(tagName): 사용 방법은 자세히 설명하지 않습니다. 모든 하위 노드 중 지정된 값의 하위 노드 배열을 반환합니다. 알려진 노드의 예: parentObj.getElementsByTagName('A')는 알려진 하위 노드의 모든 하이퍼링크를 반환합니다.
3. 인접 노드를 통해 획득:
(1) neighbourNode.previousSibling: 알려진 노드(neighbourNode)의 이전 노드를 가져옵니다. 이 속성은 이전의 firstChild 및 lastChild와 마찬가지로 재귀적으로 사용할 수 있는 것으로 보입니다.
(2) neighbourNode.nextSibling: 알려진 노드(neighbourNode)의 다음 노드를 가져오고 재귀도 지원합니다.
4. 하위 노드를 통해 획득:
(1) childNode.parentNode: 알려진 노드의 상위 노드를 가져옵니다.

위에서 언급한 방법은 단지 몇 가지 기본적인 방법일 뿐이며 Prototype과 같은 JavaScript 라이브러리를 사용하는 경우 노드의 클래스를 통해 얻는 등 다른 방법도 얻을 수 있습니다. 하지만 위의 다양한 방법을 유연하게 활용한다면 대부분의 프로그램을 다룰 수 있을 것이라 생각합니다