JavaScript DOM Learning Chapter 4 getElementByTagNames

JavaScript DOM Learning Chapter 4 getElementByTagNames_Basic Knowledge

WBOY

Release： 2016-05-16 18:34:25

Original

1143 people have browsed it

getElementByTagNames (note the plural names) will get some tag elements and save them in an array in order. This is very useful. For example, in the TOCScript of the previous chapter, you need to obtain all H3 and H4 in the entire article.
I really hope to add this feature to the node prototype, but it doesn’t work in IE and Safari. So it can only be treated as an ordinary function.

Using
getElementByTagNames has two parameters:
1. A string of tag names separated by commas.
2. An optional start element. If they exist, these tags are searched in the child elements of the element, and if they do not exist, they are searched in the entire document.
This function returns an array (rather than a list of nodes) based on the requested tag names, arranged in the order they appear in the source code. For this sorting, the browser needs to support sourceIndex or compareDocumentPosition. If neither is supported (Safari), then the order of tag names when calling the getElementByTagNames() function will be followed.
Example 1

Copy code The code is as follows:

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

Now headerList is the array containing H1-H4 in the document, sorted according to the order in which they appear.
Example 2

Copy code The code is as follows:

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

Now formFieldList is included in all child elements under the element with ID test Arrays of input, select, and TEXTAREA, arranged in the order in which they appear.

Copy code The code is as follows:

function getElementsByTagNames(list,obj) { 
 if (!obj) var obj = document; 
 var tagNames = list.split(','); 
 var resultArray = new Array(); 
 for (var i=0;i var tags = 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( function (a,b) { 
                return a.sourceIndex - b.sourceIndex; 
                                               (a ,b) { 
              return 3 - (a.compareDocumentPosition(b) & 6); Explanation




Copy code


 The code is as follows:

function getElementsByTagNames(list,obj)

{ if (!obj)var obj = document; First define the starting element obj. If not given, the default is document.

Copy code

The code is as follows:

var tagNames = list.split(', ');

var resultArray = new Array(); Separate these tag names with commas. Use an array to save the results.

Copy code

The code is as follows:

for (var i=0;i< tagNames.length;i ) {

var tags = obj.getElementsByTagName(tagNames[i]); for (var j=0;jresultArray.push(tags [j]); } }
Now we iterate through all tag names, using the simplest getElementByTagName() method, and then pass the result into resultArray. One important point here is that because getElementByTagName returns a list of nodes, I can't use array.concat() to create a new array. Pushing the elements in one by one is the best way I can find.

We get an array of pointers to the elements of the required tag names stored in the resultArray, but the elements are still arranged in the order of the tags we gave them. We need to sort things out again.

Copy code The code is as follows:

var testNode = resultArray[0];

Now we start sorting. We need to know whether the browser supports sourceIndex or compareDocumentPosition, and then we do some detection on the original data we obtained

Copy code The code is as follows:

if (!testNode) return [];

If there is no first node here (that is, there is no element we need in the result), return one Empty array.

Background: array.sort()
The array.sort() method has an optional function parameter. This function is used to compare two elements (often called a and b). This function returns a negative number if the first one should come first, and a positive value if the second one should come first.

sourceIndex
If the browser supports sourceIndex, we will sort based on the sourceIndex of the elements. sourceIndex is a very useful extension from Microsoft that can be used to know the index value of an element in the source code. The index value of the first element on the page () is 0, the second element () is 1, and so on. sourceIndex is also the index value of the element in getElementByTagName(*).

Copy code The code is as follows:

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

We use the first element The sourceIndex value is minus the sourceIndex of the second element. If it is a negative value, then the first element is ranked first. If it is a positive value, then the second element is ranked first. This is what sort() requires. The elements in the resultArray are now sorted based on their position in the document.

compareDocumentPosition
If the browser supports compareDocumentPosition, then use this method to sort. compareDocumentPosition is the core method of level3. It can compare the positions of two nodes in the document and then return a value:

1 not found

2 in front

4 in After

8 contains

16 is contained by

For example, if a tag is included and follows another tag, then 16 4=20 is returned.

Copy code The code is as follows:

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

us Only interested in values 2 and 4 of compareDocumentPosition: before or after. So we AND the result with 6, so that the result will be 2 or 4 (of course the result cannot be 6, because an element cannot be before an element and after an element)

If b is in a Then it returns 4, but sort() requires a negative number. If b comes before a, it returns 2, but sort() requires a positive number. To give sort() a correct result I subtract them by 3. This will get 1 or -1, so that sort() can sort the elements correctly, and the elements in the resultArray are also arranged in the order in which they appear in the document.

Copy code The code is as follows:

 
return resultArray; 
} 

Then we return the resultArray to the function that called it. Remember that if the browser does not support sourceIndex or compareDocumentPosition arrays there will be no sorting.

Translation address: http://www.quirksmode.org/dom/getElementsByTagNames.html
Please keep the following information for reprinting
Author: Bei Yu (tw: @rehawk)