Лекция: Работа с атрибутами элементов
Метод createAttribute()
Метод setAttribute()
Метод removeAttribute()
Метод getAttribute()
Дополнительные методы в Internet Explorer 5
Все атрибуты узла-элемента (за исключением атрибута STYLE) составляют коллекцию attributes. W3C определяет эту коллекцию как массив с доступом по именам элементов, напрмер, oNode.attributes.align или oNode.attributes[«align»] возвращает значение атрибута ALIGN узла oNode. Имя атрибута надо набирать прописными буквами вне зависимости от того, в каком регистре они набраны в HTML-источнике. Свойство nodeName для узлов-атрибутов возвращает название атрибута, а nodeValue — значение атрибута. Свойство атрибутов specified позволяет узнать, определен или нет этот атрибут. Если, например, у узла oNode атрибут ALIGN определен, то oNode.attributes[«align»].specified возвращает true, а если не определен, то false.
Метод setAttribute()
Атрибуты как новых элементов, так и тех, что заданы через HTML, можно задать либо традиционным способом — присваивая значение свойству (атрибуту) узла, либо с помощью методаsetAttribute(). Оба способа демонстрируются ниже для атрибутаID. Так, любая из строк кода
oNode.id= «newItem»
oNode.setAttribute(«id»,«newItem»)
задает для элементаoNodeв качестве идентификатора строку«newItem». Метод setAttribute()требует два параметра. Первый параметр — строка, которая задает название атрибута. Второй параметр — строка, число или булево выражение соответствует значению атрибута.
Метод removeAttribute()
Удалить атрибут у элемента можно, активизируя метод removeAttribute(), который требует в качестве параметра название этого атрибута. Если удаленный атрибут имеет значение по умолчанию, то оно восстанавливается. Согласно документации в Internet Explorer 5, по умолчанию в параметре набор строчных и прописных букв должен совпадать с использованным ранее в названии атрибута. Зависимость от регистра можно отменить, задав в качестве второго параметра метода число 0. Метод возвращает true при успешном выполнении действия и false в противном случае.
Метод getAttribute()позволяет узнать текущее значение атрибута у элемента и требует в качестве параметра название этого атрибута.
Работа с формой
<!-- пример pr32: -->
<html> <head>
<title>Checkbox Inspector</title>
<script type=«text/javascript»>
function inspectBox(form) {
if (form.checkThis.checked) {
alert(«The box is checked.»);
} else {
alert(«The box is not checked at the moment.»);
}
}
</script>
</head>
<body>
<form>
<input type=«checkbox» name=«checkThis» />Check here
<p><input type=«button» name=«boxChecker» value=«Inspect Box»
onclick=«inspectBox(this.form)» /></p>
</form>
</body> </html>
<!-- пример pr33: открытие документа в новом окне -->
<html>
<head>
<title>Radio Button onClick Handler</title>
<script type=«text/javascript»>
var ShempOPhile = false
function initValue() {
ShempOPhile = document.forms[0].stooges[3].checked;
}
function fullName(form) {
for (var i = 0; i < form.stooges.length; i++) {
if (form.stooges[i].checked) {
break;
}
}
alert(«You chose » + form.stooges[i].value + ".");
}
function setShemp(setting) {
ShempOPhile = setting;
}
function exitMsg() {
if (ShempOPhile) {
alert(«You like SHEMP?»);
}
}
</script>
</head>
<body onload=«initValue()» onunload=«exitMsg()»>
<form> <b>Select your favorite Stooge:</b>
<p><input type=«radio» name=«stooges» value=«Moe Howard»
checked=«checked» onclick=«setShemp(false)» />Moe
<input type=«radio» name=«stooges» value=«Larry Fine»
onclick=«setShemp(false)» />Larry
<input type=«radio» name=«stooges» value=«Curly Howard»
onclick=«setShemp(false)» />Curly
<input type=«radio» name=«stooges» value=«Shemp Howard»
onclick=«setShemp(true)» />Shemp</p>
<p><input type=«button» name=«Viewer» value=«View Full Name...»
lick=«fullName(this.form)» /></p>
</form>
</body>
</html>
<!-- пример pr34: -->
<html> <head>
<title>Submit and Reset Confirmation</title>
<script type=«text/javascript»>
function allowReset() {
return window.confirm(«Go ahead and clear the form?»);
}
function allowSend() {
return window.confirm(«Go ahead and mail this info?»);
}
</script>
</head>
<body>
<form method=«POST» enctype=«text/plain»
action=mailto:Romanchik@bsu.by onReset=«return allowReset()»
onsubmit=«return allowSend()»>
Enter your first name:<input type=«text» name=«firstName» />
<p>Enter your last name:<input type=«text» name=«lastName» /></p>
<p>Enter your address:<input type=«text» name=«address» /></p>
<p>Enter your city:<input type=«text» name=«city» /></p>
<p><input type=«radio» name=«gender» checked=«checked» />Male <input type=«radio» name=«gender» />Female<<p>
<input type=«checkbox» name=«retired» />I am retired</p>
<p><input type=«reset» /> <input type=«submit» /></p>
</form>
</body>
</html>