There are three parts JS ES DOM BOM
DOM is an API specifically manipulate HTML content
DOM core into the HTML DOM DOM, the former capable of operating all the structured document, which is commonly used API to simplify
All pages are based on a tree structure stored in the storage subordinate relationship contains the most intuitive structure in memory
Each HTML element: element, attribute, text objects is a node (Node) document object is the root of the whole tree
Object node (Node) three attributes:
1.nodeType Number
to distinguish between the types of nodes:
. 9 Document
. 1 element
2 attribute
. 3 text
need to differentiate between types of nodes used when
2.nodeName node name string
document #document
tag name is all uppercase element
attribute property name
text nodes #text
used when further distinguishing element name
3.nodeValue node values
Document null
element null
attribute value of the attribute
content of text of the text
DOM DOM tree is on the additions and deletions to change search
document.getElementById () to find properties as ID, only document called a return element
document.getElementsByTagName () Find by tag element attributes, any parent element that can be called, the return value even if only a Oh, also placed in the collection is not found to meet the requirements of sub-node returns an empty array, only to find not only check the direct child, and find all the descendant nodes
document.getElementsByName () Find property in accordance with the name attribute, only document call returns a dynamic array
document.getElementsByClassName () Find by class property attribute, any parent element that can call
object.innerHTML double label elements get, write; object.value single label elements get, write
1. The three elements do not need to look for, direct access to:
<HTML> document.documentElement
<head> document.head
<body> the document.body
2. The relationship between the nodes:
1) parent-child relationship
node.parentNode parent node obtained
node.childNodes obtained all the child nodes of node
node.firstChild get the first child node in the node
last child node under the node.lastChild
2) brotherhood
node.preivousSibling: returns the previous sibling of the current node
node.nextSibling: returns the next sibling of the current node
, but the page everything in the node, including newline and space characters
So we can use the element tree: the tree structure contains only an element node --- not a new tree, only a subset of the nodes
1) parent-child relationship
elem.parentElement return to a parent element object
elem.childen IE8 supports returning the child element object set
elem.firstElementChild returns the first child of the object
elem.lastElementChild returns the last child element
2) brothers
back to the previous sibling of the current node
elem.preivousElementSibling
returns the next sibling of the current node element
elem.nextElementSibling
document.createElement () creates an element in memory.
document.body.appendChild () is inserted into the tail node.
parent.insertBefore (elem, oldElem); inserting a new element before the existing child element
parent.replaceChild (elem, oldElem); replace the existing child element
elem.parentNode.removeChild (elem); elements are removed