Javascript; выбор вложенного элемента вызывает ошибку «не функция»

Question

Javascript; выбор вложенного элемента вызывает ошибку «не функция»

1

Мне нужно выбрать элемент внутри другого элемента (кнопка в форме). Обычно я использую jQuery; который будет выглядеть примерно так:

element = $('#webform-client-form-1812 input[name="op"]');

Но я не могу использовать jQuery в этом проекте, поэтому я попробовал:

element = document.getElementById("webform-client-form-1812").getElementsByName("op")[0];

Но я получаю сообщение об ошибке:

Uncaught TypeError: document.getElementById(...). GetElementsByName не является функцией.

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

HardlyNoticeable 23 июль 2018, в 04:54

Источник

Теги:

javascript

2 ответа

1

Поскольку "getElementsByName" и "getElementById" могут поддерживаться только объектным "документом" и "XMLDocument", вы можете сравнить с getElementByTagName. http://help.dottoro.com/ljlfpmux.php

ling yu 23 июль 2018, в 01:00

0

Так; getElementByTagName работает иначе, чем getElementsByName и getElementById?
HardlyNoticeable 23 июль 2018, в 03:00
0

Как бы вы изменили мой код, чтобы он работал?
HardlyNoticeable 23 июль 2018, в 03:01
0

Теперь вы знаете, почему он не может работать, вы можете обойти его самостоятельно, и есть много способов решить проблему, и CertainPerformance дал вам ответ
ling yu 23 июль 2018, в 03:06

Показать ещё 1 комментарий

Ещё вопросы

Так; getElementByTagName работает иначе, чем getElementsByName и getElementById?
Как бы вы изменили мой код, чтобы он работал?
Теперь вы знаете, почему он не может работать, вы можете обойти его самостоятельно, и есть много способов решить проблему, и CertainPerformance дал вам ответ

CertainPerformance · Accepted Answer · 2018-07-22T23-48-00.000Z

getElementsByName - это только метод document - в отличие от getElementsByClassName, он не может быть использован для отдельных элементов.

Вместо этого используйте querySelector, и вы можете использовать тот же селектор CSS, который вы использовали в jQuery:

const element = document.querySelector('#webform-client-form-1812 input[name="op"]');

Вероятно, полезно использовать querySelector или querySelectorAll вместо вложенных getElement... getElement вызовов, когда это возможно - это менее излишне подробный и делает код более понятным. Вы можете легко выразить множество сложных правил с помощью строки селектора CSS, которая была бы довольно громоздкой для кода в противном случае.