What's arr [x] in blow code? Arrays have numbers and x is not a number!

Question

Code:
<p>hi</p>
<p>hello</p>
<p>hi</p>
<script>
var arr = document.getElementsByTagName("p");
for (var x = 0; x < arr.length; x++) {
arr[x].innerHTML = "Hi there";
}
</script>

Answer 1

A simple answer to my question I asked long time ago is:
Yes arrays have numbers and x is a variable that stands for a number that changes each time the loop runs.

Answer 2

Firstly, getElementsByTagName function collects all html elements by tag name, in this case, "p" means <p> or paragraph. The paragraphs are collected/stored into an array, named <arr>. The number of items in <arr> depends on how many paragraphs exist in your document.

The for loop is then used to enumerate each item in <arr> using the array index, in this case <x> is the array index. Because the array contains paragraph elements, the arr[x] is pretty much referring to paragraph[x] in the document.

During the for loop process each paragraph element in the document will be updated, to show "Hi there" string.

Hth, cmiiw

Answer 3

@Waqas Shah,

I just did a little research upon this matter, and I found I had given you a slightly incorrect explanation. *Oops* :D

Anyways, according to w3schools:

The getElementsByTagName collects all elements matching the specified tag name, but, here's my wrong, it returns a NodeList object, which actually is a collection of nodes, however the similarity with an array is that the nodes in the NodeList can be accessed using index, just like a regular array!

Source:
https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

The same method is also used by getElementsByClassName, also returning NodeList, only this one collects all elements styled with specific class name (CSS class).

Source:
https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

P.S. The code on your recent post contains <document>.layers which is considered obsolete, use getElementById instead. I don't know whether or not that code still works, you might wanna check for yourself though,

Cheers..

Answer 4

That code will run fine as long as there's at least one paragraph in the document.

document.getElementsByTagName("p")[0] refers to the first item in the collection (zero based index), since we're collecting paragraphs the first item will be a paragraph element, the .innerHTML refer to that paragraph stored at index 0 inside the collection. Did I get you right?

Operator? what did you mean?

Answer 5

Yeah that's right, it's direct access to the getElementsByTagName result collection, without using any variable, so..
document.getElementsByTagName("p") here acts like the NodeList/Array of elements, that's why you can put [x].innerHTML immediately after it.

However imo this is not a good practice, as there was no check whether or not the getElementsByTagName returned a non empty collection.

Answer 6

@Ipang That means arrays can have other than numbers to access array values!
This is something should be in JavaScript lesson of arrays.

Can we access with . [ ] other than array values like objects like the "myDoc.layers [i]" in the following code ? :

#target illustrator

var myDoc=app.activeDocument;

var layerCount=myDoc.layers.length;

for (var i = layerCount - 1; i >= 0; i--) {

    var currentLayer = myDoc.layers[i];

    currentLayer.locked = false;

    if (currentLayer.visible == false){

        currentLayer.visible = true;

        currentLayer.remove();

        }

    }

Answer 7

@Ipang

Thanks for researching.

The first code I provided in the question is provided by Solo Learn in JavaScript course. and they wrote in the lesson that getElementsByTagName and getElementsByCassName find elements and return them as arrays.

The second code I provided is Adobe Illustrator script code and it has its own objects. The script is written in JS and runs well.

Answer 8

What syntax is used in this code:

document.getElementsByTagName("P")[0].innerHTML = "Hello World!";

I mean [0].inner..... is written without any operator before?

May be because the
document.getElementsByTagName("P")
is working as an Array name like arr in arr[0].something.

Answer 9

I mean there's no operator in between like dot separator like in document.getElementsByCassName.
I know how array indexing and accessing.