DOM introduction and query

When the web page is loaded , The browser will create the document object model of the page （Document Object Model）
HTML DOM The model is constructed as a tree of objects

Through the programmable object model ,JavaScript Gain enough ability to create dynamic HTML

• JavaScript Can change all of the pages HTML Elements
• JavaScript Can change all of the pages HTML attribute
• JavaScript Can change all of the pages CSS style
• JavaScript Be able to react to all events on the page

lookup HTML Elements
Usually , adopt JavaScript, You need to operate HTML Elements
To do this , You must first find the element . There are three ways to do it ：

• adopt id find HTML Elements

• Found by tag name HTML Elements

• Found by class name HTML Elements

node.getElementById(“id”)__ adopt id lookup HTML Elements
example ：

node.getElementsByTagName(“TagName”)__ Find a group by tag name HTML Elements
Be careful , This method returns us an array of class objects , All the found elements will be encapsulated in the object
example ：

node.getElementsByName(“Name”)__ adopt name Property to find a set HTML Elements
Be careful , This method also returns an array of classes

Get the child node of the element node
Call through a specific element node
1.getElementsByName（）
- Method , Returns the specified label name of the current node and the descendant node

2.childNodes
- attribute , Represents all the children of the current node
But notice ：childNodes Property gets all nodes, including text nodes , according to DOM label The blank space between tags will also be used as text nodes （IE8 And the following browsers , Do not treat blank text as child nodes , So this attribute is in IE8 Will return 4 Child elements and other browsers are 9 individual ）

Add a little more , have access to children attribute , You can get all the child elements of the current element

3.firstChild
- attribute , Represents the first child of the current node （ Include blank text nodes ）


eject undefined Because what we get is ： Parent node ul Heel child node li Blank text nodes between ！
If you don't want to delete the blank text node , have access to firstElementChild（ Are not compatible IE8 And the following browsers ） To get the first child node of the current element

4.lastChild
- attribute , Represents the last child of the current node （ Follow firstChild equally , It also includes blank text nodes ）

Get the parent node and the sibling node
Call... Through specific nodes
1.parentNode
- attribute , Represents the parent of the current node
2.previousSibling
- attribute , Represents the previous sibling of the current node
3.nextSibling
- attribute , Represents the next sibling of the current node

DOM Other methods of query
1. stay document There is a property in body, What it keeps is body References to

var body = document.body;

2.document.documentElement What is kept is html Root tag

var html = document.documentElement;

3.document.all Represents all elements in the page

var all = document.all;

4_①. According to the class Attribute value to query a set of element node objects
getElementsByClassName（） According to class Property value to get a set of element node objects , I won't support it IE8 And the following browsers

var box = document.getElementsByClassName（"box"）;

4_②. although IE8 There is no getElementsByClassName（） But you can use querySelector（） Instead of
document.queryselector（）

You need a string of selectors as arguments , According to one css Selector to query an element node object
The disadvantage is that the method always returns a unique element , If there are multiple elements that meet the condition , Then it will only return to the first ！

var div = document.querySeletor（".box1 div"）;

var box1 = document.querySeletor（".box1"）;

4_③document.querySeletorAll（）

The method and querySeletor（） similar , The difference is that it encapsulates the qualified elements into an array and returns , There is only one who meets the conditions immediately , He also returns an array

var box2 = document.querySeletorAll（".box2"）;