Для начала рассмотрим свойства innerHTML, outerHTML, innerText и outerText и методы insertAdjacentHTML и insertAdjacentText.
Предположим, что мы имеем элемент HTML, код которого представлен ниже:
<p id=”par1”> Это элемент <b> 1 </b> </p>
Четыре вышеописанных свойства вернуть следующие значения:
• innerHTML – вернёт « Это элемент "<b> 1 </b>" »
• outerHTML – вернёт « <p id=”par1”> Это элемент <b> 1 </b> </p> »
• innerText и outerText - вернёт « Это элемент 1 »
Как можно видеть свойства inner*** затрагивают только содержимое текущего элемента, а outer *** - ещё и теги самого элемента. Свойства innerText и outerText вернули нам текст элемента без тегов HTML, а outerHTML и innerHTML - вместе с ними.
Теперь присвоим этим четырём свойствам одно и то же значение
«А это элемент <I>2</I>». Посмотрим, что получится.
Document.all(“par1”).innerHTML=”А это элемент <I> 2 </I>” ;
в результате получим новый тег
<P Id=”par1”> А это элемент <I>2</i></p>
Предыдущее содержимое элемента было без всяких сюрпризов заменено на новое.
Document.all(“par1”).outerHTML=”А это элемент <I> 2 </I>” ;
в результате получим новый тег
А это элемент <I>2</i>
Здесь появился новый текст, не заключённый ни в какой элемент страницы. Это значит, что элемент с именем par1 исчез из станицы, и все последующие попытки обратиться к нему из других скриптов, обречены на провал (будет возвращено null).
Document.all(“par1”).innerText=”А это элемент <I> 2 </I>” ;
в результате получим новый тег
<p id= “par1”> А это элемент <I>2</I> </p>
Так будет отображён элемент в этом случае. То есть, если даже и присвоить свойству innerText и (outerText) какой-то HTML-код, он не будет обработан и отобразиться Web-обозревателем как текст.
Document.all(“par1”).outerText=”А это элемент <I> 2 </I>” ;
в результате получим новый тег
А это элемент < I> 2< /I>"
Как видим исчез и сам элемент par1.
Заметим, что при изменении значений свойств innerHTML и outerHTML Web-обозреватель может скорректировать мелкие ошибки во вновь добавляемом HTML-коде. Так обозреватель добавит закрывающие теги, если они были пропущены.
Теперь рассмотрим методы insertAdjacentHTML и insertAdjacentText. Для демонстрации их работы вставим в наш элемент новый текст <big> I </big> с разными значениями параметра местоположения.
document.all("par1").insertAdjacentHTML("BeforeBegin","<big>I</Big>");
в результате получим новый тег
<big>I</big><p id= “par1”> Это элемент <b>1</b></p>
document.all("par1").insertAdjacentHTML("AfterBegin","<big>I</Big>");
в результате получим новый тег
<p id= “par1”><big>I</big> Это элемент <b>1</b></p>
document.all("par1").insertAdjacentHTML(“BeforeEnd”,"<big>I</Big>");
в результате получим новый тег
<p id= “par1”>Это элемент <b>1</b><big>I</big> </p>
document.all("par1").insertAdjacentHTML(“AfterEnd”,"<big>I</Big>");
в результате получим новый тег
<p id= “par1”>Это элемент <b>1</b></p><big>I</big>
Данные примеры не представляют ничего сложного для понимания. Метод insertAdjacentText ведёт себя аналогично, за тем исключением, что игнорируется всякое HTML-форматирование подобно свойствам innerText и outerText. Я считаю, что рассматривать этот метод не имеет смысла.
Также могут понадобиться методы getAdjacentText и replaceAdjacentText. Первый метод возвращает текст, находящийся внутри элемента или рядом с ним, а второй позволяет заменить его на другой.
Теперь рассмотрим методы getAttribute, removeAttribute и setAttribute. Первый метод позволит получить значение какого-либо атрибута тега текущего элемента.
Например:
BodyColor=document.body.getAttribute(“BGCOLOR”,false);
Таким образом, в переменную BodyColor будет возвращено значение фонового цвета, т.е. значение атрибута bgColor объекта body, который является дочерним объектом объекта document. Второй параметр установлен в false; это значит, что поиск атрибута будет производиться без учёта регистра символов его имени.
Метод setAttribute в свою очередь позволит дать атрибуту новое значение.
Например:
Document.body.setAttribute(“BGCOLOR”, “red”, “false”);
Данный скрипт, установит значение атрибута bgColor объекта body (дочерний объект document) равным значению “red”. То есть фоновый цвет документа измениться на красный. Третий параметр равный false указывает, что поиск атрибута будет произведён без учёта регистра.
Немного остановимся на свойствах height и width. Дело в том, что их значения определены, если только они установлены с помощью соответствующих атрибутов тега.
Например:
<IMG SRC=”ris1.gif” height=100 width = “200”>
nHeight=document.image1. height;
Таким образом, в переменную nHeight будет возвращено значение 100 (т.е. соответствующее значение атрибута height объекта image1).
Если же высота и ширина элемента заданы через стиль, значения свойств height и width не определены.
<IMG SRC= “ris1.gif” style= “height: 100; width: 100”>
nHeight=document.image1. height; // не будет работать
Метод clearAttributes позволит сразу удалить все атрибуты тега элемента и, естественно, все их значения. Это может пригодиться, если мы хотим полностью изменить внешний вид какого-нибудь элемента.