성명! ! , 이 글은 다른 분의 글을 재인쇄한 글입니다. 우연히 사용해보고 매우 실용적이라고 느껴져서 나중에 활용하려고 집어왔습니다! !
원작자님께 감사드립니다! ! ! ,
웹 애플리케이션, 특히 Web 2.0 프로그램의 개발에서는 페이지의 요소를 얻은 다음 해당 요소의 스타일, 컨텐츠 등을 업데이트해야 하는 경우가 많습니다. 업데이트할 요소를 구하는 방법이 해결해야 할 첫 번째 문제입니다. 다행스럽게도 JavaScript를 사용하여 노드를 얻는 방법은 여러 가지가 있습니다. 다음은 간략한 요약입니다(다음 방법은 IE7 및 Firefox2.0.0.11에서 테스트되었습니다).
1. 최상위 문서 노드를 통해 얻습니다.
(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 라이브러리를 사용하는 경우 노드의 클래스를 통해 가져오는 등 다른 방법을 얻을 수도 있습니다. 그러나 위의 다양한 방법을 유연하게 사용할 수 있다면 대부분의 프로그램을 다룰 수 있을 것이라고 생각합니다.
이 문서는 복제된 문서입니다. firstChild 및 lastChild를 통해 HTML 노드를 얻는 것은 권장되지 않습니다. 브라우저에 따라 firstChild가 parentObj의 속성 개체를 반환할 수 있기 때문입니다.