Accessing html elements through document interface

Question

LocatingNodes.html

<!DOCTYPE html>
<html>
    <head>
        <script src = "../js/LocatingNodes.js" type="text/javascript">
        </script>
    </head>
    <body>
        <h2 style = "color:black" id="cute_text">Click on a button to change the color</h2>
        <form>
        <input onclick="change_color1()" type="button" value="Change using method 1">
        </form>
    </body>
</html>

LocatingNodes.js

function change_color1()
{
    alert(document.childNodes[0]);
    alert(document.childNodes[1]);
    alert(document.childNodes[1].childNodes[0]);
    alert(document.childNodes[1].childNodes[1]);
    alert(document.childNodes[1].childNodes[2]);
    alert(document.childNodes[1].childNodes[2].childNodes[0]);
    alert(document.childNodes[1].childNodes[2].childNodes[1]);
    alert(document.childNodes[1].childNodes[2].childNodes[2]);
    alert(document.childNodes[1].childNodes[2].childNodes[3]);
    alert(document.childNodes[1].childNodes[2].childNodes[4]);
    alert(document.childNodes[1].childNodes[2].childNodes[5]);
    document.childNodes[1].childNodes[2].childNodes[1].style.color="red";
}

I tried running above program. The output I get in 11 alert windows is given below:

[object DocumentType],
[object HTMLhtmlElement],
[object HTMLHeadElement],
[object Text],
[object HTMLBodyElement], 
[object Text], 
[object HTMLHeadingElement], 
[object Text], 
[object HTMLFormElement], 
[object Text], 
undefined

After that color of the heading changes to red when I click on 'OK' of the last alert window. I am wondering that how it is picking up the elements. Also I didn't get the element tag while accessing tags in the body. Can someone please explain how the output is being carried out? Also, why [object Text] is being printed after every tag that is within tag?

Answer 1

I am wondering that how it is picking up the elements.

The document object implements the NodeList interface , so all child nodes are available through the childNodes property. Also see MDN: Node.childNodes .

Also I didn't get the element tag while accessing tags in the body.

Not sure what you mean here, [object HTMLBodyElement] is the fifth element in the OP code:

alert(document.childNodes[1].childNodes[2]);

Can someone please explain how the output is being carried out?

When you send a DOM element to the alert, it's toString method will be called. The result is implementation dependent, in your host you get what you see. Other hosts may return different strings.

Also, why [object Text] is being printed after every tag that is within tag?

Whitespace is preserved as text nodes, so wherever there is whitespace there will be a text node. Some browsers will remove text nodes that are entirely whitespace, or where text nodes aren't allowed. Others wont (ie you might get different results in different hosts in regard to preserving whitespace).

Accessing html elements through document interface

Question

1 answers

solution1
0 ACCPTED 2017-05-13 08:09:08

Accessing html elements through document interface

Question

1 answers

solution1 0 ACCPTED 2017-05-13 08:09:08

solution1
0 ACCPTED 2017-05-13 08:09:08