All geek questions in one place

Why doesn't firstChild return the first element?

I wrote the code the other day, and for some reason I had no idea why this happened, but it was part of the code I wrote.

    var item = document.getElementByClass('object');
    var innerImageId = item.firstChild.id;

I went over this code many times. The problem with this code is that the value of innerImageId is undefined. The first element of an element is an image. I need to get the image id, but no matter how many times I looked at the code, this did not work. Here is the HTML code for the code.

    <div class="object inventory-box">
        <img src="image.png" id="sample-image">
    </div>

Doesn't that seem right? Well, I did some debugging in Google Chrome, and it turned out that there are 3 nodes in the div element. The identifier of the first and last node was undefined, and the second was "image-image". Then I tried "firstElementChild" instead of "firstChild" and it worked fine.

Then, to test this, I did something like this -

    <div class="object inventory-box">



       <img src="image.png" id="sample-image">



    </div>

(or with multiple lines of unnecessary spaces)

but it still shows 3 nodes, an input character, div and another input character. This issue persists in Chrome, Internet Explorer, and Firefox.

Can someone explain why there are these random 2 extra nodes?

+4
source share
5 answers

The browser inserts the text node when there are spaces or newlines in your code. You are targeting one of them.

Try

var img = document.querySelector('.object img');
var innerImageId = img.id;
+7
source

You can also use firstElementChildinstead firstChild, which will skip these empty text nodes.

EDIT: Blah thanks BAM5, just oblivious when I typed.

+3
source

  • getElementByClass, . , JS. , getElementsByClassName. , , .

  • , - . firstChild , . - firstElementChild. , node children:

    <div><img></div>

, , :

var items = document.getElementsByClassName('object');
var innerImageId = items[0].firstElementChild.id;

, , querySelector . querySelectorAll. MDN .

+3

firstElementChild firstChild. . Catallo , node .

, , firstChildElement. , ...

+2

, DOM-, , , , node node. : HTML-, , .

HTML:

<body>
    <h2> Lets Study DOM!! </h2>
    <input type = 'text' id = 'topic'> </input></br>
    <button onClick = addToList()> Click Me to Add </button>

JavaScript:

console.log(document.querySelector('body').childNodes);

:

[text, h2, text, input#topic, text, br, text, button, text, ul#unordered, text, script]

, , , node, , :

HTML:

<body><h2> Lets Study DOM!! </h2>
        <input type = 'text' id = 'topic'> </input></br>
        <button onClick = addToList()> Click Me to Add </button>

JavaScript:

console.log(document.querySelector('body').childNodes);

:

[h2, text, input#topic, text, br, text, button, text, ul#unordered, text, script]

It is so clear that the browser treats the space after the body tag as the text node.

0
source

Source: https://habr.com/ru/post/1618639/

More articles:


All Articles