Once having a node element, you can get its parent node, child nodes or sibling nodes. The following list is properties and their description.
- parentNode: returns the parent node.
- previousSibling: returns the previous node of the same node tree level.
- nextSibling: returns the next node of the same node tree level.
- firstChild: returns the first child node.
- lastChild: returns the last child node.
- childNodes: returns a NodeList instance, containing child nodes.
<html>If a body variable refers to document.body, representing the body tag, elements got from properties of body are as follows (we ignore text nodes of newline and indent characters, assuming it's running in Internet Explorer):
<head>
<title>Openhome.cc</title>
</head>
<body>
<h1>Hello!World!</h1>
<a href="Gossip/index.html">Study note</a>
</body>
</html>
documentThe childNodes property returns a NodeList instance, an array-like object with numeric properties. The first child node is index 0, so body.childNodes[0] returns the h1 node, and body.childNodes[1] returns the a node.
|-html（body.parentNode）
|-head（body.previousSibling）
| |-title
| |-Openhome.cc
|
|body
|-h1（body.firstNode）
| |-Hello!World!
|
|-a（body.lastNode）
|-Study note
(The NodeList specification says that an item function with an index is used to access an element; in JavaScript implementations, however, it's common to use [] with an index to access an element.)
Actually, using the above properties is not recommended because this will cause dependence on the document structure. Once the document content changes, your application might be broken. A common way is that: if the node is an Element instance, use functions such as getElementsByTagName or getElementById to get the node. For example, getting all elements of p tags may be written as follow:
var ps = document.getElementsByTagName('p');A document may have more than one p tag, so the return value of getElementsByTagName may contain more than one node. The getElementByTagName returns a NodeList instance; you can use an index, representing the tag order in the document, to get the corresponding node. For example, the node returned by document.getElementsByTagName('p')[0] represents the first p tag in the document.
If a tag defines the id attribute, getElementById can be used to return the corresponding element. For example, if a document defines the following div tag.
<div id="console">Console here</div>You can get the div element through the following code:
var console = document.getElementById('console');The id value of a tag should be unique in the document. If it repeats, getElementById will return the first matched element. Element Instances always have getElementsByTagName and getElementById, these functions return child nodes of a node. For example, if the document has the following content:
<div id="test">Then, you can get 'Test 1 Here' as follow:
<div>Test 1 Here</div>
<div>Test 2 Here</div>
</div>
var testDiv = document.getElementById('test');The innerHTML property returns the HTML content, a string type, contained in the tag. It was not a standard property, yet most browsers support it. In fact, HTML 5 has accepts it as a standard property.
var test1DivHtml = testDiv.getElementsByTagName('div')[0].innerHTML;
HTMLDocument instances even have a getElementsByName function. If a tag defines the name attribute, this function can return the corresponding element. In a HTML document, the type of the document is exactly HTMLDocument, so it also has this function. The name values of tags are repeatable in a document, so getElementsByName returns a NodeList instance containing all matched elements.
Once you have nodes or elements, you naturally want to know information about them. For example, use innerHTML to obtain the enclosed HTML of the element. Besides, getting the element attribute is often a common requirement, such as the href attribute of the a tag.
var href = document.getElementsByTagName('a')[0].href;If you want to use a standard way, getAttribute can return the tag attribute. For example:
var href = document.getElementsByTagName('a')[0].getAttribute('href');The upside of the standard way is: dealing with attributes such as class is more convenient. For example, if there's a div tag:
<div id="console" class="demo">DEMO</div>Because class is a reserved word, you have to use the className property instead.
var clzName = document.getElementById('console').className;The standard way in Firefox is:
var clzName = document.getElementById('console').getAttribute('class');But, what getAttribute accepts has the problem of browser compatibility. The above code is useless in Internet Explorer and should be revised as follow:
var clzName = document.getElementById ('console').getAttribute('className');It's the same with the for attribute of the label tag. Since for is a keyword of JavaScript, use the htmlFor property instead.
var htmlFor = document.getElementById('someLabel').htmlFor;The standard way in Firefox, however, is as follow:
var htmlFor = document.getElementById('someLabel').getAttribute('for');But, Internet Explorer requires the following code:
var htmlFor = document.getElementById('someLabel').getAttribute('htmlFor');Html tags are not case sensitive, but property names are. Property names are usually camel case. For example, obtaining attributes such as cellspacing, colspan, frameborder, maxlength, readonly, rowspan, tabindex and usemap needs properties such as cellSpacing, colSpan, frameBorder, maxLength, readOnly, rowSpan, tabIndex and useMap.
Using getAttribute usually doesn't need to pay attention to sensitive. For example, getAttribute('readonly'), getAttribute('readonly') or getAttribute('Readonly') are all feasible for returning the readonly attribute of the input tag.
The name float is a JavaScript reserved words, although currently not used, so the standard property for it is cssFloat, while Internet Explorer uses styleFloat.
Getting the value attribute of the input tag is common. For example:
<input id="username" name="user" value="caterpillar">The following code is getting the value of the input element.
var username = document.getElementById('username').value;There's one common beginner mistake. For example, use the following code to get the text contained in the a section.
var text = document.getElementsByTagName('a')[0].value;This is wrong! The a tag has no value attribute; its corresponding element has no value property too. And remember, a text is also a node. So first, you have to retrieve the text node, the child node of a; then use the data property of the text node, defined on Text, or the nodeValue, defined on Node, to return the text.
var a = document.getElementsByTagName('a')[0];
var text = a.firstChild.data;