как изменить свойство первого ребенка

Question

я в состоянии изменить цвет фона этого элемента:

<div onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'" style="background-color:green; width:100px; height:40px;"> 
</div> 

Но я хочу, чтобы изменить цвет первого ребенка, который я предполагал, должен работать как это:

<div onmouseover="this.firstChild.style.backgroundColor='blue'" onmouseout="this.firstChild.style.backgroundColor='red'" style="background-color:green; width:100px; height:40px;"> 

    <div style="background-color:white; height:10px; width:10px; margin:20px;">This is the first child, I think.</div> 

</div> 

Но это не работает. Что не так? Как я могу изменить стиль firstChild?

PS: Я позже хочу использовать display = block и none и некоторые другие свойства (а не только стиль) для ребенка. Цвет был только для тестирования.

Answer 1

Вам нужно будет использовать .firstElementChild, или вам нужно будет избавиться от форматирования пробелов. Это пробел становится текстовым узлом, который является .firstChild.

Свойство .firstElementChild не поддерживается некоторыми более старыми браузерами, поэтому, если вы его поддерживаете, вам нужно будет закрепить его функцией.

---

<div onmouseover="changeColor(this, 'blue')" onmouseout="changeColor(this, 'red')" style="background-color:green; width:100px; height:40px;"> 

    <div style="background-color:white; height:10px; width:10px; margin:20px;">This is the first child, I think.</div> 

</div> 

---

function changeColor(el, color) { 
    firstElemChild(el).style.backgroundColor=color; 
} 
function firstElemChild(el) { 
    if (el.firstElementChild) 
     return el.firstElementChild; 

    el = el.firstChild 

    while (el && el.nodeType !== 1) 
     el = el.nextSibling; 

    return el; 
} 

Answer 2

Как "система" уже упоминалось, вы ориентируетесь на текстовый узел, а не узел элемента. Попробуйте использовать children[0] вместо firstChild.

jFiddle here