По мере увеличения размера вашей веб-страницы может стать труднее захватывать элементы, которые вы хотите редактировать. Javascript предоставляет вам несколько мощных инструментов для выбора элементов, которые вы ищете, но может быть непонятно, какой из них использовать. В этом блоге я расскажу о некоторых из них, которые я узнал и где нашел их наиболее применимыми.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Javascript DOM Element Selectors</title>
<script defer src="./src/index.js"></script>
</head>
<body>
<h1>DOM Selectors I Have Learned</h1>
<div id='learned-selectors'>
<ul>
<li class='pretty-text'>document.getElementById()</li>
<li class='pretty-text'>document.getElementsByClassName()</li>
<li class='pretty-text'>document.getElementsByTagName()</li>
<li class='pretty-text'>document.querySelector()</li>
<li class='pretty-text'>document.querySelectorAll()</li>
</ul>
</div>
<div>
<h4 class='pretty-text'>Add A Selector You Have Learned</h4>
<form id='selector-form'>
<input type="text" name="name" placeholder="selector name" value="" />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
document.getElementById ()
При попытке найти один элемент на странице наиболее эффективным методом, который я считаю наиболее эффективным, является document.getElementById (). Чтобы использовать этот метод, нам потребуется, чтобы контент, который вы ищете, имел идентификатор, поэтому при создании контента на своей странице старайтесь по возможности устанавливать идентификаторы. Чтобы использовать этот метод, просто включите идентификатор элемента, который вы хотите получить, в качестве параметра для метода. Например, чтобы выбрать форму в приведенном выше примере html, используйте следующее:
document.getElementByID('selector-form')
Это вернет весь элемент формы со страницы:
Поскольку каждый идентификатор должен использоваться только один раз на странице, этот метод вернет только один элемент с предоставленным идентификатором. Если по какой-то причине вы случайно дали двум элементам одинаковый идентификатор, этот метод вернет первый сверху вниз.
document.getElementsByClassName ()
Если вы хотите выбрать несколько элементов, которые используют один и тот же класс, вам следует использовать метод document.getElementsByClassName (). В примере html выше все элементы списка и h4 над формой имеют класс «pretty-text». Этот класс можно передать методу, как показано ниже:
document.getElementsByClassName('pretty-text')
Результат вышеизложенного выглядит следующим образом:
Обратите внимание, что получено не массив, а HTMLCollection. Подобно массиву, вы можете вызвать:
document.getElementsByClassName('pretty-text')[5]
чтобы вернуть h4, однако методы массива, такие как .forEach, работать не будут. Чтобы просмотреть эту коллекцию в цикле, вам сначала нужно преобразовать ее в массив или использовать счетчик и цикл for с его свойством .length.
const prettyTextElements = document.getElementsByClassName('pretty-text');
// converting to an array
Array.from(prettyTextElements).forEach(function(element){
// access each element as element
})
// looping over each element using a counter
for (i=0; i < prettyTextElements.length; i++) {
// access each element as prettyTextElements[i]
}
document.getElementsByTagName ()
Если вы хотите получить все элементы по имени их тега, вы можете использовать метод document.getElementsByTagName (). В примере html-кода у нас есть div, обернутый вокруг списка, и div, обернутый вокруг формы. Чтобы получить эти два div вместе с их внутренним html, мы передадим методу имя тега «div»:
document.getElementsByTagName('div')
Подобно методу document.getElementsByClassName (), этот метод также возвращает HTMLCollection, а не массив. Обратите внимание, что он также добавил ключ в коллекцию для идентификатора, который он нашел в одном из блоков div («изученные-селекторы»). Это может позволить нам выбрать конкретный div в возвращаемой коллекции по его идентификатору, получив доступ к ключу коллекции:
Хотя может быть проще использовать document.getElementById (), когда вы уже знаете, что элемент с этим идентификатором существует, это также может быть полезно при проверке, существует ли данный идентификатор под ожидаемым тегом.
document.querySelector () и document.querySelectorAll ()
Два оставшихся селектора - это document.querySelector () и document.querySelectorAll (). Оба имеют одинаковое использование, однако, как следует из названий, .querySelector () возвращает только один (первый) найденный элемент, а .querySelectorAll () возвращает все элементы. Эти методы принимают селекторы CSS в качестве параметров, которые позволяют использовать имена тегов, идентификаторы, имена классов или их комбинации вместе с другими дополнительными функциями. Я показал несколько примеров ниже, но, пожалуйста, обратитесь к документации по селектору CSS, чтобы увидеть все возможности этих очень настраиваемых методов.
Вы могли заметить, что в приведенном выше примере .querySelectorAll возвращаемый объект является NodeList. Это похоже на HTMLCollection, но не совсем то же самое. Одно отличие можно увидеть при запросе разделов страницы. Мы получим те же элементы, что и при использовании .getElementsByTagName, однако у нас больше нет добавленного ключа «изученных селекторов», включенных в HTMLCollection:
Ресурсы
