JavaScript Reference
d.toUTCString() //Returns "Fri, 09 Jan 2015 15:12:22 GMT"
UTC() //Static method
Syntax:
Date.UTC(year , month [, day [, hrs [, mins [, secs [, millis ]]]]])
This is a static method that converts the specified universal time to the milliseconds
since the UNIX ep och. Because the method is static, it is invoked directly thr ough the
Date object itself, rather than through individual Date ob je ct instances. For th e de-
scription of arguments, see the table summarizing the Date() constructor arguments
on page 384. Note that square brackets should not be used in a method. They just
indicate which arguments are optional.
Although the Date.UTC() static method an d the Date() constructor can accept the
same parameters and transform the m to a single number of milliseconds since the
UNIX epoch, there are two important differences between them: First, Date() cre-
ates a Date object, while Date.UTC() only returns an integer. Second, the argu-
ments passed to Date() are under sto od to specify lo cal time, and arguments passed
to Date.UTC() are assumed to represent universal time. By combining Date() and
Date.UTC(), y ou can easily create a Date object using universal time:
//Creates a Date object set to 2 p.m. on August 1, 2016 (UTC):
var dt = new Date(Date.UTC(2016, 7, 1, 14));
valueOf()
Syntax:
date .valueOf()
Returns the same millisecond value as the ge tTime() method.
E.7 document (Client-Side JavaScript)
Every web page that is loaded in a browser owns one Document object accessible
through the global document property. Document implements an interface that acts
as an entry point into th e content of the web p age. Many of the Docume nt’s prop-
erties and methods offer access to elements and other important objects contained in
the docum ent. Apart f rom that, the Document object defines a number of so-called
“factory methods” used for creating elements and other relevant objects.
Technically, a Document object is a subclass of Node. That means that it in herits all
the properties and methods of Node, which you can use in additio n to the Document’s
own properties and methods described in this section. Note that a Document itself
E.7. document (Client-Side JavaScript) 391
is not an Element. Rather, it contains a single element (i.e., an <html> element)
accessible through its documentElement property.
Properties
body
Syntax:
document.body
This property refer s to the Elem ent object rep resenting the <body> ele ment.
charset
Syntax:
document.charset
Defines the character encoding for the docu ment.
documentElement
Syntax:
document.documentElement
This read-only property refers to the Element object representing the <html> ele ment,
which is the root element of the document.
head
Syntax:
document.head
This read-only property refers to the Element object representing the <head> ele ment.
images
Syntax:
document.images
This read-only property is a reference to an array- like object storing all images inside
the document.
The next example searches for the image element with id of logo and replaces the
image that the element refers to with the one sto red in the
newlogo.gif file.
392 JavaScript Reference
JavaScript Reference
var i, imgList = document.images;
for(i = 0; i < imgList.length; i++) {
if(imgList[i].id == "logo") {
imgList[i].src = "newlogo.gif";
}
}
lastModified
Syntax:
document.lastModified
The lastModifi ed read-only property holds the date and time of the latest c hange
made to the doc ument in the visitor’s local time zone.
You can use lastModified directly as in the next example:
console.log(document.lastModified); //Writes "08/19/2014 10:25:59"
If you want to have some co ntrol over how the date and time are output, then you
can construct a Date object by passing the document.las tModified to the Date()
constructo r:
var lastChange = new Date(document.lastModified);
links
Syntax:
document.links
This read-only property is a reference to an array-like object storing all hyperlin ks in
the document.
title
Syntax:
document.title
This proper ty is a string containing the text found inside the <title> element of the
document.
E.7. document (Client-Side JavaScript) 393
Example:
//Changes the document title if a video, or a game on the page is
//paused:
document.title += " (paused)";
Methods
createElement()
Syntax:
document.createElement(elementName )
Creates and returns an empty Element object with elementName , which must be
an HTML elem ent name. You can then fill the created element’s content using the
Element’s innerHTML property or the Node’s appendChi ld() method, for example.
You can use the latter because Element is a subclass of Node an d thus inherits all the
Node’s properties and methods.
The next example creates an empty <h1> element, fills its content with “Howdy,” and
appends it to the document body:
var mainHeading = document.createElement("h1");
mainHeading.innerHTML = "Howdy";
document.body.appendChild(mainHeading);
You can find more examples of using createEle ment() on pages 252 and 258.
getElementById()
Syntax:
document.getElementById(elementId )
The getElementById() me thod searches the document for an ele ment that has an id
attribute with the value elementId and returns it in the form of an Element object. If
no such element exists, the n it returns null.
Elements that are not part of the document are not searched b y getElementById ().
After you have created a new element, you should insert it into the document tree (e.g.,
using the Element’s appendChild() method) or getElementById() won’t be able
to find it.
Note that the elementId a rgument is case-sensitive. For example, if there is an ele-
ment with id of "first", then docume nt.getElementById("First") will return
null beca use "f" and "F" are differ ent as far as the ge tElementById() method is
concerned.
394 JavaScript Reference
JavaScript Reference
Note also the capitalization of “Id” in the name of the method. New prog rammers
sometimes mistakenly write getElementByID() (capital “D”) instead of the correct
form getElementById().
You can find examples of using getElementById( ) on pages 237 and 241.
getElementsByClassName()
Syntax:
document.getElementsByClassName(classNames )
The getEleme ntsByClassName() method returns a reference to a read -only array-
like object of elements with a cla ss attribute whose value c ontains all of the specified
classNames . classNames can either be a sin gle cla ss name or a space-separated list
of class names. When you supply a list of class names, they shou ld still be specified
as a single string argument like, for example, "my-border blue f ancy". The re-
turned list is live, which means that it is automatically updated whenever the document
changes. The order in which ele ments appear in the returned list is the same as the
order in w hich they appear in the do cument. Note that you can also invoke this method
on any Element object, in whic h case only the descendants of that element are included
in the search.
getElementsByTagName()
Syntax:
document.getElementsByTagName(elementName )
The getElement sByTagName() method returns a reference to a read-only array-like
object of elements w ith the specified elementName . The method compares names
in a case-insensitive manner. You can also use an asterisk (*) as an eleme nt name,
in which case all elements will be returned. The returned list is live, which means
that it is automatically updated whenever the document changes. The order in which
elements appea r in the returned list is the same as the order in which they appear in
the document. Note that you can also invoke this method on any Element object, in
which ca se only the descendants of that element are included in the search.
There are examples of using this meth od on pages 248 an d 254.
write()
Syntax:
document.write(markup )
This meth od writes text to the document while the document is loading, rendering any
HTML tags that may app ear in the markup argument. If the document has already
E.7. document (Client-Side JavaScript) 395
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.