Как задать id элементу js

window.so_many.appendChild(textNode)// or as global variable
so_many.appendChild(textNode)

Мы закомментировали // const so_many = document.getElemntById(‘so_many’) , а также получили доступ к элементу через Id so_many в объекте window (или в качестве переменной global) и добавили туда текстовый узел.

Они также доступны в консоли DevTools:

>> so_many
 
>> so_many.appendChild(document.createTextNode("Some text from console"))

Прикрепление event listeners

>> so_many.addEventListener('click',(evt)=>alert('from console'))

При нажатии на элемент div получаем:

Изменение стиля элемента

>> so_many.style.backgroundColor = "green"

Наш фоновый цвет был белый, а код выше изменит его на зеленый. Нажмите Enter:

Фоновый цвет меняется на зеленый.

Изменение HTML элемента

>> so_many.innerHTML = "Inner HTML from Console"

После нажатия на Enter:

Вы также можете поэкспериментировать с другими методами HTMLElement, чтобы узнать, как управлять элементом по ID через переменную window или global без лишнего document.getElementById(. ) .

Заключение

Как же круто. Думаю, что перестану писать document.getElementById(. ) в следующих проектах :). Порой названия методов кажутся слишком длинными, и их просто не хочется писать 🙂

Однако использовать переменную window или global для получения доступа к элементам по ID нужно должным образом. Эту функцию следует использовать в интерактивном режиме, а не в реальном коде — Совет от Акселя Раушмайера.

Разница между «ID» и «CLASS» в HTML

Индентификаторы (id) и классы (class) — это «крючки»

Мы можем различными путями описать содержимое HTML-документа. Основные элементы, такие, как , и выполняют свою работу, но основной набор тегов не может покрыть каждое возможное оформление страничного элемента или слоя. Для этого нам нужно использовать идентификаторы и классы.

Как вариант, мы имеем боковые боксы для контента, которые мы можем разделить следующим образом:

И какова все-таки разница между ними?

Идентификаторы всегда уникальны для одной страницы

• Каждый элемент может иметь только один ID.
• На каждой странице может быть только один элемент с ID.

Ваш код страницы не пройдет валидацию, если вы используете одинаковые ID более, чем один раз. Так как валидность для нас очень важна, не стоит забывать об уникальности идентификаторов.

Классы не уникальны

• Вы можете использовать одинаковые классы для разных элементов.
• Вы можете использовать разные классы для одинаковых элементов.

Любая информация, необходимая для наложения стилей на разные объекты, может быть описана в class. Для примера – страница с множественными “widget” :

Вы можете использовать имя класса “widget” как крючок, чтобы, например, сделать больше, чем другие, но при этом сохраняя все атрибуты. Вы можете накладывать на один объект более, чем один класс:

  Нет необходимости использовать новый класс, просто добавьте новый необходимый класс справа или слева. Эти классы, разделенные через пробел, нормально воспринимаются всеми браузерами в любом количестве (но не стоит доходить до фанатизма и создавать тысячу и более классов для одного элемента).

Идентификаторы имеют специальную функциональность для браузера

Классы не имеет специального функционала в браузерах, в отличии от идентификатора. Идентификаторы имеют очень важное свойство, так называемое «мера упорядочности (hash value)». Например, если вы введете в строке браузера строку ttp://your_site.ru#comments, то браузер попытается найти элемент с идентификатором, равным comments и автоматически совершит прокрутку страницы, чтобы показать этот элемент.

Это и является основой причиной уникальности идентификатора, поэтому ваши браузеры знают куда скроллить.

При обработке джаваскриптом страницы, быстрее всего будут найдены элементы с идентификаторов, чем с классом.

Элемент может содержать оба свойства

Ничто не мешает вам иметь и идентификатор, и класс на одном элементе. На самом деле, это часто очень хорошая идея. Возьмем, к примеру, разметку по умолчанию для элемента списка комментариев:

К нему применен класс, который вам может понадобиться для стилизации всех комментариев на странице, но он также имеет уникальное значение идентификатора (динамически генерируется CMS). Это значение идентификатора полезно для прямой ссылки. Теперь можем легко ссылаться на конкретный комментарий на определенной странице.

CSS все равно

Что касается CSS, вы ничего не можете сделать с идентификатором, такого что вы не можете сделать с классом, и наоборот. Я помню, когда я впервые изучал CSS, и у меня возникла проблема, иногда я пытался устранить неполадки, переключаясь между этими значениями. Нету. CSS не волнует.

Но помним, что вес селектора CSS с идентфиикатором, больше селектора класса.

Javascript

Люди из JavaScript уже, вероятно, более созвучны различиям между классами и идентификаторами. JavaScript зависит от наличия только одного элемента страницы с любым конкретным идентификатором, иначе обычно используемая функция getElementById не будет надежной. Для тех, кто знаком с jQuery, вы знаете, как легко добавлять и удалять классы для элементов страницы. Это встроенная функция jQuery.

Обратите внимание, что такой функции не существует для идентификаторов. JavaScript не несет ответственности за манипулирование этими значениями, это вызовет больше проблем, чем стоило бы.

И да, Javascript значительно быстрее найдет элемент с идентификатором, чем элемент с классом.

Если не нужны, то и не используйте

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

Это значит избегать таких вещей:

Мы уже знаем, что этот элемент является ссылкой, но он еще и якорный элемент. Нет смысла накладывать на него идентификатор, так как мы уже наложили стиль через его тег.

.link

Также избегайте этого:

 Идентификатор здесь используется надлежащим образом, так как на странице, скорее всего, будет только один правый столбец, но название неуместно. Попробуйте описать контекст элемента, а не то, где он находится или как он выглядит. Идентификатор здесь «боковой панели» будет более подходящим.

Микроформаты требуют специфические названия классов

Думаешь, микроформаты у тебя не укладываются у тебя в голове? Это не так, всё просто! Это просто обычная разметка, использующая стандартизированные имена классов для информации, которую они содержат. Пример стандартной vCard:

CommerceNet 
, CA  
 
 
Email: [email protected] 
 

Павел Сайк
15 лет назад
Комментарии 8
Добавить комментарий ×

При прочих равных условиях, создание документа с class обходится меньшей кровью, чем с id (в общем случае, от 2 до 10% выигрыша). Если принять во внимание, что element.class-селекторы отрабатывают быстрее, чем #id на те же 10%, то общий выигрыш при использовании в документе классов перед идентификаторами составит порядка 15%. В абсолютном значении эти цифры не так велики: для Centrino Duo 1.7 получается цифра примерно в 0,0085мс на 1 идентификатор (в среднем, 3 CSS-правила и 1 употребление).

Для документа со 100 элементами выигрыш может составить почти 1мс, для документа с 1000 — 8,5мс! Средняя страница в интернете имеет 500–1000 элементов (проверить, сколько элементов на странице, можно просто запустив javascript:alert(document.getElementsByTagName(‘*’).length) в адресной строке браузера на какой-либо открытой странице), поэтому это уже то, за что можно побороться.

Однако, значительную нагрузку составляет именно создание DOM-дерева в документе (можно посмотреть, как экспоненциально растет время для Opera, Firefox и Safari) и самого документа (постоянное время в 60мс для IE, которое превосходит все остальные накладные расходы при создании среднего документа). В целом, эти операции уходит от 70% всего времени (т.е. наибольшая экономия достигается за счет минимизации размера дерева и количество HTML-страниц, загружаемых, например, во фрейме, в этой области планируется провести дополнительные исследования).

На скорость вычисления одного элемента по идентификатору, как ни странно, наибольшее влияние оказывает опять-таки DOM-Дерево, чем количество таких элементов. Даже при 1000 элементов с id более половины временных издержек можно урезать, если просто сократить общее число элементов (особенно хорошо это заметно для IE).

В целом же, основных советов два: уменьшайте DOM-дерево и используйте id только в случае действительной необходимости.

Запись множественных атрибутов.

Здесь имеются принципиальные различия между id и class. Так – одному объекту можно задать сразу несколько классов:

При записи в CSS нескольких стилей с одинаковыми атрибутами для классов это будет так:

Курсы javascript

При открытии/загрузке страницы тегу body должен присваиваться айди.

Эта конструкция не срабатвает, подскажите плиз, в чем проблема?

07.06.2014, 00:05
Регистрация: 02.01.2010
Сообщений: 6,458

document.body.id = "unique_id"; document.getElemetsByTagName('body')[0].id = "unique_id"; document.querySelector('body').id = "unique_id";

__________________
07.06.2014, 00:19
Регистрация: 04.03.2014
Сообщений: 76
есть! спасибо
+ в репу
07.06.2014, 00:26
Регистрация: 04.03.2014
Сообщений: 76

а если упомянутый тег body находится в iframe, как должен выглядеть код ?
и при этом страница, на которой размещен фрейм и страница внутри фрейма лежат на моем домене (т.е. они обе являются страницами одного сайта).

07.06.2014, 00:47
Регистрация: 04.03.2014
Сообщений: 76

вроде так работает

07.06.2014, 01:10
Регистрация: 04.03.2014
Сообщений: 76

а нет, никак не могу изменить стиль документа в iframe, несмотря на то, что этот документ является частью моего сайта.

07.06.2014, 01:51
Регистрация: 02.01.2010
Сообщений: 6,458
Globus,

В вашем случае во фрейме просто ещё нет document(не загрузился ещё), потому следует его получать уже после события onload когда он точно на месте.

__________________
07.06.2014, 13:46
Регистрация: 04.03.2014
Сообщений: 76

Спасибо! А если iframe генерируется на странице и вспылвает в лайтбоксе, то onload спасёт? или сгенерированный при нажатии на кнопку фрейм не будет считаться появившимся на месте?

Атрибут id

В HTML есть много атрибутов, и у каждого из них своя задача. Познакомимся поближе с атрибутом id . В его названии изначально заложен основной смысл — identifier, то есть идентификатор. Он задаёт HTML-элементу уникальное название, которое должно быть единственным в рамках документа.

Значение атрибута

Есть несколько условий, которые нужно учитывать при задании атрибута id :

• Значение должно содержать как минимум один символ.
• Значение не должно содержать пробелов, табуляций и так далее.
• Значение должно начинаться с латинской буквы, потому что цифры и символы _ , — , . не были разрешены в HTML4 и могут вызвать проблемы с совместимостью.

Использование атрибута

Стилизация

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

Атрибут id должен быть уникальным на странице, но класс — нет. Он позволяет как обращаться к конкретному элементу, так и стилизовать элементы группами, если у них задан одинаковый класс. Ещё одно различие — значение id всегда должно быть одно, но элементу можно задать несколько значений в атрибуте class , указывая их через пробел.

Связывание поля ввода и подписи по id

Атрибут id также используется при создании форм. К полям ввода в форме часто нужно добавлять подписи для описания того, что нужно ввести пользователю. В этом случае используется специальный тег label , который логически связывает текст подписи и конкретное поле ввода. Например, при такой связке клик по подписи автоматически переместит курсор в поле ввода.

Связать поле ввода и подпись к нему можно, просто обернув поле ввода в тег label вместе с текстом подписи. Но такой способ в некоторых случаях может быть неудобен — например, когда в разметке между полем и подписью есть другие элементы. В таких случаях будет полезен второй способ — с использованием id . Чтобы связать поле ввода и подпись с его помощью нужно:

1. Добавить полю ввода идентификатор, задав значение атрибуту id .
2. Добавить тегу label атрибут for и указать в нём значение идентификатора поля ввода.

Создание якоря с помощью id

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

Для создания якоря нужно:

1. Присвоить атрибут id элементу, к которому мы хотим иметь быстрый доступ.
2. Добавить ссылку на этот элемент там, откуда мы хотим осуществлять переход.

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

Также с помощью id можно ссылаться на конкретное место в другом документе, дописав в конце адреса идентификатор нужного фрагмента.

Получение доступа к элементу из JavaScript

С HTML-элементом часто нужно работать из JavaScript. В языке есть специальный метод, чтобы найти элемент по атрибуту id и получить к нему доступ — getElementById() . Дальше с найденным элементом можно производить нужные действия.

const button = document.getElementById('button'); button.addEventListener('click', function () < alert('Click!'); >); 

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Element.id

Свойство id представляет идентификатор элемента, отражая глобальный атрибут id.

Если значение id не пустое, то оно должно быть уникально в документе.

id часто используется с getElementById , чтобы получить нужный элемент. Часто применяют ID как селектор, для стилизации документа, с помощью CSS.

Примечание: идентификаторы чувствительны к регистру, но вам следует избегать создание id, которых различает регистр (смотрите Чувствительность к регистру в классах и идентификаторов).

Синтаксис

var idStr = element.id; // Получаем id.

element.id = idStr; // Применяем id.

idStr — идентификатор элемента

Спецификации

Specification
DOM Standard # ref-for-dom-element-id①

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

JavaScript свойство Element.id

JavaScript свойство id объекта Element является свойством только для чтения, которое возвращает значение глобального атрибута id элемента (идентификатор элемента).

Обращаю Ваше внимание на то, что eсли значение id не является пустой строкой, то оно должно быть уникальным во всём документе. Идентификаторы чувствительны к регистру.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
id	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

// получение id элемента const idString = element.id; // установка id элементу element.id = idString;

Версия JavaScript

Document Object Model (DOM) Level 1 Core

Пример использования

const bodyId = document.body.id; // получаем id элемента body if ( bodyId !== "myBody" )  // проверяем соответствует ли id определенному значению document.body.id nam">myBody"; // устанавливаем id элементу body > 

© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.