Доступ к элементам по id
Самый удобный способ найти элемент в DOM - это получить его по id. Для этого используется вызов document.getElementById(id)
Пример 2. Данный код изменит цвет текста на голубой в div'е c id="data"
document.getElementById('data').style.color = 'blue';
Доступ к элементам по тегу
Возможно получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.
Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li: document.getElementsByTagName('LI')[1];
Следующий вызов получает список элементов LI, находящихся внутри первого тега DIV:
document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')
Свойства (атрибуты) элементов
У DOM-элементов есть масса свойств. Некоторые из них можно читать и устанавливать, другие - только читать.
tagName
Атрибут есть у элементов-тегов и содержит имя тега в верхнем регистре, только для чтения.
style
Это свойство управляет стилем. Оно аналогично установке стиля в CSS.
Пример 3. Изменение ширины кнопки (element.style.width).
<input type="button" style="width: 300px"
onclick="this.style.width = parseInt(this.style.width)-10+'px'"
value="Укоротить"/>
Замечание. Если CSS-атрибут имеет дефисы, то для установки style нужно заменить их на верхний регистр букв.
className
Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту "class". Например, elem.className = 'news'. |
innerHTML
Это свойство содержит весь HTML-код внутри узла, и его можно менять. Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы.
Пример 4.
<div id="news">Самая новая новость</div>
<script>
news_div = document.getElementById('news');
alert(news_div.innerHTML);
</script>
Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:
setAttribute(name, value) Устанавливает значение атрибута
getAttribute(name) Получает значение атрибута
hasAttribute(name) Проверяет, есть ли такой атрибут
removeAttribute(name) Удаляет атрибут
Пример 5.
<html>
<head>
<script language="JavaScript">
function summarize()
{
var s=0;
for(i=1;i<15;i++) {
var elem=document.getElementById("n"+i);
if(elem.checked) {
s += parseInt(elem.value);
}
}
document.getElementById("itogo").innerHTML = "На этой неделе вы съели как минимум <b>" + s + "</b> вкусных вещей!";
}
</script>
</head>
<body>
<form name="foodForm">
<p>На этой неделе вы съели конфет:</p>
<input type="radio" name="sweets" id="n1" value="1">1</input>
<input type="radio" name="sweets" id="n2" value="2">2</input>
<input type="radio" name="sweets" id="n3" value="3">3</input>
<input type="radio" name="sweets" id="n4" value="4">4</input>
<input type="radio" name="sweets" id="n5" value="5">5</input><br><br>
<p>Еще вы ели:</p>
<input type="checkbox" id="n6" value="1">пирожок</input><br>
<input type="checkbox" id="n7" value="1">печеньку</input><br>
<input type="checkbox" id="n8" value="1">яблочко</input><br>
<input type="checkbox" id="n9" value="1">еще печеньку</input><br>
<input type="checkbox" id="n10" value="1">еще пирожок</input><br><br>
<p>И, конечно, же, перекусывали:</p>
<input type="checkbox" id="n11"value="1">шоколадкой</input>
<input type="checkbox" id="n12"value="1">мармеладкой</input>
<input type="checkbox" id="n13" value="1">пончиком</input>
<input type="checkbox" id="n14" value="1">мандаринкой</input>
<input type="checkbox" id="n15" value="0">уже объелся</input><br><br>
<input type="button" onclick="summarize();" value="И что же?">
<p id="itogo"></p>
</form>
</body>
</html>