Как получить доступ к свойствам DOM, скрытым полями формы? - PullRequest
Новая
       1

Как получить доступ к свойствам DOM, скрытым полями формы?

0 голосов
/ 27 января 2019

Обновление 1

После получения некоторых ответов я придумал еще более сложный случай.

Как получить доступ к идентификатору формы и другим атрибутам, когда форма имеет поля с именем "id "и" getAttribute "?Общий вопрос: как надежно получить доступ к атрибутам формы в любой ситуации? 

console.log(document.querySelector("#myform").id)
console.log(document.querySelector("#myform").getAttribute("id"))
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
  <input name="id" type="text" value="myvalue">
  <input name="getAttribute" type="text" value="myvalue2">
</form>

Результат: 

<input name="id" type="text" value="myvalue">
TypeError: document.querySelector(...).getAttribute is not a function[Learn More]

Я запутался, как поля формы перезаписывают свойства формы.Например, поле с именем «id» будет скрывать фактический идентификатор формы: 

console.log(document.querySelector("#myform").id)
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
  <input name="id" type="text" value="myvalue">
</form>

дает: 

<input name="id" type="text" value="myvalue">

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

Ответы [ 4 ]

0 голосов
/ 28 января 2019

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

В цепочке прототипов должен быть выбран правильный прототип (вы должны знать, где было определено свойство). 

// To access obscured methods (and also attributes)
console.log(document.createElement("form").getAttribute.apply(document.querySelector("#myform"), ["id"]))

// To access obscured properties (such as `style`):
Object.getOwnPropertyDescriptor(Object.getPrototypeOf(Object.getPrototypeOf(document.createElement("form"))), "style").get.apply(document.querySelector("#myform")).background = "green"
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
  <input name="id" type="text" value="myvalue">
  <input name="getAttribute" type="text" value="myvalue2">
  <input name="style" type="text" value="myvalue3">
</form>
0 голосов
/ 27 января 2019

С getAttribute () вы получаете атрибуты формы. 

console.log(document.getElementById('myform').getAttribute('id'))
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
  <input name="id" type="text" value="myvalue">
</form>
0 голосов
/ 27 января 2019

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

Что происходит с вашим кодом, так это то, что document.querySelector("#myform") правильно находит элемент form, но затем вы запрашиваете id свойство этого и так, поскольку есть другой элемент с name, который совпадает с id form, консоль регистрирует элемент, а не фактическое значение свойства, потому что Поля формы являются потомками их form родителя и поэтому считаются доступными как свойства form.

. Как вы можете видеть ниже, просто запрашивайте document.querySelector("#myform") (без .id послеit), возвращает ссылку на первый элемент DOM, соответствующий селектору. 

console.log(document.querySelector("#myform").id);
console.log(document.querySelector("#myform"));
<form id="myform">
  <input name="id" type="text" value="myvalue">
</form>

Итак, держитесь подальше от предоставления элементам name или id, который является именем собственного свойства или атрибута элемента HTML, и вывсе будет хорошо: 

console.log("The value of the id attribue of the form as well as the value of the id property of the form DOM object is: " + document.querySelector("#myform").id); // Now returns the id of the element
console.log("The input element within the form is: ", document.querySelector("input[name='user']"));
<form id="myform">
  <input name="user" type="text" value="myvalue">
</form>
0 голосов
/ 27 января 2019

EDIT:

ОП изменил вопрос теперь, чтобы включить getAttribute или любую произвольную строку в качестве имени элемента формы.

Это ничем не отличается от перезаписи любой существующей переменной. Например, что если я захочу создать переменную с именем window или document? или, возможно, я хочу сохранить некоторые данные в переменной с именем forms и поместить их в существующий объект document.

Каждый из них будет работать, но не даст ожидаемого результата. В этом суть этого вопроса. "Я могу это сделать?" Да. "Должен ли я сделать это?" Нет.

Мы как разработчики обязаны понимать эти нюансы. И теперь ОП делает.

Больше всего обескураживает тот факт, что ОП теперь знает эту истину, но продолжает заниматься этим вопросом, изменяя перезаписываемую переменную!

END EDIT (Оригинальный ответ об использовании id в качестве имени):

Вы перепутали разницу между свойством Object и атрибутом HTML.

Мы получаем доступ к свойствам, используя методы доступа к объекту (оператор . или запись []).

Мы получаем доступ к атрибутам HTML, используя .getAttribute('name'). Поэтому, если вы хотите получить значение атрибута, как оно написано в HTML, как подсказывает ваш вопрос, вы должны сделать это с помощью:

document.querySelector("#myform").getAttribute('id'), который возвращает "myform".

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

Теперь, если правильно рассмотреть свойства объекта, это: 

document.querySelector("#myform").id

делает именно то, что спецификация говорит об оценке синтаксиса:

форма [имя]

Возвращает элемент управления формы (или, если их несколько, RadioNodeList формы управления) в форме с указанным идентификатором или именем (исключая изображения кнопок по историческим причинам); или, если их нет, возвращает элемент img с заданным идентификатором.

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

Если имеется несколько совпадающих элементов, тогда объект RadioNodeList содержащий все эти элементы возвращается.

Здесь: https://html.spec.whatwg.org/multipage/forms.html#the-form-element

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...