Добавляем...


Доступ к свойствам элементов HTML
Как упоминалось в ранее, имеется приблизительное соответствие между именами атрибутов (X)HTML и именами свойств DOM. Например, дескриптор <body> представляется в DOM объектом HTMLBodyElement и имеет как обсуждавшиеся выше общие атрибуты, так и связанные только с этим элементом атрибуты типа aLink, background, bgColor, link, text и vLink. С учетом "криволинейного" стиля создания имен в JavaScript, можно представить себе набор свойств объекта, соответствующих атрибутам данного дескриптора (X)HTML. Хотя многие дескрипторы типа <body> имеют свои собственные специальные атрибуты, многие элементы (X)HTML имеют только базовый набор атрибутов: id, class, style и title, а также языковые атрибуты lang и dir. Модель DOM обеспечивает доступ к ним с помощью id, className, style, title, lang и dir. Как показывает таблице, многие элементы (X)HTML ассоциируются с общим объектом DOM HTMLElement.

<sub> <sup> <span> <bdo>
<tt> <i> <b> <u>
<s> <strike> <big> <small>
<samp> <kbd> <var> <cite>
<acronym> <abbr> <dd> <dt>
<noframes> <noscript> <address> <center>


Все другие дескрипторы (X)HTML наследуют те же отношения свойство/атрибут, что и дескрипторы, указанные в предыдущей таблице, но некоторые дескрипторы имеют дополнительные атрибуты. Эти дескрипторы, их свойства DOM, а в некоторых случаях и методы, представлены в таблице ниже.

Дескриптор(ы) (X)HTML Объект DOM Свойства Методы
<html> HTMLHtmlElement Version
<head> HTMLHeadElement Profile
<link> HTMLLinkElement disabled, charset, href, hreflang, media, rel, rev, target, type
<title> HTMLTitleElement Text
<meta> HTMLMetaElement content, httpEquiv, name, scheme
<base> HTMLBaseElement href, target
<isindex> HTMLIsIndexElement form, prompt
<style> HTMLStyleElement disabled, media, type
<body> HTMLBodyElement aLink, background, bgColor, link, text, vLink
<form> HTMLFormElement elements[], length, name, acceptCharset, action, enctype, method, target submit(), reset()
<select> HTMLSelectElement type, selectedlndex, value, length, form, options[], disabled, multiple, name, size, tablndex add(), remove(), blur(), focus()
<optgroup> HTMLOptGroupElement disabled, label
<option> HTMLOptionElement form, defaultSelected, text, index,disabled, label, selected, value
<input> HTMLInputElement defaultValue, defaultchecked, form> accept, accessKey, align, alt, checked, disabled, maxLength, name, readonly, size, src, tablndex, type, useMap, value blur(), focus(), select(), click()
<textarea> HTMLTextAreaElement defaultValue, form, accessKey, cols, disabled, name, readonly, rows, tablndex, type, value blur(), focus(), select()
<button> HTMLButtonElement form, accessKey, disabled, name, tablndex, type, value
<label> HTMLLabelElement form, accessKey, htmlFor
<fieldset> HTMLFieldSetElement form
<legend> HTMLLegendElement form, accessKey, align
<ul> HTMLUListElement compact, type
<ol> HTMLOListElement compact, start, type
<dl> HTMLDListElement compact
<dir> HTMLDirectoryElement compact
<menu> HTMLMenuElement compact
<li> HTMLLIElement type, value
<div> HTMLDivElement align
<P> HTMLParagraphElement align
<h1>...<h6> HTMLHeadingElement align
<q> HTMLQuoteElement cite
<pre> HTMLPreElement width
<br> HTMLBRElement clear
<basefont> HTMLBaseFontElement color, face, size
<font> HTMLFontElement color, face, size
<hr> HTMLHRElement align, noShade, size, width
<ins>, <del> HTMLModElement cite, dateTime
<a> HTMLAnchorElement accessKey, charset, coords, href, hreflang, name, rel, rev, shape, tablndex, target, type blur(), focus()
<img> HTMLImageElement lowSrc, name, align, alt, border, height, hspace, isMap, longDesc, src, useMap, vspace, width
<object> HTMLObjectElement form, code, align, archive, border, CodeBase, codeType, data, declare, height, hspace, name, standby, tablndex, type, useMap, vspace, width
<param> HTMLParamElement name, type, value, valueType
<applet> HTMLAppletElement align, alt, archive, code, CodeBase, height, hspace, name, object, vspace, width
<map> HTMLMapElement areas, name
<area> HTMLAreaElement accessKey, alt, coords, href, noHref, shape, tablndex, target
<script> HTMLScriptElement text, htmlFor, event, charset, defer, src, type
<table> HTMLTableElement caption, tHead, tFoot, rows, tBodies, align, bgColor, border, cellPadding, cellspacing, frame, rules, summary, width createTHead(), deleteTHead() , createTFoot(), deleteTFoot() , createCaption(), deleteCaption(), insertRow(), deleteRow()
<caption> HTMLTableCaptionElement align
<col> HTMLTableColElement align, ch, chOff, span, vAlign, width
<thead>, <tfoot>, <tbody> HTMLTableSectionElement align, ch, chOff, vAlign, rows[] insertRow(), deleteRow()
<tr> HTMLTableRowElement rowlndex, sectionRowIndex, cells[], align, bgColor, ch, chOff, vAlign insertCell(), deleteCell()
<td>,<th> HTMLTableCellElement celllndex, abbr, align, axis, bgColor, ch, chOff, colSpan, headers, height, noWrap, rowSpan, scope, vAlign, width
<frameset> HTMLFrameSetElement cols, rows
<frame> HTMLFrameElement frameBorder, longDesc, marginHeight, marginWidth, name, noResize, scrolling, src
<iframe> HTMLIframeElement align, frameBorder, height, longDesc, marginHeight, marginWidth, name, scrolling, src, width


Управлять элементом (X)HTML и связанными с ним атрибутами очень просто после доступа к элементу с помощью метода, наподобие document. getElementById(), как показано ниже:

<p id="myP1">Проверка абзаца</p>
<form action="#" method="get">
<input type="button" value="no левому краю"
onclick="document.getElementById('myP1').align='left';" />
<input type="button" value="no центру" onclick="document.getElementById('myP1').align='center';" />
<input type="button" value="no правому краю" onclick="document.getElementById('myP1').align='right';" />
</form>

Добавлять элементы (X)HTML также просто — это делается с помощью метода document.createElement(), как показано в следующем примере, который представляет собой развитие идеи редактора, предложенного в разделе Создание узлов. В данном случае мы даем пользователю возможность напечатать произвольные имя дескриптора и значение, которые могут быть добавлены в документ. Мы применяем простую проверку, чтобы не допустить добавления структурных элементов или текстового содержимого в пустой элемент, намекая на возможную логику, которую разработчик может использовать при создании вполне развитого редактора, управляемого средствами DOM.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Простой редактор DOM 2.0</title>
<meta http-equiv="content-type" content="text/html; " />
<script type="text/javascript">
<!--
var dangerousElements =
{'html':true,'head':true, 'body':true, 'script':true, 'style':true,'frameset':true, 'frame':true};
var emptyElements =
{'hr':true,'meta':true, 'br':true, 'area':true,'base':true, 'basefont':true,'link':
true,'frame':true};
function addElement(theElement,theText)
{
if (theElement in dangerousElements)
{
alert("Ошибка: элемент не являеться допустимым");
return;
}
var newNode = document.createElement(theElement);
if ((theText.length > 0) && !(theElement in emptyElements))
{
var newText = document.createTextNode(theText);
newNode.appendChild(newText);
}
else
alert("Внимание: не добавляйте текст в пустые элементы");
document.getElementById('insertHere').appendChild(newNode);
}
//-->
</script>
</head>
<body>
<div id="insertHere" style="width: 80%; border-style: dashed; border-width: 1px;">
 
</div>
<form action="#" method="get" name="theForm" id="theValue">
<input type="text" value="i" name="theTag" id="theTag" />
<input type="text" name="theText" id="theText" value="Проверка 1..2..3.." />
<input type="button" value="Create" onclick="addElement( document.theForm.theTag.value,document.theForm.theText.value )
;" />
</form>
</body>
</html>

просмотреть

Очень утомительно демонстрировать создание всех дескрипторов с помощью JavaScript. Все они создаются однотипно, как показано в данном примере. Заинтересованные читатели могут обратиться к приложению Б, которое содержит полный список всех связанных с (X)HTML свойств DOM уровня 1. Прежде чем завершить эту главу, рассмотрим элемент (X)HTML, который является источником постоянных проблем для разработчиков, а именно элемент <table>.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика