finished lo ading, a call to write() will reopen the document, erasing all its contents.
In the old da ys of JavaScript, the write() me thod used to be the only way of generat-
ing the document’s content d ynamically, but in modern web programming this method
is seldom used.
Events
There are few events that browsers fire directly at Docum ent objects. M ost events that
a document will receive are events that have been fired at the elements it contains and
have bubbled up to the document. Hence, the Document object suppo rts all of the
Element’s event-handler properties, some of which are listed on page 4 02.
Event bubbling, or event propagation, is a mechanism that fires an event not only at
the e le ment on which it occurs but also on all its ancestors up the document tree.
Event bubbling allows you to register a single event handler on a docume nt or some
other container eleme nt, which is som etimes more convenient than to do that o n each
element separately.
E.8 Element (Client-Side JavaScript)
Each element in an HTML document can be represented by an Eleme nt object in
JavaScript code. The properties and methods of Elem ent allow you to query and
manipulate elements positioned on a web page. Since Element is a subclass of Node,
you can use the properties and methods of Node on Element objects as well. A very
important subject connected with Element are events. Web browsers fire numerous
kinds of events on HTML elemen ts, and Element has defined different event-handler
properties to handle those events.
Object Instance Creation
The Element object defines no constructor of its own, but you can create elements
using the createElement() method of Document. After creating a new elem ent,
you must insert it into the document using method s like appendChild() of the Nod e
object.
You can also obtain the elements that already exist on a web page. Listed under the
Document obje ct, you will find properties like head and body, which return spe-
cific elements, and also many methods that allow you to obtain eleme nts accord-
ing to different criter ia like getElementById( ), getElementsByT agName(), or
getElementsByClassName(), for example . Note that some of th ose methods are
defined not only on Document but also on Element.
Properties
In this section, you will find listed some of the properties that Element defines. Apart
from these, you can also use the properties listed under Node (as Element is a subclass
of Node) and properties whic h, for the most part, have the same names as attributes of
correspo nding HTML elements.
396 JavaScript Reference
JavaScript Reference
HTML Attributes
HTML attributes of an HTML eleme nt are acc essible a s addition al properties of the
Element object representing that HTML element.
Imagine, for example, that myPicture r efers to an Element object representing an
<img> HTML elemen t on your web page ,1 and you want to change the image dis-
played by that <img> elem ent. You ca n do that by setting its src HTML attribute,
which is accessible as the src property of myPicture from JavaScript:
myPicture.src = "sunset.jpg";
Some HTML attributes are reserved words in JavaScript and are therefore accessible
through different names in JavaScript. For example, the class HTML attribute is
named className in JavaScript, and the for attribute of the <label> element is
named ht mlFor in JavaScript.
children
Syntax:
element .children
This read-only property holds a reference to an array-like object of the Element chil-
dren of element . Other children, such as text or comment nodes, are excluded from
the array.
clientHeight, clientWidth
Syntax:
element .clientHeight
element .clientWidth
These read-only properties specify the dimension s of element including the con-
tent and padding, and excluding the border and margin. When element is the root
element (like the <html> element returned by document.documentElement), these
properties specify the size of the browser window without scrollb ars and other browser
user inter face elements.
1To be exact, this is an Image object. While the Image object offers s ome additional information about
an image through its properties, for the most part, you need not treat it any differently from any other
Element object.
E.8. Element (Client-Side JavaScript) 397
dataset
Syntax:
element .dataset.camelCasedName = string
string = element .dataset.camelCasedName
HTML5 allows y ou to a ssocia te you r own data with a specific HTML element even
though the data have no language-defined meaning. You can do that using so-called
custom data attributes whose names begin with da ta-. Custom attribute names are
mapped to properties of the data set p roperty of the Element object using the follow-
ing transformation rules:
• The pre fix data- is removed.
• Any combination of a dash (-) followed by a lower-case letter is replaced by a
correspo nding upper-case letter.
Consider, for example, the following HTML:
<div id="item1" data-max-allowed-price="unlimited">Oh, boy!</div>
You can access the above data-max-allowed-price attribute from JavaScript like
this:
//Writes unlimited to the JavaScript Console:
console.log(
document.getElementById("item1").dataset.maxAllowedPrice
);
You can, of course, ch ange the value o f a custom data attribute:
document.getElementById("item1").dataset.maxAllowedPrice =
"0.99 USD";
firstElementChild
Syntax:
element .firstElementChild
This read-only property returns the first Element child of element , or n ull if there
is none. Any non-Elem ent child, such as a text or comment node, is ignored.
As an examp le , consider the next H TML code fragment representing an unordered
list:
398 JavaScript Reference
JavaScript Reference
<ul id="some-list">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
Suppose you want to traverse all the list items within th e above list and get the content
of each individual item. Th is is how you can do it:
var list = document.getElementById("some-list"); //Get the list
var item = list.firstElementChild; //Get the first item
while (item) { //While item is not null
console.log(item.innerHTML); //Write the item’s content
item = item.nextElementSibling; //Get the next item
}
Note that firstElem entChild is used on the list w hile nextElementSib ling is
used on the list items.
When running the above code, you will get the words “First,” “Second,” “Third,” and
“Fourth” written in the debugging console.
innerHTML
Syntax:
element .innerHTML
This property is a string spec ifying the HTML markup con ta ined between the start
and e nd tags of element . Note that the tag s themselves are not included in the string.
When you set this prope rty to a string of HT ML, the specified text will replace the
content of element with the parsed form of the text. When you query this property,
you get the content of element in the form of a string of HTML.
lastElementChild
Syntax:
element .lastElementChild
This read-only pr operty returns the last Element child of element , or null if there is
none. Any non- Element child, such as a text or comment node, is ignored.
E.8. Element (Client-Side JavaScript) 399
nextElementSibling
Syntax:
element .nextElementSibling
This read-only property returns the first Ele ment sibling that follows element in the
childNodes array of its parent node. If there aren’t any more eleme nts following
this one, then the nextElementSibling property re turns null. Any non-Element
sibling, suc h as a text or comment node, is ignored.
For an example of using nextE lementSibling, refer to the firstEle mentChild
property on page 398.
outerHTML
Syntax:
element .outerHTML
This property is like inne rHTML, only the start and end tags of element are included
in the string specified by outerHTML. The refore, using outerHTML you do not chang e
only the co ntent of element but the whole element, inc luding its name and attributes.
previousElementSibling
Syntax:
element .previousElementSibling
This read-only property return s the Ele ment sibling that directly precedes element in
the childNodes array of its parent nod e. If there aren’t any elements preceding this
one, then the previousElementSibling property returns null. Any non-Element
sibling, suc h as a text or comment node, is ignored.
tagName
Syntax:
element .tagName
This read-only property return s the name of element . No te tha t the name is always
returned in u pper case, regard le ss of how it appea rs in the document source . For exam-
ple, the value of the tagName prope rty of an Element object representing a <table>
HTML element will be "TABLE".
400 JavaScript Reference
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.