An element node tree of FIG.
document>documentElement>body>tagName
offsetLeft / offsetTop merging motion
Scroll Carousel
1.DOM full name: document object model
(1) nodes of the tree in FIG.
document>documentElement>body>tagname
2. Our common node types
Element node ( tag )
Text node (text node)
Properties node ( tag attributes )
3.document has a property called nodeType return is digital
1 on behalf of the node element 2 an attribute node 3 representative of the text node
4. nodes to obtain
There are many ways to obtain an element node
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
document.querySelectorAll()
Gets an attribute node
Elements .attributes get all the attributes of the body element consisting of a collection (array)
Value obtained inside the element .attributes [1] .value
Element .getAttribute ( "attribute name") acquired the property value method
Element .setAttribute ( "attribute name", "attribute value") to set the element attributes and attribute values
Element .removeAttribute ( "Properties") Delete property
Text node
The method is not acquired, there is no meaning
5. Get children of the element
Element .childNodes This property has compatibility with standard browsers will get the text node
While the low version of the browser will not. It is recommended that children use this property .
Get a single child node
Get the first child
Standard elements .firstElementChild
Under non-standard elements .firstChild
Under the wording compatible
var list=document.getElementById("list")
var fist=list.firstElementChild||list.firstChild
console.log(fist)
Gets the last child
Elements .lastElementChild element .lastchild
Gets the previous sibling
Elements .previousSibling
元素.previousElementSibling
Get the next sibling node
Elements .nextSibling
Elements .nextElementSibling
6. Get the parent node
Element .parentNode no compatibility
元素.parentNode.parentNode
Distinguish offsetParent and parentNode difference
DOM2 dynamically created node
1. A method of generating node document.createElement ( "div")
2. Insert the parent node process elements .appendChild ( the new node )
Behind the child nodes of the parent node of the new node is inserted
3. Insert a new node at the specified location
(1) the parent element .insertBefore ( new nodes , whose front ) in front of a new node into the specified element
4, delete the element node parent element .removeChild ()
case study
Imitation Message Board
compatibility
Element has no child nodes, IE low version will not read, while the standard browser.
Because the standard browser will text node as a child node, and ie6-8 not.
Hyperlink a property href analysis
<a href=""> clicks refresh the page, the equivalent of sending a request to the background.
<a href="#s"> anchor Jumps to a certain id called s position on
<a href="javascript:;"> Cancel function to refresh the page
expand
String concatenation and Dom creation are rendered way
String concatenation
The advantages of simple, strong sense of hierarchy, can handle large amounts of data
Disadvantages: string concatenation will affect the child elements of the original event
Dom creation
Advantages : is a separate entity, without affecting the original elements
Disadvantages : processing large amount of data would be more trouble , will result in DOM reflux
Dom reflux
When page rendering, we html simple additions and deletions to change the structure of the investigation when the browser on all of dom rearrange, this is the Dom reflux, seriously affecting the performance of the browser.
supplement
Enhance page performance optimization
- Use more Sprite map
- Hyperlinks to prevent default behavior
- Dom reduce reflux
- Reduce the number of requests to the server