Как перечислить весь html-идентификатор в документе с помощью javascript?

Я хотел бы иметь возможность использовать javascript для поиска каждого идентификатора (или имени) для каждого объекта в html-документе, чтобы они могли быть напечатаны в нижней части страницы.

Чтобы лучше понять, что я пытаюсь сделать, позвольте мне объяснить. Время от времени я создаю большие формы для таких вещей, как заявки на недвижимость, списки аренды, подробные медицинские формы для регистрации веб-сайта и т.д. Поскольку я делаю это сейчас, я создаю форму, присваиваю идентификатор и имена и решаю, какие значения требуются и таковые. Затем, когда я создаю валидацию формы php и часть вставки базы данных для формы, я вручную просматривал html и вытаскивал весь идентификатор для ссылки из массива $_post для проверки ввода и вставки базы данных. Это было очень много времени и настоящая боль, часто сопровождаемая ошибками ввода.

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

Любые предложения о том, как я могу удалить весь идентификатор в массив, или если у меня уже есть массив, я могу получить доступ и выполнить цикл (я не смог найти что-либо в Google). Кроме того, будут приветствоваться любые предложения о том, как ускорить процесс создания больших форм с рабочим потоком, который генерирует php или делает его быстрее, чем мой текущий метод.

Ответ 1

В современных браузерах вы можете сделать это через

document.querySelectorAll('*[id]')

должен выполнить эту работу.

Если вам нужны все потомки myElement с идентификаторами, тогда выполните

myElement.querySelectorAll('*[id]')

Если вы хотите быть очень осторожным, чтобы исключить <span id="">, то возможно

document.querySelectorAll('*[id]:not([id=""])')

Если требуется совместимость со старыми браузерами

var allElements = document.getElementsByTagName("*");
var allIds = [];
for (var i = 0, n = allElements.length; i < n; ++i) {
  var el = allElements[i];
  if (el.id) { allIds.push(el.id); }
}

должен оставить вас со всеми идентификаторами в allIds.

Если вам нужно просто перечислить идентификаторы в определенной форме node, вы можете заменить document.getElementsByTagName на myFormNode.getElementsByTagName.

Если вы хотите включить оба идентификатора и NAME, поставьте

else if (el.name) { allIds.push(el.name); }

ниже if выше.

Ответ 2

Если вы делаете свое развитие с использованием довольно современного браузера, вы можете использовать querySelectorAll(), а затем использовать Array.prototype.forEach для итерации коллекции.

var ids = document.querySelectorAll('[id]');

Array.prototype.forEach.call( ids, function( el, i ) {
    // "el" is your element
    console.log( el.id ); // log the ID
});

Если вам нужен массив идентификаторов, используйте Array.prototype.map:

var arr = Array.prototype.map.call( ids, function( el, i ) {
    return el.id;
});

Ответ 3

Получить все теги с помощью шаблона:

var allElements = document.getElementsByTagName('*');
for(var i = 0; i < allElements.length; i++) {
    // ensure the element has an Id that is not empty and does exist
    // and string other than empty, '', will return true
    allElements[i].id && console.log(allElements[i].id);
}

Ответ 4

Селектор jQuery $('[id]') получит все элементы с атрибутом id:

$('[id]').each(function () {
    do_something(this.id);
});

Рабочий пример здесь: http://jsfiddle.net/RichieHindle/yzMjJ/2/

Ответ 5

хорошо, так как это форма, что вы хотите итерации только над элементами формы, а не всеми тегами в документе (например, href, div и т.д.).

for (var i=0; i < form.elements.length; i++) {
   var elementId = form.elements[i].id;
}

Ответ 6

с jQuery

$('*').map(function() {
   return this.id || null;
}).get().join(',');

он получает все элементы в DOM и запускает функцию для каждого, чтобы вернуть id (и если undefined, возврат null не вернет ничего. Это возвращает объект jQuery, который затем преобразуется в Массив JavaScript с get(), и затем он преобразуется в строку идентификаторов, разделенных запятыми.

Попробуйте на этой странице, и вы получите

"уведомит-контейнер, наложение заголовок, пользовательский заголовок, заголовок, portalLink, topbar, hlinks, hlinks-пользователи, hlinks-нав, hlinks-обычай, hsearch, поиск, hlogo, hmenus, нав-вопросы, nav- теги, нав пользователь, нав-значки, нав-ответ, нав-askquestion, содержание, вопрос заголовок, mainbar, вопрос, редактировать-теги, ссылки-пост-7115022, крупный вопрос-7115022, флаг-пост-7115022, комментарии-7115022, добавление комментария-7115022, комментарии-канальный 7115022, ответы, ответы-заголовок, вкладки, ответьте-7115033, ссылка-пост-7115033, флаг-пост-7115033, комментарии-7115033, добавление комментарий-7115033, комментарии-ссылка-7115033, ответить-7115042, ссылка-пост-7115042, флаг-пост-7115042, комментарии-7115042, добавление комментария-7115042, комментарии-канальный 7115042, ответ-7115043, ссылка-пост-7115043, Удалить- пост-7115043, флаг-пост-7115043, пост-редактор 7115043, ВРС-кнопка-бар-7115043, ВРС-кнопка-рядный 7115043, ВРС-жирная кнопка-7115043, ВРС-наклонная кнопка-7115043, ОМА spacer1-7115043, ВРС-канальном кнопка-7115043, ВРС-котировка кнопка-7115043, кнопка-7115043 ВРС-код, ВРС-изображение кнопки-7115043, ВРС-spacer2-7115043, ВРС-olist кнопка-7115043, ВРС-ulist-б utton-7115043, ВРС-заголовок кнопки-7115043, ВРС-ч-кнопка-7115043, ВРС-spacer3-7115043, кнопка-7115043 ВРС-уничтожьте, ВРС-повтор-кнопочный 7115043, ВРС-помощь кнопки-7115043, ВРС-вход-7115043, проект сохраняемого-7115043, communitymode-7115043, ВРС-превью-7115043, FKEY, автор, редактирование-комментарий-7115043, редактирование-комментарий ошибки-7115043, отправить-кнопочный 7115043, комментарии-7115043, надстройка комментарий-7115043, комментарии-ссылка-7115043, пост-форма, пост-редактор, ВРС-кнопка-бар, ВРС-вход, проект сохраняемых, communitymode, ВРС-превью, FKEY, автор, представить-кнопку, шоу- редактор кнопка, боковая панель, qinfo, adzerk2, бюллетень-объявление, бюллетень-ад-заголовок, бюллетень-регистрация-контейнер, бюллетень-регистрация, рассылка предпросмотр-контейнер, бюллетень предварительный просмотр, ч связанных, корм-ссылка, запитка ссылка-текст, приукрасить-Ланг, сноска, сноска меню, футер-сайты, сноска-чутье, svnrev, авторские права"

Ответ 7

Прежде всего, я настоятельно рекомендую jQuery. Это значительно упростило мою разработку JavaScript. (См. Ответ RichieHindle)

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

Наконец, код:

var elementList = document.getElementsByTagName("*");
var idList = [];
for (var i in elementList) {
  if (elementList[i].id != "") {
    idList.push(elementList[i].id);
  }
}
// Do something with your array of ids