JavaScript: Различать между формой собственности и поля формы

Question

Учитывая простую форму:

<form id="data" action=""> 
    <input type="text" name="id"> 
    <input type="text" name="info"> 
    <button type="submit" name="ok"> 
</form> 

я могу читать свойства и поля формы следующим образом:

var data=document.querySelector['form#data']; 
alert(data.action); 
alert(data['action']); 
alert(data.info); 
alert(data['info']); 
alert(data['id']); 
alert(data.id); 

Теперь, по большей части , form['info'] является альтернативой для form.info. Однако я предпочитаю использовать form['info'] для полей формы и form.info для актуальных данных.

Вопрос: на JavaScript, как я могу определить, является ли form['info'] (или form.info) формой или формой? Я знаю, что это из формы выше, но как бы я знал, не зная о конкретной форме?

Дополнительная информация, если у меня есть поле формы с именем так же, как свойство (например, id), которое имеет преимущество?

Answer 1

ОК, у меня есть ответ.

1. В случае data['id'] или data.id, поле формы имеет приоритет над свойством формы. Это может быть проблематично, поэтому было бы безопаснее использовать form.getAttribute('id') для обеспечения безопасности.

2. Из-за путаницы было бы лучше всегда использовать data.elements. То, что только содержит элементы формы, так что это легко.

Answer 2

Я отвечу на вопрос, основываясь на моем понимании вашего вопроса.

В коде, приведенном вами:

<form id="data" action=""> 
    <input type="text" name="id"> 
    <input type="text" name="info"> 
    <button type="submit" name="ok"> 
</form> 

Если вы селектор запроса data=document.querySelector('form#data');

И затем, если вы пытаетесь получить доступ к data.id

Ваш Вопрос

• Будет ли выход «атрибутом id формы», или «ребенок узел/объект с именем идентификатор»

• Который берет предшествование

Выход будет узлового/объект с именем «ID», а не атрибут ID формы. Цель DOM - пересечь дерево объектной модели, поэтому узел берет предпочтение над атрибутом/свойством.

Чтобы знать, если возвращаемый выход является атрибутом или нет:

• Атрибут возвращает текст. Это конечная точка.
• HTML элемент возвращает объект (который снова может быть использован для обхода дерева DOM)

Answer 3

Я думаю, что я понимаю ваш вопрос: как определить, ссылается ли форма собственности стандартного свойства HTML-элемента формы или контрольная форма, например:

<form name="formName"> 
    <input name="inputName"> 

так, что:

form.name 

это свойство формы, возвращающую строку, тогда:

form.inputName 

- это свойство, которое вернет элемент управления формой (или NodeList для переключателей).

Короткий ответ: вы не можете просто от имени, так как свойства формы могут быть разделены символами формы с одинаковым именем, например.

<input type="submit" name="submit"> 

означает, что вы не можете назвать form.submit(), потому что теперь form.submit ссылки на кнопку отправить, а не метод.

Вы могли бы рассмотреть утиная типизация, так:

var thing = form.blah; 
if (typeof thing == 'string' || typeof thing == 'function') { 
    // probably a property of the form itself 

} else if {thing == form[thing.name]) { 
    // probably a form control 
} 

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

if (form.blah && typeof form.blah.value == 'string') { 
    // do stuff with form.blah.value 
} 

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

Таким образом, в нижней строке всегда используются разумные имена для элементов управления формы, которые не сталкиваются со стандартными именами свойств формы, тогда вы можете указать имя, если это свойство формы или управляющее имя. Одна из схем заключается в том, чтобы всегда использовать случай верблюда и два слова, поэтому вместо «name» используйте «userName» или «employeeName» и т. Д. Для кнопки «Отправить» используйте «submitButton», для сброса используйте «resetButton», хотя это не являются общими для их названия.