Поиск элемента на странице javascript. Javascript и jquery выборка элемента по классу (атрибут class). Методы для работы с атрибутами в JavaScript

Property matches the specified string. Since element IDs are required to be unique if specified, they"re a useful way to get access to a specific element quickly.

If you need to get access to an element which doesn"t have an ID, you can use querySelector() to find the element using any selector .

Syntax var element = document .getElementById(id); Parameters id The ID of the element to locate. The ID is case-sensitive string which is unique within the document; only one element may have any given ID. Return value

An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

Example HTML getElementById example

Some text here

blue red JavaScript function changeColor(newColor) { var elem = document.getElementById("para"); elem.style.color = newColor; } Result Usage notes

The capitalization of "Id" in the name of this method must be correct for the code to function; getElementByID() is not valid and will not work, however natural it may seem.

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll() , getElementById() is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

Example Document

hello word1

hello word2

hello word3

hello word4

var parentDOM = document.getElementById("parent-id"); var test1 = parentDOM.getElementById("test1"); //throw error //Uncaught TypeError: parentDOM.getElementById is not a function

If there is no element with the given id , this function returns null . Note that the id parameter is case-sensitive, so document.getElementById("M ain") will return null instead of the element because "M" and "m" are different for the purposes of this method.

Elements not in the document are not searched by getElementById() . When creating an element and assigning it an ID, you have to insert the element into the document tree with or a similar method before you can access it with getElementById() :

Var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el will be null!

Non-HTML documents . The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document"s DTD. The id attribute is defined to be of ID type in the common cases of XHTML , XUL , and other. Implementations that do not know whether attributes are of type ID or not are expected to return null .

Specification Specification Status Comment
Document Object Model (DOM) Level 1 Specification
 Obsolete Initial definition for the interface
Document Object Model (DOM) Level 2 Core Specification
The definition of "getElementById" in that specification. 		Obsolete Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification
The definition of "getElementById" in that specification. 		Obsolete Supersede DOM 2
DOM
The definition of "getElementById" in that specification. 		Living Standard Intend to supersede DOM 3
Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet getElementById
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 5.5 Opera Full support 7 Safari Full support 1 WebView Android Full support Yes Chrome Android Full support 18 Firefox Android Full support Yes Opera Android Full support 10.1 Safari iOS Full support 1 Samsung Internet Android ?
Legend Full support Full support Compatibility unknown Compatibility unknown

На уроке будет рассмотрено начало темы: объектная модель документа (javaScript DOM) — основа динамического HTML, будут изучены методы доступа к объектам и рассмотрены способы обработки событий javascript

  • В целом объект – это составной тип данных, объединяющий множество значений в общий модуль и позволяющий сохранять и извлекать по запросу значения по их именам.

    • Ранее мы уже начали знакомство с понятием в javascript.

  • В javascript есть такое понятие как DOM — Document Object Model — объектная модель веб-страницы (html-страницы).
  • Теги документа или, как еще говорят, узлы документа — это и есть его объекты.

Давайте рассмотрим на схеме иерархию объектов в JavaScript , и то, на каком месте иерархии находится рассматриваемый в данной теме объект document .

У элемента script есть атрибуты:

  • defer (ожидание полной загрузки страницы).

    • Пример:

    /* Позволяет загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы */ /* Позволяет браузеру начать загрузку js-файлов параллельно, не останавливая дальнейшую обработку страницы. Их выполнение происходит после полного разбора объектной модель документа */

    Свойства и атрибуты объекта document в javaScript

    Объект document представляет собой веб-страницу.

    Важно: Для обращения к свойствам и методам объекта в javaScript, как и при работе с другими объектами, используется точечная нотация :

    т.е. сначала пишется сам объект, затем через точку и без пробелов указывается его свойство, атрибут или метод

    объект.свойство объект.атрибут объект.метод()

    Рассмотрим пример:

    Пример: пусть в html-документе есть тег

    Мой элемент

    и определенный для него стиль css (даже два стиля, второй пригодится для задания):

    .small{ color : red ; font-size : small ; } .big{ color : blue ; font-size : big; }

    .small{ color:red; font-size:small; } .big{ color:blue; font-size:big; }

    Необходимо:

  • задать новое свойство объекта, присвоить ему значение и вывести это значение;
  • вывести значение атрибута объекта;
  • изменить значение атрибута объекта.

    • Выполним задание по порядку:
    ✍ Решение:

    Так как это язык javascript, то объекту можно придумать и задать любое свойство с любым значением. Но для начала получим доступ к объекту (о доступе к объекту будет подробно рассказано ниже в данном уроке):

    // получаем доступ к объекту по его id var element = document.getElementById("MyElem"); element.myProperty = 5; // назначаем свойство alert(element.myProperty); // выводим в диалоговое окно

    Следующее задание связано с атрибутом объекта. Атрибут объекта — это атрибуты тега. Т.е. в нашем случаем их два: атрибут class со значением small и атрибут id . Будем работать с атрибутом class .

    Теперь добавим javascript-код для вывода значения атрибута нашего объекта. Код должен находиться после основных тегов:

    // получаем доступ к объекту по его id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // выводим в диалоговое окно

    И последнее задание: изменяем значение атрибута. Для этого у нас заготовлен стиль «big» . Заменим значение атрибута class на этот стиль:

    // получаем доступ к объекту по его id var element = document.getElementById("MyElem"); element.setAttribute("class","big");

    В результате наш элемент станет большего размера и окрасится в синий цвет (класс big).

    Теперь подробнее рассмотрим использованные в примере методы для работы с атрибутами.

    Методы для работы с атрибутами в JavaScript

    Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

    • Добавление атрибута (установление для него нового значения):

      • getAttribute(attr)

    • Проверка наличия данного атрибута:

      • removeAttribute(attr)

    Разные способы работы с атрибутами

    Пример: Вывести значение атрибута value текстового блока.


    ✍ Решение:
    • Пусть имеется текстовый блок:

      • var elem = document.getElementById("MyElem"); var x = "value";

    • Рассмотрим несколько способов получения значения атрибута (для вывода используйте метод alert()):
      • elem.getAttribute ("value" )

      elem.getAttribute("value")

      2. точечная нотация:

      elem.attributes .value

      elem.attributes.value

      3. скобочная нотация:

      var element = document.getElementById("t1"); alert(...) element.setAttribute(...);


      Установить значения атрибутов также можно несколькими способами:

      var x = "key"; // key - название атрибута, val - значение для атрибута // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes["key"] = "val" // 4. elem.setAttribute(x, "val")

      Свойства элемента body

      Через объект document можно обратиться к телу документа — тегу body — с его некоторыми полезными свойствами.

      Например, у тега body есть два свойства: ширина и высота клиентского окна:

      document.body.clientHeight — высота клиентского окна
      document.body.clientWidth — ширина клиентского окна


      Но самое главное, как мы уже узнали, это то, что через объект document посредством специальных методов осуществляется доступ ко всем элементам страницы, то есть тегам.

      Важно: При такого рода обращении к тегам страницы скрипт должен находиться в конце дерева элементов, перед закрытием body ! Так как к моменту исполнения скрипта все элементы уже должны быть «нарисованы» браузером на экране

      Задание js8_1 . Выдавать сообщение о размерах окна браузера: например, «размеры окна браузера 600 х 400»

      Доступ к элементам документа в javaScript

      Для доступа к объектам или поиска объектов предусмотрено несколько вариантов:

  • Поиск по id (или метод getElementById), возвращает конкретный элемент
  • Поиск по названию тега (или метод getElementsByTagName), возвращает массив элементов
  • Поиск по атрибуту name (или метод getElementsByName), возвращает массив элементов
  • Через родительские элементы (получение всех потомков)

    • Рассмотрим каждый из вариантов подробнее.

  • Доступ к элементу через его атрибут id

    • Синтаксис: document.getElementById(id)

    Метод getElementById() возвращает сам элемент, который можно затем использовать для доступа к данным

    Пример: На странице есть текстовое поле с атрибутом id="cake" :

    ...

    Необходимо


    ✍ Решение:

      alert(document.getElementById("cake").value); // возвращает "кол-во тортов"

      Можно выполнить то же самое, реализовав обращение к объекту через переменную :

      var a=document.getElementById("cake"); alert (a.value); // выведем значение атрибута value, т.е. текст "кол-во тортов"

    Важно: Скрипт должен находиться обязательно после тега!

  • Доступ к массиву элементов через название тега name и посредством индекса массива

    • Синтаксис:
    document.getElementsByTagName(name);

    Пример: На странице есть текстовое поле (тег input), с атрибутом value:

    ...

    Необходимо : вывести значение его атрибута value


    Метод getElementsByTagName через переменную организует доступ ко всем элементам input (т.е. к массиву элементов input), даже если этот элемент — единственный на странице. Чтобы обратиться к конкретному элементу, например к первому, то указываем его индекс (массив начинается с нулевого индекса).

    ✍ Решение:

      Обращаемся к конкретному элементу по индексу:

      var a =document.getElementsByTagName("input"); alert(a.value); // возвращает "кол-во тортов"

  • Доступ к массиву элементов по значению атрибута name

    • Синтаксис:
    document.getElementsByName(name);

    Метод getElementsByName("...") возвращает массив объектов , у которых атрибут name равен указанному в качестве параметра метода значению. Если такой элемент только один на странице, то метод все равно возвращает массив (только с одним единственным элементом).


    Пример: допустим в документе есть элемент:

    var element = document.getElementsByName("MyElem"); alert(element.value);

    В данном примере элемент один, но обращение осуществляется к нулевому элементу массива.

    Важно: Метод работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это теги form , input , a , select , textarea и ряд других, более редких.

    Метод document.getElementsByName не будет работать с остальными элементами типа div , p и т.п.

  • Доступ к потомкам родительского элемента

    • Доступ к потомкам в javascript происходит посредством свойства childNodes . Свойство принадлежит объекту-родителю.

    document.getElementById (roditel) .childNodes ;

    document.getElementById(roditel).childNodes;

    Рассмотрим пример, в котором теги изображений помещены в контейнер — тег div . Таким образом, тег div является родителем данных изображений, а сами теги img , соответственно, являются потомками тега div:

    Теперь выведем в модальное окно значения элементов массива с потомками, т.е. тегами img:

    var myDiv=document.getElementById("div_for_img"); // обращаемся к родителю-контейнеру var childMas=myDiv.childNodes; // массив потомков for (var i =0; i < childMas.length;i++){ alert(childMas[i].src); }

    Обратите внимание, что для перебора элементов массива потомков удобно использовать цикл . Т.е. в нашем примере получаем цикл:

    ... for (var a in childMas) { alert(childMas[ a] .src ) ; }

    For (var a in childMas){ alert(childMas[a].src); }

  • Другие способы обращения к элементам

    • Другие способы рассмотрим на примере:

    1 3 4

    1 3 4

    Доступ:

    ... // нежелательные и устаревшие методы доступа к элементам: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // text alert(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // button alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // предпочтительные методы доступа к элементам alert(document.getElementById ("t" ) .type ) ; // text alert(document.getElementById ("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ) ; // 02 alert(document.getElementById ("o3" ) .text ) ; // 4 ...

    ... // нежелательные и устаревшие методы доступа к элементам: alert(document.forms.name); // f alert(document.forms.elements.type); // text alert(document.forms.elements.options.id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // предпочтительные методы доступа к элементам alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

    Пример: В html-документе создать кнопку и текстовое поле. При помощи скрипта раскрашивать фон кнопки (свойство style.backgroundColor кнопки) и выводить надпись «Привет!» в текстовом поле (трибут value).

    Html-код:

    document.getElementById("t1").value = "Привет!"; document.getElementById("b1").style.backgroundColor = "red";

    Вариант 2:

    document.getElementById ("t1" ) .setAttribute ("value" , "Привет!" ) ; document.getElementById ("b1" ) .style .backgroundColor = "red" ;

    document.getElementById("t1").setAttribute("value","Привет!"); document.getElementById("b1").style.backgroundColor = "red";

    Задание Js8_2. Создайте теги текстовых полей согласно изображению на рисунке. Задайте им соответствующие (указанные на рисунке) значения атрибутов id . При помощи скрипта добавьте во все числовые поля (предполагающие численные значения) значение « 0 »

    Проверка правильности внесения данных формы

    Не осталось ли поле пустым?

    Вводимым пользователями данным доверять нельзя. Предполагать, что пользователи при вводе данных будут их проверять, неразумно. Значит необходимо для этого использовать javascript.

    Для того, чтобы проверить, не осталось ли текстовое поле пустым (например, после заполнения пользователем данных какой-либо анкеты), следует обратиться к свойству value . Если значением свойства является пустая строка (""), значит необходимо как-то оповестить об этом пользователя.


    if(document.getElementById("name").value=="") { какие-то действия, например, вывод сообщения с требованием заполнить поле };

    Кроме того, можно обойтись и без скрипта. У тега input текстового поля есть атрибут pattern . в качестве его значения указывается регулярное выражение для проверки данных в данном текстовом поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока это текстовое поле не будет заполнено правильно.
    Например, для проверки, не осталось ли поле пустым:

    Текст вместо числового значения: функция isNaN

    Если поле предполагает введение числового значения , а вместо этого пользователь вводит текст, то необходимо использовать функцию isNaN (с англ. «является ли не числом?» ), которая проверяет тип вводимых данных и возвращает true в случае введения текстовых данных вместо числовых.

    Т.о. если возвращено true , то необходимо оповестить пользователя о том, чтобы он ввел правильный формат, т.е. число.

    if(isNaN(document.getElementById("minutes").value)){ оповещение с требованием ввести числовые данные };

    Дана страница с элементами для заполнения:


    Фрагмент кода html:

    1 2 3 4 5 6 7 8 9 10 11 12 Имя:
    Кол-во пончиков:
    Минут:
    Подытог:
    Налог:
    Итог:
    ...

    Имя:
    Кол-во пончиков:
    Минут:
    Подытог:
    Налог:
    Итог:
    ...

    Необходимо:
    Дополните пустые места фрагмента кода, расположенного ниже, проверяющего правильность заполнения двух текстовых полей: имя (id="name") и минут (id="minutes"). Используйте проверку на оставление поля пустым ("") и правильного формата заполнения числового поля (isNaN).

    * Выполнить задание также с помощью атрибута pattern текстовых полей, используя .

    Фрагмент скрипта:

    В коде используются для построения сложных условий, пройденные раннее.

    Новым понятием для вас является вызов функции в качестве обработчика события кнопки:
    onclick="placeOrder();"
    По щелчку на кнопке будет вызываться функция placeOrder()

    Для того, чтобы скрипт мог работать с каким-то элементом страницы, этот элемент сначала нужно найти. Для Этого в JavaScript есть несколько способов. Найденный элемент обычно присваивается переменной, и в дальнейшем, через эту переменную сркипт обращается к элементу и производит с ним какие-то действия.

    Поиск по id

    Если в коде страницы элементу задан атрибут id , то элемент можно найти по id. Это самый простой способ. Поиск элемента производится с помощью метода getElementById() глобального объекта document.

    document.getElementById (id)

    Параметры:

    id - id элемента, который нужно найти. id - это строка, поэтому она должна быть в кавычках.

    Создадим страницу, добавим на неё элемент и зададим ему id , а в скрипте найдём этот элемент:

    HTML код:

    JavaScript:

    var block = document.getElementById("block"); console.log(block);

    Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.

    Так как посик по id - это самый простой и удобный способ, часто используют именно его. Если с каким-то элементом нужно работать в скрипте, то в коде страницы этому элементу устанавливают атрибут id , даже если он не был установлен ранее. И находят элемент по id.

    Поиск по классу

    Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.

    document.getElementsByClassName (класс)

    Параметры:

    класс - класс элементов, которые нужно найти

    Метод возвращает псевдомассив, содержащий найденные элементы. Псевдомассивом он называется потому, что для него не работают многие методы массивов. Но главное свойство остаётся - можно обратиться к любому элементу массива. Даже если найден только один элемент, он всё равно находится в массиве.

    Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:

    HTML код:

    JavaScript:

    Теперь найдены только те элементы, которые расположены в блоке.

    Поиск по тэгу

    Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.

    document.getElementsByTagName (тэг)

    Параметры:

    тэг - тэг элементов, которые нужно найти

    Найдём все тэги p , которые есть на странице:

    var p = document.getElementsByTagName("p"); console.log(p);

    Этот метод можно также применять не ко всему документу, а к конкретному элементу. Найдите все тэги p , находящиеся в блоке.

    Поиск по селектору

    Существуют методы querySelector() и querySelectorAll() , которые находят элементы соответсвующие определённому селектору. То есть, будут найдены элементы, к которым был бы применён стиль, если бы он был указан такому селектору. При этом, наличие такого селектора в стиле страницы совсем не обязательно. Эти методы никак не связаны с CSS. Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым в коде страницы. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.

    document.querySelector (селектор)

    document.querySelectorAll (селектор)

    Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

    Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод querySelector() . Но при использовании этого метода нужно учитывать, что в дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

    HTML код:

    Данные методы также могут искать элементы не во всём документе, а внутри конеретного элемента.

    В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием других селекторов.

    Соседние элементы

    Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.

    элемент.previousElementSibling

    элемент.nextElementSibling

    Найдём элемент, следующий за блоком:

    Дочерние элементы

    Свойство children содержит массив с дочерними элементами.

    элемент.children

    Найдём дочерние элементы блока.

    Последнее обновление: 1.11.2015

    Для работы со структурой DOM в JavaScript предназначен объект document , который определен в глобальном объекте window . Объект document предоставляет ряд свойств и методов для управления элементами страницы.

    Поиск элементов

    Для поиска элементов на странице применяются следующие методы:

      getElementById(value) : выбирает элемент, у которого атрибут id равен value

      getElementsByTagName(value) : выбирает все элементы, у которых тег равен value

      getElementsByClassName(value) : выбирает все элементы, которые имеют класс value

      querySelector(value) : выбирает первый элемент, который соответствует css-селектору value

      querySelectorAll(value) : выбирает все элементы, которые соответствуют css-селектору value

    Например, найдем элемент по id:

    Block Header var headerElement = document.getElementById("header"); document.write("Текст заголовка: " + headerElement.innerText);

    С помощью вызова document.getElementById("header") находим элемент, у которого id="header". А с помощью свойства innerText можно получить текст найденного элемента.

    Поиск по определенному тегу:

    Заголовок

    Первый абзац

    Второй абзац

    var pElements = document.getElementsByTagName("p"); for (var i = 0; i < pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
    "); }

    С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.

    Если нам надо получить только первый элемент, то можно к первому элементу найденной коллекции объектов:

    Var pElement = document.getElementsByTagName("p"); document.write("Текст параграфа: " + pElement.innerText);

    Получение элемента по классу:

    Заголовок статьи

    Первый абзац

    Второй абзац

    var articleDiv = document.getElementsByClassName("article"); console.log(articleDiv); var textElems = document.getElementsByClassName("text"); for (var i = 0; i < textElems.length; i++) { console.log(textElems[i]); }

    Выбор по селектору css:

    Аннотация статьи

    Первый абзац

    Второй абзац

    var elem = document.querySelector(".annotation p"); document.write("Текст селектора: " + elem.innerText);

    Выражение document.querySelector(".annotation p") находит элемент, который соответствует селектору.annotation p . Если на странице несколько элементов, соответствующих селектору, то метод выберет первый из них. В итоге браузер выведет:

    Аннотация статьи Первый абзац Второй абзац Текст селектора: Аннотация статьи

    Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll , который возвращает массив найденных элементов:

    Аннотация статьи

    Первый абзац

    Второй абзац

    var elems = document.querySelectorAll(".text p"); for (var i = 0; i < elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
    "); }

    Вывод браузера:

    Аннотация статьи Первый абзац Второй абзац Текст селектора 0: Первый абзац Текст селектора 1: Второй абзац

    На этом уроке мы рассмотрим методы объекта document , которые предназначены для поиска узла или коллекции узлов во всём документе. А также методы объекта node (узла), которые выполняют аналогичные действия, но уже среди своих дочерних узлов.

    Методы, предназначенные для поиска узла или коллекции узлов в дереве

    На предыдущем уроке мы рассмотрели свойства, с помощью которых мы можем перемещаться по дереву и находить нужные нам узлы. Но, поиск узлов с помощью их свойств занятие очень трудное и не эффективное. Поэтому чтобы найти узлы в дереве, веб-разработчики обычно используют специально предназначенные для этого методы объекта document или узла (node).

    Метод getElementById()

    Метод getElementById(elementID) возвращает элемент в документе, имеющий указанный идентификатор (id="elementID"), в виде объекта Node (узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null .

    В соответствии стандартом у Вас в документе не может быть несколько элементов с одинаковым значением атрибута id , т.е. значение идентификатора должны быть уникальным в пределах одного документа. Тем не менее, если у Вас в документе существуют несколько элементов с указанным id , то метод getElementById() вернёт первый найденный элемент.

    document.getElementById(elementID)

    Данный метод имеет один обязательный параметр (elementID), представляющий собой строку, содержащую значение атрибута id элемента, который Вы хотите получить.

    Например, изменить цвет текста элемента, имеющего id="nameArticie" .

    Название статьи

    • 1 пункт
    • 2 пункт
    • 3 пункт
    //Получить элемент (узел), имеющий id="nameArticle" var nameArticle = document.getElementById("nameArticle"); //изменить цвет текста элемента nameArticle.style.color = "blue";

    Метод getElementsByClassName()

    Метод getElementsByClassName(className) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанное имя класса (class="className"), в виде объекта NodeList (коллекции узлов). Другими словами данный метод возвращает объект NodeList , представляющий собой коллекцию элементов (узлов), имеющих указанное в параметре этого метода имя класса.

    Для получения количество найденных узлов Вы необходимо использовать свойство length объекта NodeList . А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

    Var elementsList = document.getElementsByClassName("list"); for (var i=0; i