1.GetElementsByName (): получить имя.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример:
<p name = "pn"> hello </p> <p name = "pn"> hello </p> <p name = "pn"> hello </p> <script> function getName () {var count = document.getElementsbyname ("pn"); предупреждение (count.length); var p = count [2]; p.innerhtml = "мир"; } </script>Результаты: Интерфейс распечатывает три Helloes, сопровождаемое подсказкой «3». При нажатии на OK, контент, отображаемый на интерфейсе, становится Hello Hello World
~ ~
2. DetelementsBytagName (): получить элемент.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример
<p> hello </p> <p> hello </p> <p> hello </p> <script> function getName () {var count = document.getElementsbytagname ("p"); предупреждение (count.length); var p = count [2]; p.innerhtml = "мир"; } </script>Результаты: Интерфейс распечатывает три Helloes, сопровождаемое подсказкой «3». При нажатии на OK, контент, отображаемый на интерфейсе, становится Hello Hello World
~~~~~~~~~~~~ ~
3.GetAtTribute (): Получить атрибуты элемента.
~~~~~~~~~~~ ~
пример
<a id = "AID"> </a> <script> function getAttr1 () {var anode = document.getElementbyId ("apid"); var attr = anode.getattribute ("id"); Alert ("a id:"+attr); } function getAttr2 () {var anode = document.getElementById ("apid"); var attr = anode.getattribute ("title"); Alert («Содержание заголовка A:»+attr); } getAttr1 (); getAttr2 (); </script>РЕЗУЛЬТАТ: РАЗВЛЕЧЕНИЕ ПОКАЗАТЕЛЬСТВО «Идентификатор А: Помощь». После нажатия OK, поле «Содержание заголовка A»: Получите атрибут тега A ».
~~~~~~~~~~~~ ~
4.setattribute () Устанавливает атрибуты элемента.
~ ~
пример
<a id = "apid2"> aid2 </a> <script> function setattr () {var anode = document.getElementById ("aid2"); anode.setattribute ("title", "Динамическая настройка атрибута заголовка"); var attr = anode.getattribute ("title"); Alert («Динамический настройка значения заголовка -:»+attr); } setAttr (); </script>Результат: поле «Динамическая настройка».
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
5. Childnodes (): доступ к детским узлам.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> <cript> function getChildNode () {var childnode = document.getElementsbytagname ("ul") [0] .ChildNodes; Alert (Childnode.length); оповещение (ChildNode [0] .NodeType); } getChildNode (); </script>Результат: интерфейс распечатывает диалоговое окно «3» появляется на .1.2.3, а затем нажимайте OK, чтобы всплыть.
~~~~~~~~~~ ~
6.parentnode (): доступ к родительскому узлу.
~~~~~~~~~~~ ~
пример
<div> <p id = "pid"> </p> </div> <script> function getParentNode () {var div = document.getElementByid ("pid"); Alert (div.parentnode.nodeName); } getParentNode (); </script>Результат: выскакивает коробку с приглашением: Div.
~~~~~~~~~~~ ~
7. CreateElement (): Создайте элемент узла.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример:
<script> function createNode () {var body = document.body; var input = document.createElement ("input"); input.type = "кнопка"; input.value = "Кнопка"; body.appendchild (input); // вставить узел} createNode (); </script>Результат: появляется кнопка.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8. CreateTextNode (): создать текстовый узел.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример:
<script> function createNode () {var element = document.createElement ("div"); element.classname = "Сообщение"; var textNode = document.createTextNode («Привет, мир!»); element.AppendChild (TextNode); document.body.appendchild (element); } createNode (); </script>Анализ кода: этот пример создает новый элемент <div> и определяет атрибут класса со значением «сообщения». Затем создается еще один текстовый узел и добавлен в элемент, созданный ранее. Последний шаг - добавить этот элемент в элемент <body> в документе, чтобы вы могли увидеть недавно созданные элементы и текстовые узлы в браузере.
Результат: на странице показывает Hello World.
~~~~~~~~~~~~ ~
9.insertbefore (): вставьте узел.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример
<div id = "div"> <p id = "pid"> p element </p> </div> <script> function addNode () {var div = document.getElementById ("div"); var node = document.getElementbyId ("pid"); var newnode = document.createElement ("p"); newnode.innerhtml = "Динамическая вставка элемента p"; div.insertbefore (newnode, node); } addNode (); </script>Результат: интерфейс распечатывает: динамически вставьте элемент P
P Элемент
~ ~
10. RemoveChild (): удалить узел.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример
<div id = "div"> <p id = "pid"> p element </p> </div> <script> function removenode () {var div = document.getElementById ("div"); var p = div.removechild (div.childnodes [1]); } removenode (); </script>Результат: интерфейс ничего не показывает.
~~~~~~~~~~~~ ~
11. Offsetheight: размер веб -страницы
12.scrollheight: размер веб -страницы
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
пример:
<Script> function getSize () {var width = document.documentelement.offsetwidth || document.body.offsetwidth; // Решайте проблемы совместимости var height = document.documentelement.OffsetHeight || document.Body.OffSetheight; предупреждение (ширина+","+высота); } getSize (); </script>Покажите результаты:
Эта статья в основном вводит JS DOM для управления элементами HTML. Содержание статьи в основном включает в себя DOM, HTML и т. Д. Статья поступает из Интернета, пожалуйста, обратитесь к ней.