DOM Document Object Model
Each HTML content (label, text content, attributes) is a node object Node.
node (node) properties
Three attributes:
1, nodeType node type
To distinguish between the types of nodes:
document 9
element 1
attribute 2
text 3
2, nodeName node name
document #document
element tag name all-caps
attribute attribute name
text #text
3, nodeValue node value
null
null
Attributes
Text content
Find the operation of the DOM
Find:
1, direct access to three elements:
html document.documentElement
head .head
body .body
2, node relationships
Parent-child relationship:
node.parentNode return node of the parent node
node.childNodes return of all direct child nodes Node
Returns the first child node node.firstChild node
node.lastChild Returns the last child nodes under node
Brotherhood:
node.previousSibling return to the previous sibling node of the current node
After node.nextSibling get a sibling of the current node
Not only contains useful element node, also it includes invisible line breaks, spaces interference.
A method for acquiring the node information only:
Parent-child relationship:
elem.parentElement return to a parent element objects
.children returns the child elements of a collection of objects (IE8 support)
Returns the first child objects .firstElementChild
.lastElementChild returns the last child element object
Brotherhood:
.previousElementSibling return to the previous sibling object of the current element
. NextElementSibling return next sibling elements of the object of the current element (IE9 +)
By HTML Find
what？
In the whole page or specified parent element, attribute, or look for the label element objects meet the requirements.
what？
As long as there is a choice in accordance with the basic criteria to find the elements.
Four methods:
1. Find html element by id
2, look for html elements by class name
3, find the html tag attribute by name
4. Find html element by element's name attribute
Press to select looks:
Find by HTML can use only one query, select looks complicated conditions can find every time.
1, to find only one element:
var elem = parent element .querySelector ( "selector");
2, look for multiple elements:
var elem = parent element .querySelectorAll ( "selector");
Non-dynamic!
Despise question: What is the difference getXXX vs SeletorAPI? how to choose?
1, the return value: getXXX Returns: a dynamic collection
SeletorAPI Returns: non-dynamic set of
2, efficiency: getXXX first query efficiency high
SeletorAPI low initial query efficiency
3, easy to use: getXXX complex condition is more complicated
SeletorAPI more simple, because it is tedious work to the selectors
if you can get through a conditional element of choice getXXX;
if the condition is complex, the preferred SeletorAPI
Modify html in JS:
DOM are two core DOM, HTML DOM.
Core DOM: API can operate all the structure of the document (HTML and XML)
Advantages: Universal Cons: tedious
HTML DOM: simplification of the core DOM API is commonly used
Advantages: simple disadvantages: not everything, only a simplification of the API
Conditional which method to use, with a simple priority.
Core DOM access attributes:
Obtaining attribute values: var value = elem.getAttribute ( "attribute name");
Modify the attribute value: elem.setAttribute ( "attribute name", "attribute value");
Determining whether property comprising: var bool = elem.hasAttribute ( "attribute name");!
Remove property: elem.removeAttribute ( "property name");
HTML DOM attributes:
. Elem attribute name;
. Elem attribute name = "attribute value";
. Elem attribute name = "";! // determine whether the air is determined whether the properties contain
elem attribute name = ""; // delete the property name set to null