DOM - объектная модель документа
Пусть у нашей (условной) страницы сайта есть такой код:
<div id="number1">
<h1 id="first_h1">Каталог моделей</h1>
<div id="block_img">
<img id="img_1" src="images/mod1.jpg" width="250"
height="120" alt="Модель GR23" />
<img id="img_2" src="images/mod2.jpg" width="250"
height="120" alt="Модель GY14" />
<img id="img_3" src="images/mod3.jpg" width="250"
height="120" alt="Модель GP07" />
<img id="img_4" src="images/mod4.jpg" width="250"
height="120" alt="Модель GK28" />
</div>
<p><em>Любое изделие можно заказать</em></p>
</div>
1. Выбор элементов методом getElementsByTagName позволяет выбрать все элементы по имени тега, которые идут до скрипта такого содержания (например, выбираются элементы с тегом img):
var myImg = document.getElementsByTagName("img");
alert ("Всего картинок - "+myImg.length);
2. Выбор элемента методом getElementById позволяет выбрать элемент по id
( например выбрать с id="img_1" и вывести в окне alt="Модель GR23" или какое-нибудь другое свойство) :
var risunok =document.getElementById("img_1");
alert(risunok.alt);
3. Выбор дочерних узлов для блока div с id="block_img" методом childNodes (будут в цикле выведены свойства alt четырёх картинок):
var myBlock = document.getElementById("block_img");
var childDiv = myBlock.childNodes;
for (var i=0; i < childDiv.length; i++)
{
alert (childDiv[i].alt);
}
4. Выбор родительского элемента для блока div с id="block_img" методом parentNode (будет выведен id
"number1"):
var myDiv = document.getElementById("block_img");
var parentDiv = myDiv.parentNode;
alert (parentDiv.id);
5. Выбор следующего братского элемента для блока div с id="block_img" методом nextSibling (это элемент <p>):
var myDiv = document.getElementById("block_img");
var brotherDiv = myDiv.nextSibling;
alert (brotherDiv);
6. Выбор текста из элемента с id="first_h1" (текст:"Каталог моделей") методом innerText или textContent:
var myElem = document.getElementById("first_h1");
alert (myElem.innerText); //для Опера
alert (myElem.textContent); ;// для Firefox и Опера
7. Выбор HTML кода для блока div с id="block_img" методом innerHTML:
var myImg = document.getElementById("block_img");
alert (myImg.innerHTML);
|
