Тесты по DOM №1
Объяснения по тесту 1:
Метод querySelector принимает в качестве аргумента строку с CSS-селектором и возвращает первый элемент на странице, который соответствует этому селектору.
Правильным ответом на вопрос является const head3 = document.querySelector(‘h3’);.
Этот код выбирает первый элемент h3 на странице и присваивает его к переменной head3.
Метод querySelectorAll() возвращает коллекцию элементов, которые соответствуют селектору, указанному в качестве аргумента.
Это может быть полезно если необходимо получить доступ к нескольким элементам на странице, которые имеют одинаковый тег. Получившуюся коллекцию можно перебрать с помощью цикла.
Правильный ответ на вопрос const head3 = document.querySelectorAll(‘h3’);
Этот код ищет все элементы с тегом «h3» в документе и возвращает их как коллекцию (NodeList) элементов.
classList.add() это метод, который может быть использован для добавления одного или нескольких CSS классов к элементу DOM.
Изначальный код const head2 = document.querySelector(‘h2’); объявляет переменную head2 и присваивает ей первый элемент с тегом h2 на странице.
Правильный ответ head2.classList.add(‘black’); добавляет класс black к элементу head2.
Правильный ответ p.classList.add(‘black’);
Если посмотреть полный код то получаем:
С помощью метода querySelectorAll() ищутся все элементы с тегом p на странице и помещаются в массив paragraphs. Затем используется цикл for-of для итерации по каждому элементу массива. Для каждого элемента, метод classList.add() добавляет класс black.
classList.remove() — это метод, который удаляет класс у элемента.
Правильный ответ head2.classList.remove(‘red-text’);.
Если посмотреть полный код, то получаем:
Метод querySelector используется для получения первого элемента с тегом h2 в документе. Затем используется метод classList.remove для удаления класса red-text у этого элемента. Если у элемента нет класса red-text, то ничего не происходит.
Если у элемента h2 уже установлен класс red-text, то в переменную check будет записано значение false. Метод toggle() проверяет наличие класса у элемента и если он есть, то удаляет его. В вопросе класс red-text уже есть у элемента h2, поэтому метод toggle() удалит его.
Метод contains() используется для проверки наличия класса у элемента, он возвращает булевое значение, которое равно true если класс существует или false в противном случае.
В вопросе у элемента h2 нет класса red-text, получаем что в переменную check1 будет записано значение false.
Правильный ответ img.setAttribute(‘src’, ‘./image/js.png’);.
Если рассмотреть полный код, то получаем:
Код изменяет атрибут src элемента с id logo. Он использует метод querySelector для выбора элемента с указанным id, затем использует метод setAttribute чтобы установить значение атрибута src на ./image/js.png. Благодаря этому изображение, которое отображается на странице, будет изменено на изображение находящееся по пути ./image/js.png.
Правильный ответ button.value = «Отправить»;.
Если рассмотреть полный код, то получаем:
Данный код ищет элемент с id «button» на странице и изменяет его значение на «Отправить». Это делается с помощью свойства value элемента.
Если этот элемент является кнопкой, то текст на ней изменяется на слово «Отправить».
Правильный ответ img.remove();.
При рассмотрении полного кода получаем:
Добавляется событие click для элемента с id «button». Когда пользователь кликает на кнопку, выполняется функция внутри addEventListener. Эта функция использует метод remove() для удаления элемента с id «logo» из DOM. Получаем что картинка с id «logo» будет удаляться из страницы каждый раз, когда нажимается кнопка.
Код в вопросе добавляет два события click на элемент с id «button».
Каждый раз, когда кнопка нажимается, оба события выполняются и выводится в консоль Hello1 и Hello2 по порядку, так как они были добавлены в коде.
Код связывает два обработчика события click с кнопкой с id «button», но поскольку во второй строке мы присваиваем новую функцию обработчику, то получаем что только вторая функция с консольным выводом world2 будет вызываться при нажатии на кнопку.
Важно: на onclick можно повесить только одно событие, потому что все новые будут перезаписывать предыдущие.
Код вешает слушателя события input на элемент с id «input» и каждый раз, когда посетитель вводит текст в этот элемент, функция внутри слушателя будет выполняться и выводить world в консоль.
Так что если посетитель напишет слово Hello, то каждый раз когда он нажимает клавишу, слово world будет выводиться в консоль. В итоге получаем 5 раз, так как слово Hello состоит из 5 букв.
Код добавляет событие input на элемент с id «input», что означает что каждый раз, когда посетитель меняет значение в этом инпуте (например, печатает или вставляет текст), вызывается функция, которая в данном случае печатает в консоль текущее значение инпута (inputText.value). Мы тем самым видим в консоле что пишет посетитель.
Код создает обработчик события для элемента с тегом ul, который найден с помощью метода querySelector. Этот обработчик слушает клики на этот элемент и вызывает функцию, которая в консоль выводит элемент DOM, на котором произошел клик (event.target).
Тесты по DOM №2
Объяснения по тесту 2:
Правильный ответ let docElem = document.documentElement;.
Данный код использует метод document.documentElement для получения элемента, который соответствует корневому элементу документа. Если мы рассматриваем HTML-документ, то корневым элементом является элемент html. Значение, которое возвращает этот метод, записывается в переменную docElem для дальнейшего использования.
Первая строчка кода ищет элемент на странице с идентификатором ‘header’ используя метод getElementById().
Вторая строчка выводит информацию об этом элементе в консоль с помощью метода console.dir(). Этот метод отображает список свойств указанного JavaScript объекта. Вывод представлен в виде иерархического списка с возможностью просмотра содержимого дочерних объектов.
В итоге мы получаем объект с информацией об элементе в виде дерева, это может быть полезно для отладки и изучения свойств и методов элемента.
textContent – это свойство, которое предназначено для работы с текстовым контентом элемента. Оно позволяет его как получить (включая текстовое содержимое всего его потомков), так и установить.
Свойство может изменить только текстовое содержимое элемента, потому если присвоить строку, содержащую HTML, то она вставится как простой текст и не превратиться в реальные DOM-элементы. Для того чтобы вставлять HTML c помощью строку подойдёт свойство innerHTML.
Код в примере использует метод querySelector для выбора элемента с тегом h1 из DOM-дерева.
Потом используется свойство textContent, которое изменяет текст внутри элемента с тегом h1 на «Hello world».
Код изменяет свойство стиля элемента с тегом h2. Он использует метод querySelector для выбора первого элемента с тегом h2 в документе. Потом используется свойство style для доступа к стилю этого элемента, и color меняет цвет текста на green (зеленый).
Правильный ответ item.style.textAlign = ‘center’;.
Код в вопросе выбирает элемент с тегом h3 из DOM-дерева и изменяет его свойство стиля textAlign на «center». Это означает, что текст внутри элемента h3 будет выровнен по центру.
Важно: необходимо писать свойства стиля в CamelCase. В нашем примере это textAlign.
CamelCase — стиль написания составных слов, при котором несколько слов пишутся слитно без пробелов, при этом каждое слово внутри фразы пишется с прописной буквы. Стиль получил такое название, потому что прописные буквы внутри слова напоминают горбы верблюда.
Правильный ответ item.style.backgroundColor = ‘red’;.
Код выбирает элемент с тегом h4 из документа, и изменяет цвет фона этого элемента, устанавливая его красным. Это достигается с помощью свойства style и метода backgroundColor.
Правильный ответ link.addEventListener(‘click’, (event) => { event.preventDefault() });.
Код с помощью метода querySelector находит элемент HTML с тегом «a» (т.е. ссылку), затем добавляет обработчик события click (нажатие на ссылку) на этот элемент, с помощью метода addEventListener.
Далее функция-обработчик события вызывает метод preventDefault() на объекте события, что отключает стандартное поведение ссылки — переход на другую страницу или протокол.
Правильный ответ itemLink.addEventListener(‘click’, (event) => { url = event.target.getAttribute(‘href’) });
Чтобы код работал необходимо указывать название события, в данном примере это click.
Код добавляет обработчик события click (клик) на элемент с классом link. Когда пользователь кликает на этот элемент, то забирается ссылка из itemLink и присваивается переменной url.
Правильный ответ parent = itemLink.parentNode;.
В вопросе объявляется переменная parent которая инициализируется значением ».
Затем используется метод querySelector() чтобы получить элемент с классом link, который затем присваивается переменной itemLink.
После используется свойство parentNode которое возвращает родителя указанного элемента и записывается в переменную parent.
for … of позволяет перебрать каждый элемент коллекции по очереди, доступ к каждому элементу можно получить с помощью переменной, указанной в самом for…of. Это полезно в случаях, когда необходимо перебрать коллекцию узлов и выполнить какое-то действие над каждым из них.
Правильный ответ const elemAt = document.querySelector(‘[data-item=»100″]’);.
Этот код ищет элемент на странице с атрибутом data-item равным ‘100’ с помощью метода querySelector(). Если такой элемент найден, то он запишется в переменную elemAt. Если такой элемент не найден, то переменная elemAt будет иметь значение null.
Правильный ответ const parentElement = elem.closest(‘.list-all’);.
В первой строчке код ищет первый элемент с тегом li.
Далее используется метод closest для поиска ближайшего родительского элемента с классом list-all для элемента li. Если такой элемент найден, то он присваивается переменной parentElement.
Правильный ответ: document.querySelector(‘body’).insertAdjacentHTML(«beforeend», ‘‹p› New text ‹/p›’);.
В данном коде используется метод insertAdjacentHTML для добавления элемента в текущую структуру DOM. Он находит элемент body с помощью querySelector и вставляет новый элемент p с текстом «New text» в конец этого элемента. Параметр beforeend означает, что новый элемент будет добавлен после всех существующих дочерних элементов в конец body.
Правильный ответ textElement.append(newElement1, newElement2);.
Первая строчка кода в вопросе находит элемент с тегом p в DOM.
Вот второй и третьей строках создаются 2 новых переменных с значениями «Hello» и «World».
Далее добавляются «Hello» и «World» в конец найденного элемента p с помощью метода append().
Правильный ответ textElement.innerHTML = `${oldText} ‹p› Hello World ‹/p›`;.
Если рассмотреть полный код, то в первой строчке выбирается элемент p с помощью свойства querySelector.
Вторым действием сохраняется содержимое textElement в переменную oldText.
Затем у textElement изменяется значение на строку, состоящую из исходного текста и добавленного текста ‘Hello World’ внутри тега ‘p’.
Тесты по DOM №3
Объяснения по тесту 3:
Правильный ответ let child = divSection.children;
Первая переменная «divSection» используется для получения элемента ‘div’ из DOM (Document Object Model) с помощью метода querySelector. Метод querySelector позволяет найти 1-ый элемент в DOM с указанным селектором. В нашем случае селектором является ‘div’.
Далее переменная «child» используется для получения коллекции дочерних элементов в элементе divSection.
Правильный ответ let next = divSection.nextElementSibling;.
Полный код использует метод querySelector для выбора элемента div из текущей страницы. Затем использует свойство nextElementSibling этого элемента, которое возвращает следующий элемент в том же уровне вложенности, как элемент, выбранный с помощью querySelector. Потом сохраняет его в переменную next.
const item = document.createElement(‘p’) создает новый элемент тега «p» в документе и присваивает его переменной item.
Но следует отметить, что этот элемент еще не добавлен на страницу, для этого нужно использовать методы добавления элемента в документ, к примеру, appendChild или insertAdjacentHTML.
В полном коде сначала создается элемент div, при помощи метода createElement.
Затем код использует querySelector чтобы получить ссылку на элемент ‘p’ в документе.
Далее с помощью insertBefore метод вставляет новый div элемент перед элементом p.
Код создает переменную divSection и использует метод querySelector для выбора первого элемента с тегом div в HTML документе.
Потом создается переменная divSectionNew и присваивается значение свойства outerHTML объекта divSection.
Свойство outerHTML возвращает строковое представление HTML элемента, включая его самого и всех его дочерних элементов.
const textNew = document.createTextNode(‘Hello’); создаёт новый узел текста со значением «Hello», используя метод createTextNode().
Переменная textNew содержит ссылку на созданный узел текста.
Этот узел текста может быть добавлен в документ, используя методы добавления узлов такие как appendChild(), insertBefore() или другие методы DOM.
Правильный ответ divSection.append(p);
Вначале объявляется переменная «pSection» и инициализируется элементом ‘p’, находящимся на странице при помощи метода querySelector.
Потом объявляется переменная «divSection» и присваивается ей созданный элементом div.
Далее используется метод append() для перемещения элемента «pSection» в качестве дочернего элемента к «divSection». Таким образом элемент ‘p’ добавляется внутрь созданного элемента ‘div’.
Правильный ответ const cloneElement = divSection.cloneNode(true);
Метод cloneNode() принимает один параметр — булевое значение, отвечающее за то, клонировать ли дочерние элементы. Если передать true, то копия будет содержать все дочерние элементы оригинала, если передать false, то копия будет пустой.
divSection.remove(); удаляет элемент с тегом ‘div’ из DOM дерева и не будет отображаться на странице. Для этого используется метод remove() который вызывается у элемента, который нужно удалить.
Правильный ответ const className = divSection.className;.
Метод querySelector используется для поиска первого элемента на странице с указанным селектором.
Свойство className задает значение атрибута class, или возвращает строковое значение этого атрибута, содержащее класс, или классы текущего элемента, разделенные пробелами.
Правильный ответ divSection.className = ‘dark’;.
Код присваивает полностью новое значение свойству className, т.е. затирает старые значения. Если необходимо несколько классов на одном элементе, то следует использовать свойство classList.
divSection.classList.add(‘red’) добавляет класс «red» выбранному элементу «divSection», если класс еще не назначен.
Если класс уже назначен, то никаких действий не происходит.
parSection.classList.contains(‘red’); проверяет существование класса «red» у элемента parSection. Этот метод возвращает true если класс «red» присутствует у элемента или false если отсутствует.
parSection.classList.toggle(‘dark’); добавляет класс ‘dark’ если он отсутствует или удаляет его если он присутствует у элемента parSection.
Код в вопросе сначала ищет элемент с id «active» в DOM (Document Object Model), и присваивает его переменной divArt.
Далее используется цикл for..of для итерации каждого имени класса у divArt.
В каждой итерации цикла, текущее имя класса выводится в консоль с помощью console.log(name).
Тесты по DOM №4
Объяснения по тесту 4:
Правильный ответ console.log(itemElement.tagName);.
В первой строчке код выбирает элемент с классом «link7» из DOM (Document Object Model).
Потом использует свойство tagName для получения имени тега, с которым элемент был создан.
Затем код использует console.log() для вывода этого имени тега в консоль.
const header = document.createElement(‘h1’); создает элемент с тегом «h1» и присваивает его переменной «header».
Важно запомнить что createElement пишется с двумя ‘e’, а не creatElement (будет ошибка).
Правильный ответ header.innerText = ‘Title’;
Свойство innerText позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов <script> и <style>.
Аналогичной функциональностью обладает свойство textContent, но оно возвращает содержимое всех дочерних элементов, даже скрытых.
Правильный ответ divElement.style.padding = »;.
В полном коде сначала ищется элемент с id «active» в документе с помощью метода querySelector. Затем устанавливается свойство padding этого элемента на пустую строку. Таким образом происходит удаление значения свойства padding с элемента.
Код ищет элемент с id «active» в DOM (Document Object Model). После этого он назначает стили для найденного элемента с помощью свойства cssText. Это свойство позволяет установить несколько стилей, заданных с помощью синтаксиса CSS, в одной строке. В данном случае, это свойство устанавливает цвет фона как зеленый, а отступы (margin) в 10 пикселей. Также все стили, которые были ранее применены к найденному элементу, будут заменены на стили, указанные в свойстве cssText.
Код в вопросе сначала выбирает элемент с id «active» с помощью метода querySelector, затем использует метод getComputedStyle для получения всех вычисленных стилей для этого элемента. В самом конце консоль выводит значение свойства «margin» у этого элемента.
Метод getComputedStyle () возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать.
Правильный ответ let divStyle = getComputedStyle(divEl, «::before»);.
В полном коде изначально получаем стили элемента с идентификатором «active» из DOM дерева. Далее используем метод getComputedStyle для получения вычисленных стилей состояния «::before» этого элемента. И в конце выводит в консоль значение свойства backgroundColor.
Правильный ответ link1.hasAttribute(‘name’);.
Полный код изначально ищет элемент ‘a’ на странице с помощью метода querySelector.
Затем он проверяет, имеет ли этот элемент атрибут ‘name’ с помощью метода hasAttribute. Если элемент имеет такой атрибут, то метод возвращает true, если нет, то возвращает false.
Правильный ответ const parData = parElement.dataset.size;.
Используя метод querySelector мы находим в документе первый элемент с тегом «p» и присваиваем его константной переменной «parElement».
Затем, используя свойство dataset объекта «parElement», получаем данные атрибута «data-size» и присваиваем их переменной «parData».
Правильный ответ divElement.append(header);.
Первым действием в коде является выбор div элемента с помощью querySelector. Далее используется метод createElement для создания элемента h2 и присвоение его переменной header. Затем используется метод append для добавления созданного элемента h2 как последнего дочернего элемента к div элементу.
Правильный ответ divElement.insertAdjacentHTML(‘beforeend’, htmlElement);.
Полный код создает новый HTML-элемент со строкой «Hello world», и вставляет его в конец элемента div, который был выбран с помощью метода querySelector. Метод insertAdjacentHTML принимает два аргумента: первый аргумент определяет место, где нужно вставить новый элемент, в данном случае это ‘beforeend’ — означает вставку в конец элемента. Второй аргумент — строка с HTML-кодом, который нужно вставить.
Правильный ответ divElement.insertAdjacentHTML(‘afterbegin’, htmlElement);.
Полный код создает переменную divElement, которая ссылается на первый элемент с тегом div на странице.
Затем создается переменная text со значением world.
Далее используется шаблонная строка, чтобы создать переменную htmlElement, которая содержит текст world внутри тегов <p>.
В конце используется метод insertAdjacentHTML на divElement для вставки htmlElement внутрь и самое начало элемента div.
Правильный ответ form.addEventListener(‘submit’, function () {});.
Полный код находит элемент формы на странице с помощью метода querySelector и добавляет обработчик события submit для этой формы с помощью метода addEventListener. Когда форма будет отправлена, то будет вызвана функция, которая передана в качестве второго аргумента методу addEventListener.
Отправка формы может произойти при нажатии на кнопку отведенную для этого, которая обычно имеет тип «submit» или при нажатии на клавишу «Enter» внутри элемента формы.
event.preventDefault() используется для отмены стандартного поведения браузера при отправке формы. В данном случае, когда пользователь отправляет форму нажатием кнопки или нажатием «Enter», браузер не будет отправлять данные формы на сервер и не будет перезагружать страницу, так как функция formHandler с помощью event.preventDefault() отменяет это стандартное поведение.
inp.focus() задает фокус (курсор) на элемент inp. Это означает, что пользователь может начать вводить данные в этот элемент сразу после вызова этой функции. Это может быть полезно, например, если у вас есть форма с несколькими полями, и вы хотите обеспечить пользователю максимально удобный ввод данных. После завершения ввода данных в первое поле, пользователь может нажать таб и перейти к следующему полю без необходимости клика мышкой.