JavaScript DOM 학습 4장 getElementByTagNames_기본 지식

getElementByTagNames(복수형 이름 참고)는 일부 태그 요소를 가져와서 순서대로 배열에 저장합니다. 이는 매우 유용합니다. 예를 들어 이전 장의 TOCScript에서는 전체 기사의 H3 및 H4를 모두 얻어야 합니다.
노드 프로토타입에 이 기능을 추가하고 싶은데 IE와 Safari에서는 작동하지 않습니다. 따라서 일반 함수로만 처리할 수 있습니다.


getElementByTagNames를 사용하면 두 개의 매개변수가 있습니다.
1. 쉼표로 구분된 태그 이름 문자열입니다.
2. 선택적인 시작 요소입니다. 해당 태그가 존재하면 해당 요소의 하위 요소에서 검색되고, 존재하지 않으면 전체 문서에서 검색됩니다.
이 함수는 요청된 태그 이름을 기반으로 소스 코드에 나타나는 순서대로 배열(노드 목록이 아닌)을 반환합니다. 이 정렬을 위해서는 브라우저가 sourceIndex 또는 CompareDocumentPosition을 지원해야 합니다. 둘 다 지원되지 않는 경우(Safari) getElementByTagNames() 함수를 호출할 때 태그 이름의 순서를 따릅니다.
예제 1

코드 복사 코드는 다음과 같습니다.

var headerList = getElementsByTagNames('h1 ,h2, h3,h4');

이제 headerList는 문서에 H1-H4를 포함하는 배열이며 나타나는 순서에 따라 정렬됩니다.
예제 2

코드 복사 코드는 다음과 같습니다.

var 요소 = document .getElementById( 'test');
var formFieldList = getElementsByTagNames('input,select,textarea',element);

이제 formFieldList는 ID가 test인 요소 아래의 모든 하위 요소에 포함됩니다. 나타나는 순서대로 정렬된 입력, 선택 및 TEXTAREA의 배열입니다.

코드 복사 코드는 다음과 같습니다.

function getElementsByTagNames(list,obj) {
if (!obj) var obj = document;
var tagNames = list.split(',')
var resultArray = new Array()
for (var i=0;i< tagNames.length ;i ) {
var 태그 = obj.getElementsByTagName(tagNames[i])
for (var j=0;j resultArray.push(tags [j] );
}
}
var testNode = resultArray[0];
if (!testNode) return []
if (testNode.sourceIndex) {
resultArray .sort( 함수 (a,b) {
                return a.sourceIndex - b.sourceIndex;
                                      (a ,b) {  3 반환 - (a.compareDocumentPosition(b) & 6) 설명




코드 복사


코드는 다음과 같습니다.

function getElementsByTagNames(list,obj)
{

if (!obj)var obj = document; 먼저 시작 요소 obj를 정의합니다. 지정되지 않은 경우 기본값은 document입니다.

코드 복사


코드는 다음과 같습니다.

var tagNames = list.split (', ');
var resultArray = new Array();

이 태그 이름을 쉼표로 구분하세요. 결과를 저장하려면 배열을 사용하십시오.

코드 복사


코드는 다음과 같습니다.

for (var i=0 ;i< tagNames.length;i ) {
var 태그 = obj.getElementsByTagName(tagNames[i])

for (var j=0;jresultArray. push(태그 [j]) } }
이제 가장 간단한 getElementByTagName() 메서드를 사용하여 모든 태그 이름을 반복한 다음 결과를 resultArray에 전달합니다. 여기서 중요한 점 중 하나는 getElementByTagName이 노드 목록을 반환하기 때문에 array.concat()을 사용하여 새 배열을 만들 수 없다는 것입니다. 요소를 하나씩 밀어 넣는 것이 내가 찾을 수 있는 가장 좋은 방법입니다.

resultArray에 저장된 필수 태그 이름의 요소에 대한 포인터 배열을 얻지만 요소는 여전히 우리가 제공한 태그 순서대로 정렬됩니다. 다시 정리해야 합니다.

코드 복사 코드는 다음과 같습니다.

var testNode = resultArray[0]

이제 정렬을 시작합니다. 브라우저가 sourceIndex 또는 CompareDocumentPosition을 지원하는지 알아야 하며 그런 다음 얻은 원본 데이터에서 일부 감지를 수행합니다.

코드 복사 코드는 다음과 같습니다.

if (!testNode) return []

여기에 첫 번째 노드가 없는 경우(즉, 결과에 필요한 요소가 없는 경우) ), 하나의 빈 배열을 반환합니다.



배경: array.sort()
array.sort() 메소드에는 선택적 함수 매개변수가 있습니다. 이 함수는 두 요소(종종 a와 b라고 함)를 비교하는 데 사용됩니다. 이 함수는 첫 번째 항목이 먼저 와야 하는 경우 음수를 반환하고, 두 번째 항목이 먼저 와야 하는 경우 양수 값을 반환합니다.

sourceIndex
브라우저가 sourceIndex를 지원하는 경우 요소의 sourceIndex를 기준으로 정렬합니다. sourceIndex는 소스 코드에 있는 요소의 인덱스 값을 아는 데 사용할 수 있는 Microsoft의 매우 유용한 확장입니다. 페이지의 첫 번째 요소()의 인덱스 값은 0이고 두 번째 요소()는 1입니다. sourceIndex는 getElementByTagName(*)에 있는 요소의 인덱스 값이기도 합니다.

코드 복사 코드는 다음과 같습니다.

if (testNode.sourceIndex) {
resultArray.sort(function (a,b) {
return a.sourceIndex - b.sourceIndex;
})
}

첫 번째를 사용합니다. 요소 sourceIndex 값은 두 번째 요소의 sourceIndex를 뺀 값입니다. 음수 값이면 첫 번째 요소가 양수 값이면 두 번째 요소의 순위가 첫 번째로 지정됩니다. 이것이 sort()에 필요한 것입니다. resultArray의 요소는 이제 문서에서의 위치를 ​​기준으로 정렬됩니다.

compareDocumentPosition
브라우저가 CompareDocumentPosition을 지원하는 경우 이 방법을 사용하여 정렬하세요. CompareDocumentPosition은 level3의 핵심 메서드입니다. 문서에서 두 노드의 위치를 ​​비교한 다음 값을 반환할 수 있습니다.

1 찾을 수 없음

2 앞에

4 in After

8은

을 포함합니다. 16은

에 포함됩니다. 예를 들어 태그가 포함되고 다른 태그 뒤에 오면 16 4=20이 반환됩니다.

코드 복사 코드는 다음과 같습니다.

else if (testNode.compareDocumentPosition ) {
resultArray.sort(function (a,b) {
return 3 - (a.compareDocumentPosition(b) & 6);
})
}

us CompareDocumentPosition의 값 2와 4(전후)에만 관심이 있습니다. 따라서 결과를 6과 AND하여 결과는 2 또는 4가 됩니다(물론 요소가 요소 앞이나 뒤에 있을 수 없기 때문에 결과는 6이 될 수 없습니다)

b가 a에 있는 경우 그런 다음 4를 반환하지만 sort()에는 음수가 필요합니다. b가 a 앞에 오면 2를 반환하지만 sort()에는 양수가 필요합니다. sort()에 올바른 결과를 제공하려면 3을 뺍니다. 이는 1 또는 -1을 가져오므로 sort()는 요소를 올바르게 정렬할 수 있으며 resultArray의 요소도 문서에 나타나는 순서대로 정렬됩니다.

코드 복사 코드는 다음과 같습니다.

return resultArray
}

그런 다음 resultArray를 호출한 함수에 반환합니다. 브라우저가 sourceIndex 또는 CompareDocumentPosition 배열을 지원하지 않으면 정렬이 수행되지 않습니다.

번역 주소: http://www.quirksmode.org/dom/getElementsByTagNames.html
재인쇄를 위해 다음 정보를 보관해 주세요.
저자: Bei Yu(tw: @rehawk)