Когда я начал изучать JavaScript, я ничего не мог понять. Каковы элементы? Зачем их выбирать? Как их выбрать? Что такое селекторы? и т. д. Здесь я постараюсь дать вам и себе лучшее понимание всех этих вопросов, упомянутых выше.
Начнем с основных идей. Как вы все, должно быть, уже знаете, JavaScript используется наряду с HTML и CSS для создания динамического и интерактивного веб-контента, такого как веб-сайты и приложения. JavaScript может обновлять и изменять как HTML, так и CSS. Для этого нам нужно select элементы, такие как имя тега, идентификатор, классы и т. д., из HTML, чтобы все заработало.
Селекторы используются для «поиска» (выбора) HTML-элементов на основе их имени тега, идентификатора, атрибутов, классов, типов, значений атрибутов и многого другого.
В заголовке мы упомянули элементы «DOM». DOM — это не что иное, как сокращенная форма объектной модели документа, и это программный интерфейс для документов HTML и XML. Он определяет логическую структуру документов и способ доступа к документу и управления им. В основном это выглядит как структура генеалогического древа.
Допустим, наши элементы (для ссылки на пример каждого метода) следующие:
<div id="tree-1" class="container"> <span class="branch" name="fruit">APPLE</span> <span class="branch">APPLE</span> <span class="branch">APPLE</span> <pre> test </pre> </div> <div id="tree-2" class="container"> <span class="new branch" name="new-fruit">BANANA</span> <span class="new branch">BANANA</span> <span class="new branch">BANANA</span> </div>
Возвращаясь к нашему вопросу «как выбирать элементы в JavaScript?» JavaScript предоставляет шесть методов для выбора элемента из документа.
- получитьэлементбиид
- getElementsByTagName
- getElementsByClassName
- getElementsByName
- селектор запросов
- querySelectorAll
получитьэлементбиид
Метод getElementById возвращает элемент, идентификатор которого совпадает с заданной строкой.
document.getElementById("tree-1");
Поскольку идентификаторы элементов должны быть уникальными, это самый быстрый способ выбрать элемент. Метод getElementById доступен только в объекте document, поскольку, поскольку значения id должны быть уникальными, нет необходимости в отдельной функции. Если идентификатор не найден, то этот метод возвращает null.
Что происходит, когда идентификаторы двух элементов совпадают?
<div id="tree-2">foo</div> <div id="tree-2">bar</div>
Здесь результат document.getElementById("tree-2") вернет элемент div, содержащий foo, а не bar. Потому что этот метод возвращает первый элемент, который он встречает в HTML, и не будет искать дальше.
getElementsByTagName
Метод getElementsByTagName интерфейса документа возвращает живую HTMLCollection найденных элементов в порядке их появления в дереве с заданным именем тега.
document.getElementsByTagName(span);
Как мы видели, getElementById можно вызывать только тогда, когда оно совпадает с именем, заданным в форме строки, но getElememtsByTagName можно вызывать для любого элемента. Если getElementsByTagName вызывается для элемента, то ищутся только дочерние элементы этого элемента.
let parent = document.getElementById("tree-1");
let spans = parent.getElementsByTagName(spans);
// the spans inside the parent element are returned.
Возвращаемая коллекция HTMLCollection — это живой список, который автоматически обновляет удаление или добавление узла. Если передать * (универсальный селектор), то будут выбраны все элементы. Переданное имя тега перед поиском элементов переводится в нижний регистр. Итак, для svg элементов используйте getElemetsByTagNameNS().
Метод getElementsByClassName
Метод getElementsByClassName возвращает HTMLCollection элементов, которые соответствуют заданному имени класса.
document.getElementsByClassName("branch");
Мы можем искать несколько имен классов, указав имена классов, разделенные пробелом.
let appleFruit = document.getElementsByClassName("branch");
let bananaFruit = document.getElementsByClassName("new branch");
getElementByClassName можно вызвать для любого элемента, и он вернет живую коллекцию HTMLCollection.
getElementsByName
Метод getElementsByName возвращает элементы, соответствующие значению name attribute с заданной строкой. Возвращаемое значение — это живая коллекция NodeList.
document.getElementsByName("fruit");
Не рекомендуется использовать
getElementsByName, так как в Internet Explorer он работает иначе. И это создает некоторую двусмысленность, на мой взгляд.
селектор запросов
Метод querySelector возвращает первый элемент, соответствующий данному селектору.
//using id selector
document.querySelector("#tree-1");
//using class selector
document.querySelector(".branch");
//returns first element in the document with class name
//using tag name
document.querySelector("div");
//returns first div
//using tag name
document.querySelector("div span.branch");
//returns first span element with class name "branch", inside a div
querySelector можно вызывать в document и element. Если ни один элемент не соответствует селектору, возвращается null. syntaxError выдается, когда селектор css не совпадает.
querySelectorAll
Метод querySelectorAll является расширением метода querySelector. Этот метод возвращает все элементы, соответствующие заданному селектору.
document.querySelectorAll(".branch");
//returns all elements with branch class
querySelectorAll возвращает статическую (неактивную) коллекцию NodeList. Этот метод можно вызывать как для документа, так и для элементов. Мы можем отправить несколько селекторов, разделенных запятыми. Если совпадений не найдено, возвращается пустой NodeList.
Тише! Поначалу это может немного сбивать с толку. Меня это, конечно, смутило. Но, как мы знаем, программирование — это практика. Когда я понятия не имел об этих селекторах, я много искал в Интернете, и «educative.io» помог мне во всем в этой теме, и этот блог очень вдохновлен ими. Я надеюсь, что это было полезно для вас. Следите за мной на Medium, чтобы мотивировать меня писать хорошие и плохие статьи.
