Последовательное перемещение по DOM'у

@norge_goth · Регистрация: 27.01.2009

Студворк — интернет-сервис помощи студентам

Добрый день,
пытаюсь освоить последовательное перемещение по DOM'у, вот код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<p>Я обычный абзац.</p>
<p>Я еще один обычный абзац.</p>
<p id='zadanie1'>Выведите это содержимое на страницу</p>
<hr />
<b>
<script type='text/javascript'>
document.write(document.body.childNodes[0].childNodes[0].nodeValue);
</script>
</b>
</body>
</html>

Вопрос - почему я не получаю текст "Я обычный абзац."? ведь "Я обычный абзац." нулевой CHILD узла <body>

Vovan-VE · 08.11.2011, 16:25

У body нулевым child'ом идет текстовый узел с символом новой строки:

<body>«
»Я обычный абзац.

Если написать на одной строке, тогда должно быть уже лучше.

HTML5
1
<body><p>Я обычный абзац.</p>

@norge_goth · 08.11.2011, 16:42 **[ТС]**

Сообщение от Vovan-VE

У body нулевым child'ом идет текстовый узел с символом новой строки:

<body>«
»Я обычный абзац.

Если написать на одной строке, тогда должно быть уже лучше.

HTML5
1
<body><p>Я обычный абзац.</p>

одиночные разделители строк между тегами тоже считаются узлами?

@GuardCat · 08.11.2011, 16:48

У меня интересные результаты просмотра списка childNodes в разных браузерах.
Делал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<body>
    <p>Я обычный абзац.</p>
    <p>Я еще один обычный абзац.</p>
    <p id='zadanie1'>Выведите это содержимое на страницу</p>
<hr />
<script type='text/javascript'>
var x, nodes = document.body.childNodes, nl = nodes.length;
for (x = 0; x < nl; x++) {
    document.write(nodes[x].toString() + ": " + nodes[x].innerHTML + "<br>");
}
</script>
</body>
</html>

Результаты для Chrome и IExplore получились очень разными: Хром видит каждый пробел между тегами (перенос, пробел — неважно), как Text, а IExplore 8 игнорирует пробелы совсем. Смотрите вложения.

Vovan-VE · 08.11.2011, 17:29

Сообщение от GuardCat

а IExplore 8 игнорирует пробелы совсем

Добавьте правильный !doctype - сразу увидит (скорее всего).

@GuardCat · 08.11.2011, 17:52

Ни

HTML5
1
<!DOCTYPE HTML>

Ни

HTML5
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Не изменили результатов выдачи IExplore.

ещё один закидон MSIE, видимо.

Vovan-VE · 08.11.2011, 18:10

Сообщение от GuardCat

Не изменили результатов выдачи IExplore

Значит не судьба. Через firstChild и nextSibling в IE результат тот же.

@Vicont · 08.11.2011, 21:54

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

JavaScript
1
2
3
4
5
6
7
8
9
var nodes = document.body.childNodes;
var count_p= 0;
for (i=0; i<nodes.length; i++){
  if (nodes[i].nodeType == 1 && nodes[i].tagName == 'P'){
    count_p++;
    if (count_p == 3)
     alert(nodes[i].innerHTML)
  }
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Опции темы