웹 애플리케이션, 특히 Web2.0 프로그램의 개발에서 페이지에서 요소를 얻은 다음 요소의 스타일, 컨텐츠 등을 업데이트해야합니다. 요소를 업데이트하는 방법은 해결해야 할 첫 번째 문제입니다. JavaScript를 사용하여 노드를 얻는 방법에는 여러 가지가 있다는 것은 기쁘게 생각합니다. 다음은 간단한 요약입니다 (다음 방법은 IE7 및 Firefox 2.0.0.11에서 테스트되었습니다).
1. 최상위 문서 노드를 통과하십시오.
(1) 문서 .getElementById (ElementID) :이 방법은 비교적 간단하고 빠른 방법 인 노드 ID를 통해 필요한 요소를 정확하게 얻을 수 있습니다. 페이지에 동일한 ID가있는 여러 노드가 포함 된 경우 첫 번째 노드 만 반환됩니다.
요즘 프로토 타입 및 mootools와 같은 여러 자바 스크립트 라이브러리가 나타 났으며, 이는 더 간단한 방법을 제공합니다 : $ (id), 매개 변수는 여전히 노드의 ID입니다. 이 방법은 다음과 같이 간주 될 수 있습니다
Document.getElementByid ()를 작성하는 또 다른 방법이지만 $ ()의 기능은 더 강력합니다. 특정 사용은 해당 API 문서를 참조하십시오.
(2) document.getElementsByName (elementName) :이 메소드는 노드 이름을 통해 노드를 얻습니다. 이름 에서이 메소드는 노드 요소가 아니라 동일한 이름의 노드 배열을 반환한다는 것을 알 수 있습니다. 그런 다음 노드 속성을 통해 루프를 통해 루프를 얻기 위해 루프를 얻을 수 있습니다.
예를 들어, HTML에서 CheckBox 및 Radio는 동일한 이름 속성 값을 사용하여 그룹의 요소를 식별합니다. 지금 선택한 요소를 얻으려면 먼저 셔플 된 요소를 얻은 다음 루프를 가져 와서 노드의 확인 된 속성 값이 사실인지 확인합니다.
(3) document.getElementsByTagName (tagname) :이 메소드는 노드의 태그를 통해 노드를 얻고 메소드도 배열을 반환합니다.
document.getElementsByTagName ( 'a')은 페이지의 모든 하이퍼 링크 노드를 반환합니다. 노드를 얻기 전에 일반적으로 노드 유형을 알고 있으므로이 방법을 사용하는 것은 비교적 간단합니다. 그러나 단점은 분명합니다. 즉, 반환 된 배열은 매우 클 수 있으며, 이는 많은 시간을 낭비 할 것입니다. 그렇다면이 방법은 쓸모가 없습니까? 물론. 이 방법은 위의 방법과 다릅니다. 문서 노드의 독점적 인 방법이 아닙니다. 아래에 언급 된 바와 같이 다른 노드도 적용 할 수 있습니다.
2. 부모 노드를 통과하십시오.
(1) ParentoBJ.FirstChild :이 방법은 노드가 알려진 노드 (ParentoBJ)의 첫 번째 자식 인 경우 사용할 수 있습니다. 이 속성은 재귀 적으로 사용할 수 있습니다.
parentobj.firstchild.firstchild.firstchild ..., 더 깊은 노드를 얻을 수 있습니다.
(2) parentobj.lastchild : 분명히이 속성은 알려진 노드 (ParentoBJ)의 마지막 자식 노드입니다. 첫 번째 자식과 마찬가지로 재귀 적으로 사용할 수 있습니다.
사용하기 위해 두 가지를 결합하면 더 흥미로운 효과, 즉 Parentobj.firstchild.lastchild.lastchild ...
(3) parentobj.childnodes : 알려진 노드의 하위 노드 어레이를 가져 오면 루프 또는 인덱스를 통해 필요한 노드를 찾을 수 있습니다.
참고 : 테스트 후, 직접 하위 노드 배열은 IE7에서 얻어지는 반면, 자식 노드 배열은 Firefox2.0.0.11에서 얻어집니다. 즉, 자식 노드를 포함한 자식 노드입니다.
(4) ParentoBj. Children : 알려진 노드의 직접 자식 노드 어레이를 받으십시오.
참고 : 테스트 후 IE7에서 효과는 어린이와 동일하지만 Firefox 2.0.0.11은 지원하지 않습니다. 이것이 바로 다른 방법과 다른 스타일을 사용하고 싶은 이유입니다. 따라서 사용하는 것이 좋습니다.
(5) parentobj.getElementsByTagName (tagname) : 사용 방법은 반복되지 않으며 알려진 노드의 모든 자식 노드 중 지정된 값을 가진 알려진 노드의 자식 노드 배열을 반환합니다. 예를 들어:
parentobj.getElementsByTagName ( 'a')은 알려진 자식 노드에서 모든 하이퍼 링크를 반환합니다.
3. 인접한 노드를 통해 얻으십시오.
(1) Neighbornode. PreviousSibling : 알려진 노드 (Neighbournode)의 이전 노드를 가져옵니다. 이 숙박 시설은 이전 자녀와 마찬가지로 재귀 적으로 사용되는 것 같습니다.
(2) neighbornode.nextsibling : 알려진 노드 (Neighbournode)의 다음 노드를 가져 오며 재귀를 지원합니다.
4. 어린이 노드를 통해 얻으십시오 :
(1) Childnode.parentNode : 알려진 노드의 상위 노드를 가져옵니다.
위에서 언급 한 방법은 몇 가지 기본 방법입니다. 프로토 타입과 같은 JavaScript 라이브러리를 사용하는 경우 노드를 통한 클래스 획득과 같은 다른 다른 방법을 얻을 수도 있습니다. 그러나 위의 방법을 유연하게 사용할 수 있다면 대부분의 절차를 대처할 수 있어야한다고 생각합니다.