С помощью предопределенных свойств и методов Вы можете производить различные манипуляции над DOM.
ТвитнутьДля каждого элемента на странице браузер создает в DOM элементный узел.
Каждый элементный узел имеет набор предопределенных свойств и методов. С помощью этих свойств и методов Вы можете производить различные манипуляции над содержимым элементных узлов объектной структуры.
С помощью свойства innerHTML Вы можете получить доступ к содержимому текстового узла DOM объекта.
Пример
function change(){
document.getElementById("par").innerHTML="Я изучаю HTML DOM на
<b>wisdomweb.ru</b>!";
}
function changeback(){
document.getElementById("par").innerHTML="Я изучаю JavaScript.";
}
С помощью свойства nodeName Вы можете узнать имя узла.
Пример
//Узнаем имя элемента с id=par и сохраним результат в переменную x
x=document.getElementById("par").nodeName;
//Выведим результат на страницу
document.write(x+"<br />");
//Узнаем имя элемента с id=header и сохраним результат в переменную y
y=document.getElementById("header").nodeName;
//Выведим результат на страницу
document.write(y);
С помощью свойства nodeValue Вы можете узнать значения узла.
Пример
//Узнаем значение свойства первого потомка элемента с id=par и сохраним результат в x
x=document.getElementById("par").childNodes[0].nodeValue;
//Выведим результат на страницу
document.write(x+"<br />");
С помощью свойства parentNode Вы можете обратиться к родительскому узлу элемента.
Пример
//Узнаем имя родительского узла элемента с id=par и сохраним результат в x
x=document.getElementById("par").parentNode.nodeName;
//Выведим результат на страницу
document.write(x+"<br />");
С помощью свойства childNodes Вы можете обратиться к узлам потомкам элемента.
Для того, чтобы обратиться к первому узлу потомку используйте childNodes[0], ко второму childNodes[1] и т.д.
Пример
//Узнаем свойство первого потомка элемента с id=par и запишем результат в x
x=document.getElementById("par").childNodes[0].nodeValue;
//Выведим результат на страницу
document.write(x+"<br />");
С помощью свойства attributes Вы можете обратиться к атрибутам узла.
Нумерация атрибутов идет в обратном порядке. Для того, чтобы обратиться к последнему атрибуту используйте attributes[0], к предпоследнему attributes[1] и т.д.
Пример
//Узнаем значение первого атрибута элемента и запишем результат в x
x=document.getElementById("ww").attributes[0].nodeValue;
//Выведим результат на страницу
document.write(x+"<br />");
С помощью свойства nodeType Вы можете узнать тип узла.
Элементный узел имеет тип 1, атрибутный узел имеет тип 2, текстовый узел имеет тип 3.
Пример
//Узнаем тип узла и запишем результат в x
x=document.getElementById("par").nodeType;
//Выведим результат на страницу
document.write(x+"<br />");
Обратите внимание: в данной главе были рассмотрены не все существующие DOM свойства узнать больше можно в нашем HTML DOM Справочнике.
Если при разборе страницы браузер встречает символ без тэгов, он создает для него в DOM текстовый узел.
При редактировании страницы новые тэги переносятся на новую строку, каждый такой перенос осуществляется с помощью символа перевода строки (нажатия клавиши enter). Так как символ перевода строки является символом без тэга, для него будет создан пустой текстовый узел.
Пример
/* Итак мы хотим вывести содержимое тэга p на страницу кажется, что код написан верно, но на страницу выведется undefined */ document.write(document.body.childNodes[0].innerHTML+"<br />"); /* Дело в том, что тэг p идущий после body был перенесен на новую строку. Соответственно первыйузел-потомок body - это текстовый узел созданный для символа перевода строки, а элемент p является вторым потомком. В этом мы можем убедится выведя имя первого элемента потомка body */ document.write(document.body.childNodes[0].nodeName+"<br />"); /* А так мы можем вывести содержимое тэга p на страницу и имя соответствующего узла */ document.write(document.body.childNodes[1].innerHTML+"<br />"); document.write(document.body.childNodes[1].nodeName);
Задание 1 считайте содержимое элемента с id='zadanie1' и выведите результат на страницу. Во время выполнения заданий из данной главы Вы можете использовать только следующие свойства: childNodes, nodeValue, nodeType, nodeName и attributes.
Обратите внимание: чтобы лучше понимать на каком узле Вы находитесь во время написания кода, используйте свойство nodeName.
Пример
<p id="zadanie1">Попробуйте вывести данное содержимое на страницу с помощью скрипта.</p>
Задание 2 считайте содержимое элемента с id='zadanie2' и выведите результат на страницу.
Пример
<div> <p>Абзац вложенный в div. </p> <div> <p id="zadanie2">Попробуйте вывести данное содержимое на страницу с помощью скрипта.</p> </div> </div>
Задание 3 считайте содержимое, узнайте тип, и значение первого атрибута элемента с id='zadanie3' и выведите результат на страницу.
Пример
<div id="wrap1"> <p>Абзац вложенный в div. </p> <br /> <div id="wrap11"> <p>Еще один абзац вложенный в div. </p> </div> <div id="wrap12"> <h4>Заголовок вложенный в div.</h4> <div id="wrap121"> <p style="color:green" id="zadanie3">Попробуйте вывести данное содержимое на страницу с помощью скрипта.</p> </div> </div> </div>