Оглавление

17.12. Работа с элементами документа.

Изменение URL-адреса и текста ссылки. Преобразование ссылки в обычный текст


Как видно из листинга 59, мы можем обращаться к атрибутам стиля любого тега напрямую. В этом листинге мы присвоили атрибуту text Align (в CSS text-align)значение "center":

   tagsH1[i].style.textAlign = "center";

Аналогичным способом можно изменить адрес гиперссылки:

   <a href="doc1.html" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!--
     document.getElementById("link1").href = "doc2.html";
   //-->
   </script>

Или изменить адрес изображения:

   <img src="image1.gif" id="image1">
   <script type="text/javascript">
   <!--
     document.getElementById("image1").src = "image2.gif";
   //-->
   </script>

Или присвоить элементу другой стилевой класс:

   <a href="doc1.html" class="i1" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!--
     document.getElementById("link1").className = "i2";
   //-->
   </script>


Какие параметры имеет тот или иной тег, и какие значения он может принимать, мы рассматривали при изучении языка HTML .


С параметрами тегов можно работать также с помощью встроенных методов. Получить значение параметра тега можно с помощью метода getAttribute(), присвоить новое значение параметру можно с помощью метода setAttribute(), удалить конкретный параметр можно с помощью метода removeAttribute(), а удалить все параметры можно с помощью метода clearAttributes().

 

Если с помощью параметров тега <а> можно управлять внешним видом ссылки, то с помощью общих свойств можно изменить сам текст ссылки:

   <a href="doc1.html" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!--
     document.getElementById("link1").innerHTML = "Новый текст ссылки";
   //-->
   </script>


Более того, мы можем преобразовать гиперссылку в обычный абзац:

   <a href="doc1.html" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!-- // В Firefox/3.5.1 не работает
     document.getElementById("link1").outerHTML = "<p>Новый абзац</p>";
   //-->
   </script>


Или добавить что-либо перед, после или внутри тега:

   <a href="doc1.html" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!-- // В Firefox/3.5.1 не работает
     var l1 = document.getElementById("link1");
     l1.insertAdjacentHTML("BeforeBegin", 
     "<span style='color: red'>Перед ссылкой</span> ");
     l1.insertAdjacentHTML("AfterBegin", "Перед началом текста ссылки ");
     l1.insertAdjacentHTML("BeforeEnd", " После текста ссылки");
     l1.insertAdjacentHTML("AfterEnd", " После ссылки");
   //-->
   </script>


В последнем случае есть небольшой нюанс. Если мы захотим заключить текст ссылки в какой-нибудь парный тег, например тег <span>, то получим не тот результат, что планировался. Рассмотрим такой код:

   <a href="doc1.html" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!-- // В Firefox/3.5.1 не работает
     var l1 = document.getElementById("link1");
     l1.insertAdjacentHTML("AfterBegin", 
     "<span style='color: red'>Перед началом текста ссылки ");
     l1.insertAdjacentHTML("BeforeEnd", " После текста ссылки</span>");
   //-->
   </script>

Вместо 

   <a href="doc1.html" id="linkl">

   <span style='color: red'>

    Перед началом текста ссылки Текст ссылки После текста ссылки 

   </span> 

   </a>

мы получим нечто подобное:

   <a href="doc1.html" id="linkl">

   <span style='color: red'>

    Перед началом текста ссылки  

   </span>Текст ссылки После текста ссылки

   </a>


Иными словами, все открывающие теги в дополняющем фрагменте будут автоматически закрыты, а непарные закрывающие — просто удалены. Поэтому в данном случае следует воспользоваться свойством innerHTML:

   <a href="doc1.html" id="link1">Текст ссылки</a>
   <script type="text/javascript">
   <!--
   var l1 = document.getElementById("link1");
   l1.innerHTML = "<span style='color: red'>" + l1.innerHTML + "</span>";
   //-->
   </script>


Необходимо заметить, что все свойства, которые мы использовали в этом разделе для изменения документа, не входят в стандарт DOM и поддерживаются только Web-браузерами Internet Explorer и Opera. Исключением является свойство innerHTML. Оно не входит в стандарт, но поддерживается практически всеми современными Web-браузерами.
Стандарт DOM предоставляет следующие свойства для получения информации об узле и передвижения по дереву HTML-документа:
□  nodeType — тип узла. Может принимать следующие значения:
          •   1----ELEMENT_NODE — тег;
          •   3 — TEXT_NODE — простой текст;
          •   8 — COMMENT_NODE — комментарий;
          •   9 — DOCUMENT_NODE — HTML-документ.
□ nodeName — имя узла. Например, название тега для узла ELEMENT_NODE;
□ nodevalue — значение узла.  Например, текст для узлов TEXT_NODE и COMMENT_NODE;
□ chiidNodes — массив всех дочерних узлов;
□ firstchild — первый дочерний узел или значение null, если такого узла нет;

□ lastchild — последний дочерний узел или значение null, если узла нет;
□ parentNode — родительский узел или значение null, если такого узла нет;
□ previoussibiing— узел,  непосредственно  следующий  перед данным узлом или значение null, если такого узла нет;
□ nextsibiing— узел, непосредственно следующий после данного узла или значение null, если такого узла нет;
□ attributes возвращает массив всех параметров тега. Каждый элемент массива содержит два свойства:
          •     name — название параметра;
          •     value — значение параметра.

 

Выведем все параметры и их значения для первой ссылки в HTML-документе:

   var attr = document.getElementsByTagName("a")[0].attributes;
   var msg = "";
   for (var i=0, len=attr.length; i<len; i++) {
      msg += "Параметр: " + attr[i].name + "\n";
      msg += "Значение: " + attr[i].value + "\n";
   }
   window.alert(msg);


Создать новый узел и добавить его в HTML-документ позволяют следующие методы:
□ createElement(<Название тега>) создает новый узел ELEMENT_NODE;
□ createTextNode(<текст>) создает новый узел TEXT_NODE;
□ appendChiid(<Новый узел>) добавляет новый узел в конец данного узла. Если узел уже находится в документе, то удаляет его и вставляет в новое место. В качестве примера создадим абзац со ссылкой и добавим его в конец документа:

   var p = document.createElement("p"); // Создаем абзац
   var text = document.createTextNode("Это текст абзаца ");
   p.appendChild(text); // Добавляем текст в абзац
   var link = document.createElement("a"); // Создаем ссылку
   link.href = "test.html"; // Задаем URL-адрес ссылки
   var link_text = document.createTextNode("Это текст ссылки");
   link.appendChild(link_text); // Добавляем текст в ссылку
   p.appendChild(link); // Добавляет ссылку в конец абзаца
   // Добавляем новый узел в конец документа
   document.body.appendChild(p);

□ insertBefore(<Новый узел>, <Узел>) добавляет новый узел перед указанным узлом. Если узел уже находится в документе, то удаляет его и вставляет в новое место. Если в качестве второго параметра указать значение null, то узел будет добавлен в конец данного узла:

   var p = document.getElementsByTagName("p")[0];
   // Перемещаем первый абзац в конец документа
   document.body.insertBefore(p, null);

 

Вставим новый абзац в начало документа:

   var p = document.createElement("p"); // Создаем абзац
   var text = document.createTextNode("Это текст абзаца ");
   p.appendChild(text); // Добавляем текст в абзац
   // Добавляем новый узел в начало документа
   document.body.insertBefore(p, document.body.firstChild);

 

□ cloneNode(true|false) создает копию узла. Если в качестве параметра указано значение true, то будут скопированы все потомки данного узла. Обратите внимание на то, что обработчики событий не копируются. Сделаем полную копию абзаца и добавим новый узел в конец документа:

   var p = document.getElementsByTagName("p")[0].cloneNode(true);
   // Добавляем в конец документа
   document.body.appendChild(p);

□ hasChiidNodes() возвращает значение true, если узел имеет дочерние узлы или false — в противном случае. Пример:

   var p = document.getElementsByTagName("p")[0];
   if (p.hasChildNodes()) window.alert("Есть");
   else window.alert("Дочерних узлов нет");

□ removeChild(<Удaляeмый узел>) удаляет узел. В качестве примера удалим первый абзац:

   var p = document.getElementsByTagName("p")[0];
   p.parentNode.removeChild(p);

□ replaceChild(<Новый узел>, <Старый узел>) заменяет узел другим узлом. Заменим первый тег <div> на новый абзац:

var p = document.createElement("p"); // Создаем абзац
var text = document.createTextNode("Это текст абзаца");
p.appendChild(text); // Добавляем текст в абзац
var div = document.getElementsByTagName("div")[0];
div.parentNode.replaceChild(p, div);


Для получения информации об элементах таблицы предназначены специальные свойства:
□ caption — ссылка на элемент caption или значение null, если он не существует;
□ tHead — ссылка на элемент thead или значение null, если он не существует;
□ tFoot — ссылка на элемент tfoot или значение null, если он не существует;
□ tBodies — массив всех элементов tbody в таблице;
□ rows — массив всех строк в таблице или секции tbody при использовании свойства tBodies. Каждый элемент массива содержит следующие свойства:
          •  cells— массив всех ячеек в строке таблицы. Каждый элемент массива содержит свойство

             ceiiindex, через которое доступен индекс ячейки в строке;

          •  rowindex — индекс строки в таолице;
          •  sectionRowindex— индекс строки внутри раздела (thead, tbody или tfoot).

 

Для создания и удаления элементов таблицы предназначены следующие методы:
□ createCaption() создает новый элемент caption или возвращает ссылку на существующий элемент. Добавим заголовок к таблице:

   var d;
   d = document.getElementsByTagName("table")[0].createCaption();
   var text = document.createTextNode("Это заголовок таблицы");
   d.appendChild(text); // Добавляем текст в элемент CAPTION

□ deietecaption() удаляет элемент caption;
□ createTHead() создает новый элемент thead или возвращает ссылку на существующий элемент;
□ deieteTHead() удаляет элемент thead;
□ createTFoot() создает новый элемент tfoot или возвращает ссылку на существующий элемент;

□ deieteTFoot() удаляет элемент tfoot;
□ deieteRow(<Индекс>) удаляет строку из таблицы по указанному индексу;
□ insertRow(<Индекс>)вставляет новый пустой элемент tr в указанную позицию;
□ insertCell (<Индекс>) вставляет пустой элемент td. Добавим новый ряд в самое начало первой таблицы в HTML-документе:

   var r;
   r = document.getElementsByTagName("table")[0].insertRow(0);
   var cell1 = r.insertCell(0);
   var cell2 = r.insertCell(1);
   var t1 = document.createTextNode("Первая ячейка");
   var t2 = document.createTextNode("Вторая ячейка");
   cell1.appendChild(t1);
   cell2.appendChild(t2);

□ deleteCell(<Индекс>) удаляет указанную ячейку.

 

В качестве примера создадим таблицу с заголовком:

   var table = document.createElement("table");
   table.border = 1; // Отображаем рамку
   table.width = 300; // Ширина таблицы
   var caption = table.createCaption();
   var txt = document.createTextNode("Это заголовок таблицы");
   caption.appendChild(txt); // Добавляем текст в элемент CAPTION
   var row1 = table.insertRow(0); // Вставляем первую строку
   var row2 = table.insertRow(1); // Вставляем первую строку
   var cell1_1 = row1.insertCell(0); // Вставляем ячейку
   var cell1_2 = row1.insertCell(1); // Вставляем ячейку
   var cell2_1 = row2.insertCell(0); // Вставляем ячейку
   var cell2_2 = row2.insertCell(1); // Вставляем ячейку
   txt = document.createTextNode("1");
   cell1_1.appendChild(txt); // Вставляем текст в ячейку
   txt = document.createTextNode("2");
   cell1_2.appendChild(txt); // Вставляем текст в ячейку
   txt = document.createTextNode("3");
   cell2_1.appendChild(txt); // Вставляем текст в ячейку
   txt = document.createTextNode("4");
   cell2_2.appendChild(txt); // Вставляем текст в ячейку
   // Вставляем таблицу в конец документа
   document.body.appendChild(table);
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити