JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.2.3 Selecting Elements by Type

15.2.3 Selecting Elements by Type


You can select all HTML or XML elements of a specified type (or tag name) using the getElementsByTagName() method of the Document object. To obtain a read-only array-like object containing the Element objects for all elements in a document, for example, you might write:

var spans = document.getElementsByTagName("span");

Like getElementsByName(), getElementsByTagName() returns a NodeList object. (See the sidebar in this section for more on the NodeList class.) The elements of the returned NodeList are in document order, so you can select the first

element of a document like this:

var firstpara = document.getElementsByTagName("p")[0];

HTML tags are case-insensitive, and when getElementsByTagName() is used on an HTML document, it performs a case-insensitive tag name comparison. The spans variable above, for example, will include any elements that were written as .

You can obtain a NodeList that represents all elements in a document by passing the wildcard argument “*” to getElementsByTagName().

The Element class also defines a getElementsByTagName() method. It works in the same way as the Document version, but it only selects elements that are descendants of the element on which it is invoked. So to find all elements inside the first

element of a document, you could write:

var firstpara = document.getElementsByTagName("p")[0]; var firstParaSpans = firstpara.getElementsByTagName("span");

For historical reasons, the HTMLDocument class defines shortcut properties to access certain kinds of nodes. The images, forms, and links properties, for example, refer to objects that behave like read-only arrays of ,, and elements (but only tags that have an hrefattribute). These properties refer to HTMLCollection objects, which are much like NodeList objects, but they can additionally be indexed by element ID or name. Earlier, we saw how you could refer to a namedelement with an expression like this:

document.shipping_address

With the document.forms property, you can also refer more specifically to the named (or ID’ed) form like this:

document.forms.shipping_address;

The HTMLDocument object also defines synonymous embeds and plugins properties that are HTMLCollections of elements. The anchors property is nonstandard but refers to elements that have a name attribute rather than an href attribute. Theproperty is standardized by HTML5 to be an HTMLCollection ofelements, but it is not, at the time of this writing, universally implemented.

HTMLDocument also defines two properties that refer to special single elements rather than element collections. document.body is theelement of an HTML document, and document.head is theelement. These properties are always defined: if the document source does not explicitly includeandelements, the browser creates them implicitly. The documentElement property of the Document class refers to the root element of the document. In HTML documents, this is always anelement.

NodeLists and HTMLCollections

getElementsByName() and getElementsByTagName() return NodeList objects, and properties like document.images and document.forms are HTMLCollection objects.

These objects are read-only array-like objects (see §7.11 ). They have length properties and can be indexed (for reading but not writing) like true arrays. You can iterate the contents of a NodeList or HTMLCollection with a standard loop like this:

for(var i = 0; i < document.images.length; i++) // Loop through all images document.images[i].style.display = "none"; // ...and hide them.

You cannot invoke Array methods on NodeLists and HTMLCollections directly, but you can do so indirectly:

var content = Array.prototype.map.call(document.getElementsByTagName("p"), function(e) { return e.innerHTML; });

HTMLCollection objects may have additional named properties and can be indexed with strings as well as numbers.

For historical reasons, both NodeList and HTMLCollection objects can also be treated as functions: invoking them with a number or string argument is the same as indexing them with a number or string. Use of this quirk is discouraged.

15.2 Selecting Document Elements | 367

Both the NodeList and HTMLCollection interfaces were designed with languages less dynamic than JavaScript in mind. Both define an item() method. It expects an integer and returns the element at that index. There is never any need to call this method in JavaScript because you can simply use array indexing instead. Similarly, HTMLCollection defines a namedItem() method that returns the value of a named property, but JavaScript programs can use array indexing or regular property access instead.

One of the most important and surprising features of NodeList and HTMLCollection is that they are not static snapshots of a historical document state but are generally live and the list of elements they contain can vary as the document changes. Suppose you call getElementsByTagName('div') on a document with no

elements. The return value is a NodeList with a length of 0. If you then insert a new
element into the document, that element automatically becomes a member of the NodeList, and the length property changes to 1.


Usually, the liveness of NodeLists and HTMLCollections is quite helpful. If you will be adding or removing elements from the document while iterating through a NodeList, however, you may want to make a static copy of the NodeList first:

var snapshot = Array.prototype.slice.call(nodelist, 0);

欢迎转载,转载请注明来自一手册:http://yishouce.com/book/1/27951.html
友情链接It题库(ittiku.com)| 版权归yishouce.com所有| 友链等可联系 admin#yishouce.com|粤ICP备16001685号-1