ТОР 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> Не нашли, что искали? Воспользуйтесь поиском:
|