Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Дописать класс к id в функции document.getElementById (https://javascript.ru/forum/dom-window/79292-dopisat-klass-k-id-v-funkcii-document-getelementbyid.html)

Jimmi 20.01.2020 19:53

Дописать класс к id в функции document.getElementById
 
Функция document.getElementById позволяет обратиться к элементу через его id. Но как указать скрипту названия класса родителяского блока данного элемента?

Пример того как я представляю реализацию данного условия. Изменяем значение свойства value в теге input:
<div class="parent">
<input id="element" value="Отправить">
</div>

document.getElementById('.parent#element').value = 'Задать вопрос';
$('.parent#element').val('Задать вопрос');

рони 20.01.2020 20:22

Цитата:

Сообщение от Jimmi
getElementById

querySelector

Nexus 20.01.2020 20:22

document.querySelector('.parent #element').value = 'Задать вопрос';
$('.parent #element').val('Задать вопрос');


ID элемента должен быть уникальным.
Почитайте про селекторы:
https://learn.javascript.ru/css-selectors

laimas 20.01.2020 20:49

Может тогда и <input type="submit" id="element" value="Отправить">?

laimas 20.01.2020 20:50

Nexus, приветствую, сына заблудшего. :)

Jimmi 21.01.2020 08:28

Цитата:

Сообщение от Nexus (Сообщение 518951)
document.querySelector('.parent #element').value = 'Задать вопрос';
$('.parent #element').val('Задать вопрос');


ID элемента должен быть уникальным.
Почитайте про селекторы:
https://learn.javascript.ru/css-selectors

Спасибо. Помогло!:dance:

Цитата:

Сообщение от Nexus (Сообщение 518951)
ID элемента должен быть уникальным.
Почитайте про селекторы:
https://learn.javascript.ru/css-selectors

Ситуации бывают разные. В данном случае input с одним и тем же id встречается в разных языковых версиях. Изменить input другим способом было бы сложнее. Именно поэтому обратился к JavaScript. За ссылку также спасибо.

ksa 21.01.2020 10:04

Цитата:

Сообщение от Jimmi
Ситуации бывают разные.

Для ИД ситуация должна быть однозначной - он уникален на странице. :nono:
Если уникальности нет - используй class.

Malleys 21.01.2020 10:44

Цитата:

Сообщение от ksa
Для ИД ситуация должна быть однозначной - он уникален на странице.

Вообще-то человек правильно написал — ситуации бывают разные! На странице может быть, например, 5 явно не достигаемых при помощи document.getElementById элементов с одинаковым id (поскольку они в разных Shadow DOM) и один явно достигаемый при помощи document.getElementById элемент с тем же id. Хотя получается, что на странице 6 элементов с одинаковыми идентификаторами, невозможно сказать, что нет уникальности.

ksa 21.01.2020 12:27

Цитата:

Сообщение от Malleys
на странице 6 элементов с одинаковыми идентификаторами

Это уже не верно по определению... :D

Malleys 21.01.2020 13:00

Цитата:

Сообщение от ksa
Это уже не верно по определению

А вы разве знаете определение?

Вот, читаем в спецификации
Цитата:

Сообщение от https://www.w3.org/TR/html53/dom.html#element-attrdef-global-id
When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.

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

Вот, например, на странице два элемента с одинаковым id, но они находятся в разных деревьях DOM, что полностью удовлетворяет требованиям спецификации.
<section id="a">a</section>
<section id="b">b</section>
<script>
	const root = document.getElementById("b").attachShadow({ mode: "closed" });
	root.appendChild(document.getElementById("a").cloneNode(true));
</script>

ksa 21.01.2020 13:39

Цитата:

Сообщение от Malleys
Вот, читаем в спецификации

Там говорится о "дереве"... Что само является скорее "понятием", чем определением.
Т.о. в наших рассуждениях все упрется в то, как мы покажем "свое" дерево.

Например, если дерево от дерева мы будем отличать их "корнями" - За корень можно взять весь документ, что загружен сейчас в окно браузера...
Т.о. в этом "дереве" не должно быть двух одинаковых ИД.

ksa 21.01.2020 13:42

Malleys, и да, я не читаю аглицких документов... :(
Вся моя информация взята из русскоязычной литературы - книги , статьи. Некоторые из них это переведенные с других языков.

ksa 21.01.2020 13:52

Цитата:

Сообщение от ksa
Вся моя информация взята из русскоязычной литературы - книги , статьи.

Т.е. мне "ближе" вот такое определение ИД
Цитата:

Описание
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
http://htmlbook.ru/html/attr/id

Правда тут опять можно упереться в описание понятия "коде документа"... :D

Malleys 21.01.2020 15:34

Цитата:

Сообщение от ksa (Сообщение 518998)
Там говорится о "дереве"... Что само является скорее "понятием", чем определением.
Т.о. в наших рассуждениях все упрется в то, как мы покажем "свое" дерево.

Например, если дерево от дерева мы будем отличать их "корнями" - За корень можно взять весь документ, что загружен сейчас в окно браузера...
Т.о. в этом "дереве" не должно быть двух одинаковых ИД.

Стоит отметить, что тут речь идёт о построенном DOM, а не о исходном коде, на основе которого строится DOM. «Корнями» являются экземпляры классов Document, (от которого наследуют HTMLDocument и XMLDocument), DocumentFragment (от которого наследует класс ShadowRoot), а «деревями» — любой элемент, экземпляр класса Element, например, вставленные в DOM <html>, <body>, <a>, <svg>, ваши собственные элементы и пр. — это всё «деревья», по которым вы можете путешествовать при помощи свойств parentNode, childNodes, previousSibling, nextSibling и пр. А те узлы DOM, которые наследуют от DocumentType и CharacterData (от которого в частности наследуют Text и Comment) можно назвать «листьями», поскольку они не могут содержать других узлов DOM.

Цитата:

Сообщение от ksa (Сообщение 519000)
Т.е. мне "ближе" вот такое определение ИД
Цитата:

Описание
Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

Это совершенно неверное описание (учитывая то, что я вам написал выше), поскольку следующий код совершенно правилен (каждое дерево до самого корня содержит элементы без повторяющихся id) с точки зрения спецификации...
<template>
    <p id="a">a1</p>
</template>
<template>
    <p id="a">a2</p>
</template>
<p id="a">a3</p>

<script>
const ps = document.querySelectorAll("p#a");
alert(ps.length); // выводит «1»
</script>

ksa 21.01.2020 15:52

Malleys, в любом случае я не стану так делать...

Malleys 21.01.2020 17:32

Цитата:

Сообщение от ksa
в любом случае я не стану так делать...

Кто знает...

ksa 22.01.2020 07:08

Цитата:

Сообщение от Malleys
Кто знает...

Я знаю. :D


Часовой пояс GMT +3, время: 06:49.