Accessing All Images in the Web Page
Problem
You want to access all img elements in a given document.
Solution
Use the document.getElementsByTagName() method, passing in img as the parameter:
var imgElements = document.getElementsByTagName('img');
EXPLAIN
The document.getElementsByTagName() method returns a collection of nodes (a NodeList) of a given element type, such as the img tag in the solution. The collection can be traversed like an array, and the order of nodes is based on the order of the elements within the document (the first img element in the page is accessible at index 0, etc.):var imgElements = document.getElementsByTagName('img');
for (let i = 0; i < imgElements.length; i++) {
var img = imgElements[i];
...
}
The NodeList collection can be traversed like an array, but it isn’t an Array object—you can’t use Array object methods, such as push() and reverse(), with a NodeList. Its only property is length, and its only method is item(), returning the element at the position given by an index passed in as parameter:
var img = imgElements.item(1); // second image
NodeList is an intriguing object because it’s a live collection, which means changes made to the document after the NodeList is retrieved are reflected in the collection. demonstrates the NodeList live collection functionality, as well as getEle mentsByTagName.
Three images in the web page are accessed as a NodeList collection using the getElementsByTagName method. The length property, with a value of 3, is output to the console. Immediately after, a new paragraph and img elements are created, and the img is appended to the paragraph. To append the paragraph following the others in the page, getElementsByTagName is used again, this time with the paragraph tags (p).
We’re not really interested in the paragraphs, but in the paragraphs’ parent elements, found via the parentNode property on each paragraph. The new paragraph element is appended to the paragraph’s parent element, and the previously accessed NodeList collection’s length property is again printed out. Now, the value is 4, reflecting the addition of the new img element.
Demonstrating getElementsByTagName and the NodeList live collection property
<!DOCTYPE html>
<html>
<head>
<title>NodeList</title>
</head>
<body>
<p><img src="firstimage.jpg" alt="image description" /></p>
<p><img src="secondimage.jpg" alt="image description" /></p>
<p><img src="thirdimage.jpg" alt="image description" /></p>
<script>
var imgs = document.getElementsByTagName('img');
console.log(imgs.length);
var p = document.createElement("p");
var img = document.createElement("img");
img.src="someimg.jpg";
p.appendChild(img);
var paras = document.getElementsByTagName('p');
paras[0].parentNode.appendChild(p);
console.log(imgs.length);
</script>
</body>
</html>
In addition to using getElementsByTagName() with a specific element type, you can also pass the universal selector (*) as a parameter to the method to get all elements:
var allelems = document.getElementsByTagName('*');
In the code demonstrated in the discussion, the children nodes are traversed using a traditional for loop. Array functionality, such as forEach(), can’t be used directly with a NodeList because it’s not an Array. You can coerce the NodeList, as is demonstrated in, but this type of coercion has its own drawbacks.
Namespace Variation
Like most of the DOM API access methods, there is a variation of getElementsByTag Name(), getElementsByTagNameNS, which can be used in documents that support mul‐ tiple namespaces, such as an XHTML web page with embedded MathML or SVG.
SVG document is embedded in XHTML. Both the XHTML docu‐ ment and the embedded SVG make use of the title element. The title element in the XHTML document is part of the default XHTML namespace, but the title in the SVG is part of the Dublin Core namespace.
When the title element is accessed, information about the title, including its name‐ space, the prefix, the localName, and the textContent, are printed out. The prefix is the dc component of dc:title, and the localName is the title part of dc:title. The textContent is a new property, added with the DOM Level 2, and is the text of the element. In the case of title (either the XHTML or the Dublin Core element), it would be the title text.
The differences between the namespace and nonnamespace variation of getElementsByTagName
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Namespace</title>
<script type="text/javascript">
//<![CDATA[
window.onload=function () {
var str = "";
var title = document.getElementsByTagName("title");
for (var i = 0; i < title.length; i++) {
str += title.item(i).namespaceURI + " " +
title.item(i).prefix + " " +
title.item(i).localName + " " +
title.item(i).text + " ";
}
alert(str);
str = "";
if (!document.getElementsByTagNameNS) return;
var titlens =
document.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/",
"title");
for (var i = 0; i < titlens.length; i++) {
str += titlens.item(i).namespaceURI + " " +
titlens.item(i).prefix + " " +
titlens.item(i).localName + " " +
titlens.item(i).textContent + " ";
}
alert(str);}
//]]>
</script>
</head>
<body>
<h1>SVG</h1>
<svg id="svgelem" height="800" width="800" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="300" cy="300" r="300"
fill="red" />
<metadata>
<rdf:RDF xmlns:cc="http://web.resource.org/cc/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<cc:Work rdf:about="">
<dc:title>Sizing Red Circle</dc:title>
<dc:description></dc:description>
<dc:subject>
<rdf:Bag>
<rdf:li>circle</rdf:li>
<rdf:li>red</rdf:li>
<rdf:li>graphic</rdf:li>
</rdf:Bag>
</dc:subject>
<dc:publisher>
<cc:Agent rdf:about="http://www.openclipart.org">
<dc:title>Testing RDF in SVG</dc:title>
</cc:Agent>
</dc:publisher>
<dc:creator>
<cc:Agent>
<dc:title id="title">Testing</dc:title>
</cc:Agent>
</dc:creator>
<dc:rights>
<cc:Agent>
<dc:title>testing</dc:title>
</cc:Agent>
</dc:rights>
<dc:date></dc:date>
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<cc:license
rdf:resource="http://web.resource.org/cc/PublicDomain"/>
<dc:language>en</dc:language>
</cc:Work>
<cc:License
rdf:about="http://web.resource.org/cc/PublicDomain">
<cc:permits
rdf:resource="http://web.resource.org/cc/Reproduction"/>
<cc:permits
rdf:resource="http://web.resource.org/cc/Distribution"/>
<cc:permits
rdf:resource="http://web.resource.org/cc/DerivativeWorks"/>
</cc:License>
</rdf:RDF>
</metadata>
</svg>
</body>
</html>
The result of the application can vary between browsers. When using Firefox and later
However, when using the namespace varia‐ tion (getElementsByTagNameNS()), and specifying the Dublin Core namespace, all of the Dublin Core titles in the RDF within the SVG are returned.
When using getElementsByTagName with title in Chrome and Opera, both the XHTML title and the Dublin Core titles are returned,
Though IE8 doesn’t directly support the XHTML MIME type, if the page is served as text/html using some form of content negotiation, IE will process the page as HTML. However, though the getElementsByTagName() works with IE, the namespaced version of the method, getElementsByTagNameNS(), does not. All of the values are returned as undefined. IE8 doesn’t return the dc:title entries in the SVG, either. If the Dublin Core namespace is declared in the html element, instead of in the svg element, IE8 does return all of the dc:title entries, as well as the XHTML title:
An alternative approach uses a tag name string that concatenates the prefix and localName. All of the browsers will find the dc:title using the following:
var titles = document.getElementsByTagName("dc:title");
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment