Javascript :: Trigger FirstChild элемент по классу

Question

Этот код будет говорить за это сам и объяснить, что я пытаюсь достичь ...

<style> 
.red{background:red} 
.blue{background:blue} 
</style> 

<div id=test> 
    <button>1</button> 
    <button>2</button> 
</div> 

<script> 
var firstBtn=document.getElementById("test").firstChild.className; 

(firstBtn!="red")?firstBtn="red":firstBtn="blue"; 
</script> 

Вот jsFiddle: http://jsfiddle.net/hnfeje2q/

Очень просто но так как я новичок в JavaScript ...

Спасибо!

Answer 1

вы можете сначала получить Div обертку с ид = тест, а затем загрузить первый дочерний элемент внутри этой оболочки с ниже код, а затем вы можете добавить класс «красный» к этому элементу /.

var wrapper = document.getElementById("test"); 
var firstButton = wrapper.childNodes[1]; 

// if the button doesn't have a red class, set it 
if(firstButton.className.indexOf('red') == -1) { 
    firstButton.className = firstButton.className + ' red'; 
} 

или идти с селектором запроса

var firstButton = document.querySelector('#test button:first-child'); 
if(firstButton && firstButton.className.indexOf('red') == -1) { 
    firstButton.className = firstButton.className + ' red'; 
} 

Answer 2

document.getElementById("test").firstChild не является ссылка на первый button, как можно было бы ожидать, но в текстовом узел (то есть пространство между открытым <div id="test"> тегом и первым button элементом.

использовать вместо document.querySelector('#test button:first-child') получить ссылку на первый button элемент

var firstBtn = document.querySelector('#test button:first-child'); 
firstBtn.className = (firstBtn.className !== "red")? "red" : "blue"; 

Answer 3

Обновленный jsfiddle

var firstBtn = document.querySelector('#test button:first-child'); 

if (firstBtn !== "red") { 
    firstBtn.className = "red"; 
} else { 
    firstBtn.className = "blue"; 
} 

Answer 4

Вместо использования FirstChild, использование ChildNodes. Кроме того, firstBtn просто будет строкой с именем класса. Чтобы изменить его, вам действительно нужно установить className на кнопке с использованием аналогичного синтаксиса.

var firstBtn=document.getElementById("test").childNodes[1].className; 
(firstBtn!="red")?document.getElementById("test").childNodes[1].className="red":document.getElementById("test").childNodes[1].className="blue";