JAVA SCRIPT - Discovering All Images in Articles Using the Selectors API

 Discovering All Images in Articles Using the Selectors API

Problem

You want to get a list of all img elements that are descendants of article elements, without having to traverse an entire collection of elements.

Solution

Use the Selectors API and access the img elements contained within article elements using CSS-style selector strings:

var imgs = document.querySelectorAll("article img");

EXPLAIN 

The Selectors API has achieved support in all modern browser versions, though there are quirks in support among the browsers. There are two selector query API methods. The first, querySelectorAll(), is demon‐ strated in the solution; the second is querySelector(). The difference between the two is querySelectorAll(), which returns all elements that match the selector criteria, while querySelector() only returns the first found result.

The selectors syntax is derived from CSS selector syntax, except that rather than style the selected elements, they’re returned to the application. In the example, all img ele‐ ments that are descendants of article elements are returned. To access all img elements regardless of parent element, use:

var imgs = document.querySelectorAll("img");

In the solution, you’ll get all img elements that are direct or indirect descendants of an article element. This means that if the img element is contained within a div that’s within an article, the img element will be among those returned:

<article>
 <div>
 <img src="..." />
 </div>
</article>

If you want only those img elements that are direct children of an article element, use the following:

var imgs = document.querySelectorAll("article> img");

If you’re interested in accessing all img elements that are immediately followed by a paragraph, use:

var imgs = document.querySelectorAll("img + p");

If you’re interested in an img element that has an empty alt attribute, use the following:

var imgs = document.querySelectorAll('img[alt=""]');

If you’re only interested in img elements that don’t have an empty alt attribute, use:

var imgs = document.querySelectorAll('img:not([alt=""])');

The negation pseudoselector (:not) is used to find all img elements with alt attributes that are not empty. Unlike the collection returned with getElementsByTagName() covered earlier, the col‐ lection of elements returned from querySelectorAll() is not a “live” collection. Up‐ dates to the page are not reflected in the collection if the updates occur after the collection is retrieved.

Namespace Variation and CSS Selectors 

The following is how to define a namespace in CSS3, via the Namespace module:

@namespace svg "http://www.w3.org/2000/svg";

If an element is given with a namespace prefix, such as the following:

<q:elem>...</q:elem>

to style the element, use:

@namespace q "http://example.com/q-markup";
q|elem { ... }

and to style an attribute, you could use:

@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }

Covered the concept of namespaces when querying against the document, and introduced the namespace-specific method getElementsByTagNameNS(). Because the CSS selectors allow for resolving namespaces, we might assume we could use name‐ spaces with querySelector() and querySelectorAll().

In fact, we could with earlier iterations of the API Selectors draft, but there is no way to do so today. Now, a namespace error will be thrown if the namespace is not resolved before using the Selectors API methods. Unfortunately, the Selectors API doesn’t provide an ap‐ proach to resolve the namespace before using one of the methods.

Instead, the Selectors API specification recommends using JavaScript processing to handle namespaces. For instance, to find all of the dc:title elements within an SVG element in a document, use the following:

var list = document.querySelectorAll("svg title");
var result = new Array();
var svgns = "http://www.w3.org/2000/svg"
for(var i = 0; i < list.length; i++) {
 if(list[i].namespaceURI == svgns) {
 result.push(list[i]);
}