Do not look directly using elements has the following:
1.document.documentElement find <html>
2.document.head find <head>
3. document.body find the <body>
4.document.forms [i] found <form>
Four ways to find elements:
First, find the per-node relationships
Tree node: contains the complete structure of all node objects
1. The parent-child relationship
Parent object .parentNode current element
All objects .childNode child node of the current element
The first direct child node of the current element objects .firstChild
The last child of the current element node object .lastChild
2. brotherhood
Parent object .previousSibling current element
Next sibling node object .nextSibling current element
Problem: Find the element of time, will be affected by the invisible null character.
Element tree: the tree structure contains only an element node, the node does not contain text, text nodes affected by the Finding
1. The parent-child relationship:
The parent element of the current element objects .parentElement
All elements of the object .children direct current element
The first element of a direct current element of the object .firstElementChild
Next sibling element object .lastElementChild current element
2. brotherhood:
The previous sibling element object .previousElementSibling current element
Next sibling element object .nextElementSibling current element
Summary: After a long time to find the relationship between nodes in accordance with the preferred attributes of the element tree
Second, look for recursive traversal (inefficient)
Third, according to HTML feature to find (four kinds)
1. Find an element by id
var elem=document.getElementById("id名")；
2. Find the multiple elements by tag name
var the elems = parent element .getElementsByTagName ( "tag name");
3. Look for multiple elements by name property
var elems=document.getElementsByName("name");
4. Find multiple elements by class
var elems=parent.getElementsByClassName("class");
Four, Find by selector
1. Find only one element
var elem = any parent element .querySelector ( "selector");
2. Find the multiple elements
var the elems = any parent element .querySelectorAll ( "selector");