Свойство innerHTML

Хотя консорциум W3C никогда официально не определял свойство innerHTML как составную часть модели DOM, тем не менее это свойство узлов HTMLElement явля_ ется настолько важным, что поддерживается всеми современными броузерами. При чтении из этого свойства вы в формате HTML получаете текст, который представляет дочерние узлы элемента. При записи в это свойство броузер запус_ кает синтаксический анализатор HTML_кода для разбора строки и замещает до_ черние элементы теми, которые были получены от анализатора.

Описывать HTML_документ в виде строки с текстом в формате HTML обычно удобнее и проще, чем использовать для этих же целей последовательность вызо_ вов createElement() и appendChild(). Снова вернемся к той части примера 15.9, где создается новый элемент <table> и затем к нему добавляется строка заголовка. Благодаря свойству innerHTML этот относительно крупный фрагмент программно_ го кода можно переписать следующим образом:

var table =	document.createElement("table"); //	Создать элемент <table>
table.border = 1;	//	Установить атрибут
// Добавить	в таблицу заголовок Имя\|Тип\|Значение
table.innerHTML =	"<tr><th>Имя</th><th>Тип</th><th>Значение</th></tr>";

Веб_броузеры по определению прекрасно справляются с анализом HTML_кода. Оказывается, что использование свойства innerHTML гораздо эффективнее, осо_ бенно при анализе больших фрагментов HTML_текста. Однако следует отметить, что операция добавления небольших фрагментов текста в свойство innerHTML с помощью оператора += обычно не отличается эффективностью, поскольку тре_ бует как сериализации, так и синтаксического анализа.

Свойство innerHML было введено компанией Microsoft в IE 4. Оно входит в квартет наиболее важных и часто используемых свойств. Остальные три свойства, outer_ HTML, innerText и outerText, описанные в конце этой главы, не поддерживаются в Firefox и родственных броузерах.

Пример: динамическое создание оглавления

В предыдущих разделах было продемонстрировано, как использовать модуль Core модели DOM API для обхода документа, выборки элементов из документа, изме_

352 Глава 15. Работа с документами

нения и добавления содержимого документа. Все эти операции собраны воедино в примере 15.11, который автоматически создает оглавление HTML_документа.

В программном коде примера определяется единственный метод maketoc() и ре_ гистрируется обработчик события onload, благодаря чему функция вызывается автоматически после загрузки документа. Метод maketoc() обходит документ в поисках тегов <h1>, <h2>, <h3>, <h4>, <h5> и <h6>, которые, как предполагается, отмечают начало разделов документа. Кроме того, метод maketoc() отыскивает элемент со значением атрибута id="toc" и строит оглавление внутри этого эле_ мента. В ходе этого процесса метод maketoc() добавляет номера разделов в заго_ ловки этих разделов, вставляет именованные якорные элементы и затем встав_ ляет в начало каждого раздела ссылку обратно на оглавление. Оглавление, гене_ рируемое функцией maketoc(), показано на рис. 15.5.

Функция maketoc() может представлять интерес для тех, кто сопровождает и ис_ правляет длинные документы, разбитые на разделы с помощью тегов <h1>, <h2> и им подобных. Оглавления очень полезны в длинных документах, но если доку_ мент редактируется часто, то бывает сложно обеспечивать синхронизацию ог_ лавления с самим документом. Программный код примера 15.11 написан в не_ навязчивом стиле: чтобы воспользоваться им, достаточно просто включить мо_ дуль в HTML_документ и создать контейнерный элемент для метода maketoc(), который и создаст оглавление документа. При желании можно с помощью CSS_ таблицы определить стиль оглавления. Вот пример:

Рис. 15.5. Динамически созданное оглавление

15.9. Пример: динамическое создание оглавления

#toc {/* Следующие стили применяются к контейнерному элементу с оглавлением */

background: #ddd;	/* фон светло_серого	цвета */
border: solid black 1px;	/* простейшая рамка */
margin: 10px; padding: 10px; /* отступы */
}
.TOCEntry { font_family: sans_serif; }	/* Пункты выводить шрифтом sans_serif */
.TOCEntry a { text_decoration: none; }	/* Ссылки не подчеркивать */
.TOCLevel1 { font_size: 16pt; font_weight: bold; } /*	Пункты первого уровня */
		/*	крупным жирным шрифтом */

.TOCLevel2 { font_size: 12pt; margin_left: .5in; } /* Пункты второго уровня с отступом */

.TOCLevel3 { font_size: 12pt; margin_left: 1in; } /* Пункты третьего уровня */ /* с отступом */

.TOCBackLink { display: block; } /* Обратные ссылки в той же строке */

.TOCSectNum:after { content: ":"; } /* Добавлять двоеточие после номера раздела */ </style>

<body>

<div id="toc"><h1>Оглавление</h1></div> <!__ здесь находится оглавление __> <!__

... здесь находится остальная часть документа ...

__>

Далее следует программный код модуля TOC.js. Пример 15.11 достаточно длин_ ный, но хорошо прокомментирован и основан на уже знакомых вам приемах. Он заслуживает изучения как практический пример возможностей W3C DOM.

Пример 15.11. Автоматическая генерация оглавления

/**

* TOC.js: создает оглавление документа.

* В этом модуле определяется единственная функция maketoc(), также он

* регистрирует обработчик события onload, благодаря чему функция

* запускается автоматически сразу же после загрузки документа

* После запуска функция maketoc() сначала просматривает документ в поисках

* элемента со значением атрибута id="toc". Если такой элемент в документе

* отсутствует, maketoc() ничего не делает. Если такой элемент обнаруживается,

* maketoc() обходит документ, отыскивает все теги от <h1> до <h6>

* и создает оглавление, которое затем добавляется в элемент "toc".

* Функция maketoc() добавляет номера разделов к каждому заголовку каждого

* раздела и вставляет перед каждым заголовком обратные ссылки на оглавление

* Ссылки и якорные элементы с именами, начинающимися с префикса "TOC",

* создаются функцией maketoc(), т.е. следует избегать

* использования данного префикса в своих HTML_документах.

* Формат вывода пунктов оглавления может настраиваться с помощью CSS.

* Все записи принадлежат к классу "TOCEntry". Кроме того, записи также

* принадлежат классу, имя которого соответствует уровню заголовка раздела.

* Для тегов <h1> генерируются пункты с классом "TOCLevel1",

* Для тегов <h2> – пункты с классом "TOCLevel2", и т.д.

* Номера разделов вставляются в заголовки, принадлежащие классу "TOCSectNum",

* а обратные ссылки на оглавление генерируются для заголовков,

* принадлежащих классу "TOCBackLink".

354 Глава 15. Работа с документами

* По умолчанию сгенерированные обратные ссылки содержат текст "Contents".

* Чтобы изменить этот текст (например, с целью интернационализации),

* следует записать его в свойство maketoc.backlinkText.

**/

function maketoc() {

// Найти контейнер. В случае отсутствия такового просто завершить работу. var container = document.getElementById('toc');

if (!container) return;

// Обойти документ, добавить в массив все теги <h1>...<h6>

var sections = []; findSections(document, sections);

// Вставить якорный элемент перед контйнером, чтобы можно было

// создавать обратные ссылки на него

var anchor = document.createElement("a");	// Создать узел <a>
anchor.name	= "TOCtop";	//	Установить атрибуты
anchor.id =	"TOCtop";	//	name и id (для IE)
container.parentNode.insertBefore(anchor,	container); // Вставить перед оглавлением

// Инициализировать массив для отслеживания номеров разделов var sectionNumbers = [0,0,0,0,0,0];

// Обойти в цикле все найденные заголовки разделов

for(var s = 0; s < sections.length; s++) { var section = sections[s];

// Определить уровень заголовка

var level = parseInt(section.tagName.charAt(1));

if (isNaN(level) || level < 1 || level > 6) continue;

// Увеличить номер раздела для данного уровня

// и сбросить в ноль номера всех нижележащих подуровней sectionNumbers[level_1]++;

for(var i = level; i < 6; i++) sectionNumbers[i] = 0;

// Собрать номер раздела для данного уровня,

// чтобы создать такой номер, как, например, 2.3.1 var sectionNumber = "";

for(i = 0; i < level; i++) { sectionNumber += sectionNumbers[i];

if (i < level_1) sectionNumber += ".";

}

// Добавить номер и пробел в заголовок.

// Номер помещается в тег <span>, чтобы можно было влиять на формат вывода. var frag = document.createDocumentFragment(); // Для хранения номера и пробела

var span = document.createElement("span");	//	Узел span	номера сделать
span.className = "TOCSectNum";	//	доступным	для форматирования
span.appendChild(document.createTextNode(sectionNumber)); //	Добавить номер
frag.appendChild(span);	// Добавить тег с	номером во фрагмент
	frag.appendChild(document.createTextNode(" ")); //	Добавить пробел
	section.insertBefore(frag, section.firstChild); //	Добавить все в заголовок
	// Создать	якорный элемент, который будет отмечать	начало раздела.
	var anchor	= document.createElement("a");
	anchor.name = "TOC"+sectionNumber;	// Имя элемента, на которое будет ссылка

15.9. Пример: динамическое создание оглавления

anchor.id = "TOC"+sectionNumber; // В IE для генерации ссылок

// необходимо определить атрибут id

// Обернуть якорным элементом обратную ссылку на оглавление var link = document.createElement("a");

link.href = "#TOCtop"; link.className = "TOCBackLink";

link.appendChild(document.createTextNode(maketoc.backlinkText));

anchor.appendChild(link);

// Вставить якорный элемент и ссылку непосредственно перед заголовком раздела section.parentNode.insertBefore(anchor, section);

// Создать ссылку на этот раздел.

var link = document.createElement("a");

link.href = "#TOC" + sectionNumber; // Определить адрес ссылки

link.innerHTML = section.innerHTML; // записать текст заголовка в текст ссылки

// Поместить ссылку в элемент div, чтобы получить возможность влиять

// на формат отображения на основе уровня заголовка

var entry = document.createElement("div"); entry.className = "TOCEntry TOCLevel" + level; // Для CSS entry.appendChild(link);

// И добавить элемент div в контейнер с оглавлением container.appendChild(entry);

}

// Этот метод обходит дерево элементов с корнем в элементе n,

// отыскивает теги с <h1> по <h6> и добавляет их в массив разделов. function findSections(n, sects) {

// Обойти все дочерние узлы элемента n

for(var m = n.firstChild; m != null; m = m.nextSibling) { // Пропустить узлы, которые не являются элементами.

if (m.nodeType != 1 /* Node.Element_NODE */) continue;

// Пропустить контейнерный элемент, поскольку он может иметь свой заголовок if (m == container) continue;

// С целью оптимизации пропустить теги <p>, поскольку

// предполагается, что заголовки не могут появляться внутри

// абзацев. (Кроме того, можно было бы пропустить списки,

// теги <pre> и прочие, но тег <p> _ самый распространенный.)

if (m.tagName == "P") continue; // Оптимизация

// Узел не был пропущен _ проверить, не является ли он заголовком.

// Если это заголовок, добавить его в массив. Иначе просмотреть

// рекурсивно содержимое узла.

// Обратите внимание: модель DOM основана на интерфейсах,

// а не на классах, потому нельзя выполнить проверку

// на принадлежность (m instanceof HTMLHeadingElement).

if (m.tagName.length==2 && m.tagName.charAt(0)=="H") sects.push(m);

else

findSections(m, sects);

}

// Это текст по умолчанию для обратных ссылок на оглавление

	Глава 15. Работа с документами

maketoc.backlinkText = "Contents";
// Зарегистрировать функцию maketoc() как обработчик события	onload
if (window.addEventListener) window.addEventListener("load",	maketoc, false);

else if (window.attachEvent) window.attachEvent("onload", maketoc);