HTML DOM 노드 elements_javascript 기술을 얻기 위한 Js 방법 요약

업데이트할 요소를 구하는 방법이 해결해야 할 첫 번째 문제입니다. 다행히 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: Obtained 하위 노드의 배열을 알고 있습니다. 그런 다음 루핑이나 인덱싱을 통해 필요한 노드를 찾을 수 있습니다.
참고: 테스트 결과 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 라이브러리를 사용하는 경우 노드의 클래스를 통해 가져오는 등 다른 방법을 얻을 수도 있습니다.그러나 위의 다양한 방법을 유연하게 사용할 수 있다면 대부분의 프로그램에 대처할 수 있을 것이라고 생각합니다

이 문서는 재인쇄된 문서이므로 HTML Node를 통해 얻는 것은 바람직하지 않습니다. firstChild 및 lastChild. 브라우저에 따라 firstChild가 parentObj의 속성 개체를 반환할 수 있기 때문입니다.