I. Introduction
In the HTML document, it was all nodes:
1. The entire document is a document node;
2. Each HTML element is an element node;
3.HTML text within the text node element;
4. HTML attribute is an attribute of each node;
The comment is a comment node;
These nodes acquired the document, which is the page elements corresponding JavaScript objects, also known as DOM object, you need to use the document object.
II. Obtaining four kinds
1. Obtain the DOM object tag by the tag id
Document object called with getElementById () method, passing in the id can be acquired, as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="text">百度</span>
<script>
var element = document.getElementById("text");
console.log(element);
</script>
</body>
</html>
2. Get DOM object array by tag name of the tag
The second way is through the label name of the target label, called with the document object getElementsByTagName () method to get an array of all tags in the document DOM object consisting of the name, the following code sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<br /><br /><br id="space"/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
var elements = document.getElementsByTagName("br");
console.log(elements.length);
console.log(elements[2]);
</script>
</body>
</html>
3. Get an array of DOM objects by name of the tag name of the tag
The third embodiment is obtained by the tag name of the target name, the name is acquired DOM object array composed of all tags, the following sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" name="hobby" value="1"/>篮球
<input type="checkbox" name="hobby" value="2"/>足球
<input type="checkbox" name="hobby" value="3"/>乒乓球
<script>
var elements = document.getElementsByName("hobby");
console.log(elements.length);
console.log(elements[2]);
</script>
</body>
</html>
4. Get the tag by changing the class name of the class tag array of objects DOM
Finally, there are an array of all the DOM object to obtain a document of such labels by class name, the following are code examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" class="text">百度一下</a>
<br class="text" />
<span class="text">DOM对象</span>
<script>
var elements = document.getElementsByClassName("text");
for(var i=0;i<elements.length;i++){
console.log(elements[i]);
}
</script>
</body>
</html>
