Главная

Популярная публикация

Научная публикация

Случайная публикация

Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






Свойство элемента innerHTML и outerHTML




Кроме методов, описанных выше, для изменения структуры документа испоьзуется более простой метод, основанный на использовании свойств элементов DOM – innerHTML и outerHTML. innerHTML содержит HTML-код между открывающим и закрывающим тегом. С помощью этого свойства можно работать с кодом внутри тега, как со строкой – считывать и записывать. Однако для следующей группы элементов это свойство доступно только для чтения: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

По определению свойство innerHTML не существует у элементов, которые не имеют одновременно открывающего и закрывающего тега (например <br>).

Отличие свойства outerHTML в том, что это свойство включает в себя HTML-код между открывающим и закрывающим тегом, а также открывающий
и закрывающий тег этого элемента.

Для следующих элементов это свойство доступно только при чтении: CAPTION, COL, COLGROUP, FRAMESET, HTML, TBODY, TD, TFOOT, TH, THEAD, TR.

Свойство outerHTML доступно для записи только после того, как весь документ будет загружен, т.е. произойдет событие window.onload.

Ниже приведен пример использования свойств innerHTML и outerHTML:

<!-- пример # 9: использование свойств -->

<html><head>

<script type="text/javascript">

function transformBody() {

var myPar = document.getElementById("myP");

myP.innerHTML = "<i>Hello World!</i>";

myP.outerHTML = "<strong>" + myP.innerHTML

+ "</strong>";

}

</script>

</head>

<body onload="transformBody();">

<p id="myP">sample text</p>

</body>

</html>

<!-- после выполнения функции структура элемента body будет:

<BODY><STRONG><I>Hello World!</I></STRONG></BODY>

-->

Свойства innerHTML и outerHTML не являются официально поддерживаемыми стандартами, однако они поддерживаются всеми современными браузерами. Свойством outerHTML следует пользоваться с большой осторожностью, так как оно поддерживается в меньшем количестве браузеров (например, оно не работает в браузере Firefox).

Event Model

Event Model, или модель событий – это способность языка JavaScript реагировать на изменение состояния документа в браузере, например нажатие на ссылку или отправка заполненной формы.

Ниже приведены основные события, которые поддерживаются всеми современными браузерами:

onblur – происходит, когда пользователь убирает фокус с элемента, например элемента формы;

onchange – происходит, когда элемент формы теряет фокус, и его значение при этом изменилось;

onclick – происходит, когда пользователь нажимает на любой визуальный элемент;

ondblclick – аналогично предыдущему, но при двойном нажатии;

onfocus – происходит, когда элемент получает фокус, то есть пользователь выбирает этот элемент;

onkeydown – происходит, когда пользователь нажимает клавишу на клавиатуре;

onkeypress – происходит, когда пользователь нажимает и отпускает клавишу на клавиатуре;

onkeyup – происходит, когда пользователь отпускает нажатую клавишу;

onload – происходит, когда документ (или фрейм) загружен;

onmousedown – происходит, когда пользователь нажимает клавишу мыши;

onmousemove – происходит, когда пользователь двигает курсором мыши над элементом;

onmouseout – происходит, когда указатель мыши покидает область элемента;

onmouseover – происходит, когда указатель мыши попадает в область элемента;

onmouseup – происходит, когда пользователь отпускает нажатую клавишу мыши;

onreset – происходит, когда значения элементов формы сбрасываются;

onselect – происходит, когда пользователь выделяет текст в элементе формы;

onsubmit – происходит, когда пользователь отсылает форму;

onunload – происходит, когда пользователь покидает текущий документ, то есть закрывает браузер или переходит к другой странице.

События в HTML прописываются следующим способом:

<a href=”sample.html”

onclick=”alert(‘Links clicked’)”>click me</a>

<!-- пример # 10: получение типа броузера -->

<html> <head>

<title>Test of Browser name</title>

</head>

<body>

<h1 align=center>Проверка типа браузера</h1>

<hr>

Чтобы получить имя вашей программы просмотра, следует выбрать кнопку "Browser"

<P><hr><form name=fr>

<input type=button name=browser value=Browser

onClick="window.alert(window.navigator.appName)">

</form>

</body> </html>






Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных