document.querySelectorAll() вспомогательная функция не работает

Im пытается использовать функцию document.querySelectorAll() как определено here couse Я буду использовать ее много.document.querySelectorAll() вспомогательная функция не работает

Wher работает это я получаю сообщение об ошибке сказав:

Uncaught TypeError: Невозможно установить свойство «BackgroundColor» неопределенной

Так что мой вопрос почему это не работает?

HTML

<!DOCTYPE html> 
<html>  
<head>  
<title>Javascript tutorial</title> 
</head> 
<body> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
<script type="text/javascript" src="js/script.js"></script> 
</body> 
</html>

function selectElement(el) { 
    return document.querySelectorAll(el); 
} 

window.onload = function() { 
    var someElement = selectElement('.test'); 
    someElement.style.backgroundColor='red'; 
}

Обновлено с цикл

function selectElement(el) { 
    var element = document.querySelectorAll(el); 
    for (var i = 0; i < element.length; i++) { 
     return element[i]; 
    } 
} 

window.onload = function() { 
    var someElement = selectElement('.test'); 
    someElement.style.backgroundColor='red'; 
}

Это должно работать ... правильно? :)

источник

2015-08-31 VikVikVik

Откуда мы получаем 'someVar'? –

querySelectorAll() возвращает список элементов DOM, которые соответствуют заданному CSS-селектору, вам необходимо пройти через каждый узел, чтобы применить изменения. – Arvind

Возможно, в обновлении вы используете другой класс. –

querySelectorAll возвращает массив, подобный коллекции узлов, поэтому вам нужно использовать итерацию по коллекции nodeList и добавить свойства к каждому элементу.

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

someVar в сценарии не определен
Вы можете использовать DOMContentLoaded вместо load события
В этом случае вы можете использовать CSS вместо Javascript

function selectElement(el) { 
 
    return document.querySelectorAll(el); 
 
} 
 

 
window.onload = function() { 
 
    var someElement = selectElement('.test'); 
 

 
    for (var i = 0; i < someElement.length; i++) { 
 
    someElement[i].style.backgroundColor = 'red'; 
 
    } 
 
}

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

CSS

В случае, если вы просто хотите, чтобы установить стили всех элементов, имеющих класс test

.test { 
 
    background: yellow; 
 
}

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

DOMContentLoaded

function selectElement(el) { 
 
    return document.querySelectorAll(el); 
 
} 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    var someElement = selectElement('.test'); 
 

 
    for (var i = 0; i < someElement.length; i++) { 
 
    someElement[i].style.backgroundColor = 'red'; 
 
    } 
 
}, false);

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

источник

2015-08-31 07:46:07 Tushar

Это очень хороший Тушар, но это не то, что я ожидал. На сайте plainjs.com говорится: «Когда вы создаете вспомогательную функцию, называете ее« функцией $() {} », вы можете использовать $ (...) для извлечения элементов так же, как и с jQuery; вы можете даже передать элемент контекста ». – VikVikVik

@VikVikVik Да, вы можете, но это не значит, что вы можете использовать его как jQuery, вам все равно нужно перебирать коллекцию – Tushar

@michael. Правильно, я обновил. слов :) – Tushar

style является свойством элемента HTML

querySelectorAll возвращает (массив), как коллекцию HTML всех элементов сопоставления HTML.

Вам необходимо закоротить обратное значение и установить style каждого элемента по очереди.

Например, из первого примера кода на странице ссылки:

for (i=0; i<matches.length; i++)

источник

2015-08-31 07:46:11 Quentin

в случае, если это не работа, чем функции selectElement (эль) { \t вар элемент = document.querySelectorAll (эл)? \t для (вар я = 0; г VikVikVik

@VikVikVik - Вы перебираете коллекцию, нажимая на нее первый элемент и возвращаете это. Если вы хотите изменить все из них, вам нужно вернуть всю коллекцию, а затем поместить изменение стиля внутри вашего цикла. – Quentin

document.querySelectorAll() возвращает HTMLCollection. Если вы хотите, чтобы применить стиль ко всем пунктам, вам придется перебрать коллекции:

[].forEach.call(document.querySelectorAll('.test'), function(val) { 
 
    val.style.backgroundColor = 'red'; 
 
});

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

Вы можете использовать [].forEach.call() превратить HTMLCollection в массив, и петли над ним. Затем примените стиль ко всем элементам, которые были сопоставлены вызовом querySelectorAll().

источник

2015-08-31 07:47:53 baao

Почему '[] .slice.call (foo) .forEach', когда вы можете просто сделать' []. forEach.call ('? –

Спасибо @torazaburo, не знал, что могу так называть – baao

Лучше установить' backgroundColor'. Установка 'background' потенциально может установить все другие связанные с фоном свойства, которые являются частью стенографического свойства 'background'. –

document.querySelectorAll() вспомогательная функция не работает

ответ

Смежные вопросы