HTML DOM Свойства и Методы
Свойства и методы определяют интерфейс программирования HTML DOM.
Интерфейс Программирования
В объектной модели документа DOM документы HTML состоят из множества узловых объектов. Доступ к узлам может осуществляться посредством JavaScript или других языков программирования. В этих уроках мы будем использовать JavaScript.
Интерфейс программирования DOM определяется стандартными свойствами и методами.
На свойства часто ссылаются как на то, с чем необходимо что-либо сделать (например, название узла).
На методы часто ссылаются как на то, что необходимо сделать (например, удалить узел).
HTML DOM Свойства
Некоторые DOM свойства:
- x.innerHTML - текстовое значение x
- x.nodeName - название (имя) узла x
- x.nodeValue - значение x
- x.parentNode - родительский узел x
- x.childNodes - дочерние узлы x
- x.attributes - атрибутивные узлы x
Замечание: В списке выше x является узловым объектом (HTML элементом).
HTML DOM Методы
Некоторые DOM методы:
- x.getElementById(id) - получить элемент с указанным id
- x.getElementsByTagName(имя) - получить все элементы с указанным названием (именем) тега
- x.appendChild(узел) - вставить дочерний узел в x
- x.removeChild(узел) - удалить дочерний узел из x
Замечание: В списке выше x является узловым объектом (HTML элементом).
Свойство innerHTML
Простейший способ получить или изменить содержимое элемента - использование свойства innerHTML.
innerHTML не является частью W3C спецификации DOM. Однако, оно поддерживается всеми основными браузерами.
Свойство innerHTML полезно для получения или замены содержимого HTML элементов (включая <html> и <body>), также оно может использоваться для просмотра исходного кода страницы, которая была динамически изменена.
Пример
Следующий код получает innerHTML (текст) из элемента <p> с id="intro":
Пример
<html>
<body>
<p id="intro">Привет Мир!</p>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>Текст из параграфа intro: " + txt + "</p>");
</script>
</body>
</html> |
Попробуйте сами »
|
В примере выше getElementById является методом, тогда как innerHTML - это свойство.
Свойства childNodes и nodeValue
Мы также можем использовать свойства childNodes и nodeValue для получения содержимого элемента.
Следующий код получает содержимое элемента <p> с id="intro":
Пример
<html>
<body>
<p id="intro">Примет Мир!</p>
<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>Текст из параграфа intro: " + txt + "</p>");
</script>
</body>
</html> |
Попробуйте сами »
|
В примере выше getElementById является методом, а childNodes и nodeValue - это свойства.
В этих уроках мы в основном будем использовать свойство innerHTML. Тем не менее, рассмотрение метода выше полезно для понимания древовидной структуры DOM и обращения с XML файлами.
|
