заявление! ! , эта статья является перепечаткой чужой статьи, потому что она использовалась и показалась очень практичной, поэтому я взял ее для использования в будущем! !
Спасибо оригинальному автору! ! ! ,
При разработке веб-приложений, особенно программ Web 2.0, часто необходимо получить элемент на странице, а затем обновить стиль, содержимое и т. д. элемента. Как получить обновляемые элементы — это первая проблема, которую необходимо решить. К счастью, существует множество способов получения узлов с помощью JavaScript. Вот краткое описание (следующий метод был протестирован в IE7 и Firefox2.0.0.11):
1. Получить через узел документа верхнего уровня:
(1) document.getElementById(elementId): этот метод позволяет точно получить требуемый элемент по идентификатору узла. Это относительно простой и быстрый метод. Если страница содержит несколько узлов с одинаковым идентификатором, будет возвращен только первый узел.
В настоящее время существует множество библиотек JavaScript, таких как прототип и Mootools, которые предоставляют более простой метод: $(id), а параметром по-прежнему является идентификатор узла. Этот метод можно рассматривать как еще один способ написания document.getElementById(), но функция $() более мощная. Для конкретного использования обратитесь к соответствующим документам API.
(2) document.getElementsByName(elementName): этот метод получает узел по его имени. Как видно из названия, этот метод возвращает не элемент узла, а массив узлов с тем же именем. Затем мы можем просмотреть определенный атрибут узла, чтобы определить, является ли он требуемым узлом.
Например: в HTML флажок и переключатель используют одно и то же значение атрибута имени для идентификации элементов внутри группы. Если мы хотим получить выбранный элемент сейчас, мы сначала получаем перетасованный элемент, а затем выполняем цикл, чтобы определить, истинно ли значение проверенного атрибута узла.
(3) document.getElementsByTagName(tagName): этот метод получает узел через его тег. Этот метод также возвращает массив. Например: document.getElementsByTagName('A') вернет все узлы гиперссылок на странице. Перед получением узла тип узла обычно известен, поэтому использовать этот метод относительно просто. Но и недостаток очевиден, то есть возвращаемый массив может быть очень большим, что приведет к потере большого количества времени. Итак, бесполезен ли этот метод? Конечно, нет. Этот метод отличается от двух вышеперечисленных. Он не является собственным методом узла документа и может также применяться к другим узлам, о которых будет сказано ниже.
2. Получить через родительский узел:
(1)parentObj.firstChild: этот метод можно использовать, если узел является первым дочерним узлом известного узла (parentObj). Этот атрибут можно использовать рекурсивно, то есть он поддерживает формуparentObj.firstChild.firstChild.firstChild..., так что можно получить более глубокие узлы.
(2)parentObj.lastChild: Очевидно, этот атрибут предназначен для получения последнего дочернего узла известного узла (parentObj). Как и firstChild, его можно использовать рекурсивно.
При использовании, если мы объединим их, мы достигнем более интересных результатов, а именно: родительскийObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes: Получите массив дочерних узлов известного узла, а затем найдите нужный узел с помощью цикла или индексации.
Примечание. После тестирования было обнаружено, что в IE7 получается массив прямых дочерних узлов, а в Firefox2.0.0.11 — все дочерние узлы, включая дочерние узлы дочернего узла.
(4)parentObj.children: Получите прямой массив дочерних узлов известного узла.
Примечание. После тестирования в IE7 эффект тот же, что и у childNodes, но Firefox2.0.0.11 его не поддерживает. Вот почему я использую другой стиль, чем другие методы. Поэтому его использование не рекомендуется.
(5)parentObj.getElementsByTagName(tagName): метод использования не будет подробно описываться. Он возвращает массив дочерних узлов указанного значения среди всех дочерних узлов известного узла. Например: родительскийObj.getElementsByTagName('A') возвращает все гиперссылки в известных дочерних узлах.
3. Получить от соседних узлов:
(1) NeighbourNode.previousSibling: получение предыдущего узла известного узла (neighbourNode). Похоже, этот атрибут используется рекурсивно, как и предыдущие firstChild и LastChild.
(2) NeighbourNode.nextSibling: получение следующего узла известного узла (neighbourNode), также поддерживается рекурсия.
4. Получить через дочерние узлы:
(1) childNode.parentNode: получить родительский узел известного узла.
Упомянутые выше методы — это лишь некоторые базовые методы. Если вы используете библиотеки JavaScript, такие как Prototype, вы также можете использовать другие методы, например получение через класс узла и т. д. Однако, если вы сможете гибко использовать различные описанные выше методы, я считаю, что вы сможете справиться с большинством программ.
Обратите внимание, что это воспроизведенный документ: не рекомендуется получать узел HTML через firstChild и LastChild. Потому что, в зависимости от браузера, firstChild может возвращать объект атрибута ParentObj.