div.childNodes.item(0) recognizes tab or space as child

Asked

Viewed 356 times

3

I use Ubuntu 13.10 and know few HTML editors for it.

The editor I use is Bluefish, which has helped me a lot. I am learning Javascript by w3shcool and at the moment I am in the DOM nodes part, and as it is a little more complicated to understand, I searched for a video on the internet that would help me understand about us, and I found a video explaining the "family tree" of html.

When I tested the following code:

window.onload = function()
{
   var div = document.getElementsByTagName("div").item(0);
   var ul = div.childNodes.item(0);
   Alert(ul);
}

I figured he should return as object HTMLULLISTELEMENT; But it is returned as: Object text.

Using firebug I discovered that the problem is the space between div and ul or is the tab that the editor Bluefish gives or is it is considering the space as text.

How can I fix this?

The well explained video about tree (nodes) is this:

http://www.youtube.com/watch?v=ruV-ZLn6gl8

The complete code below:

<html>
<head>
    <title>Core Api</title>
    <script>
        window.onload = function()
        {
            var div = document.getElementsByTagName("div").item(0);
            var ul = div.childNodes.item(0);
            alert(ul);
        }
    </script>
</head>

<body>
    <h2>Árvore</h2>

    <div>
        <ul>
            <li id="item1">
                Primeiro
                <span style="color:blue;">item</span>
                <ul>
                    <li id="item 1.1">item1.1</li>
                    <li id="item 1.2">item1.2</li>
                    <li id="item 1.3">item1.3
                        <ul>
                            <li id="item 1.3.1">item1.3.1
                        </ul>
                    </li>
                </ul>
            </li>
            <li>item2</li>
            <li>item3</li></ul></div>

</body>
</html>
javascript html dom

1 answer

2

The nodes of the GIFT can be of several guys, including text nodes, which is what you are finding. You can create a function to find the first node of type ELEMENT_NODE. Something like that:

function firstElementChild(nodeList) {
    var el = nodeList.firstChild;
    while(el && el.nodeType !== 1) {
        el = el.nextSibling;
    }
    return el;
}

In her code, she would be called:

window.onload = function()
{
    var div = document.getElementsByTagName("div").item(0);
    var ul = firstElementChild(div);
    alert(ul);
}

http://jsbin.com/minewixo/1/edit

However, today there is a much simpler way of doing this, which dispenses with this function: document.querySelector, that accepts a CSS selector and returns the first element that matches the selector:

window.onload = function()
{
    var ul = document.querySelector('div ul');
    alert(ul);
}

http://jsbin.com/minewixo/2/edit

  • I thought an if to solve this, the big problem is that when I want to use the text Node. I will try this method.

Browser other questions tagged javascript html dom

You are not signed in. Login or sign up in order to post.