1. DOM Basic Introduction
1 What is the DOM
the DOM of English called the Document Object Model, translated into Chinese is the document object model. In other words, the entire document as an object. And in turn, a document consisting of many nodes, those nodes can also be seen as one object. The DOM object belongs host object browser is required as a host. Once out of the browser environment, the object will cease to exist. Similarly, the last chapter we introduced BOM, too, need a browser as a host, so it is also a host object.
DOM role as follows:
manipulate HTML content of the document provides application-browser interface
· Documentation for dynamic operation, such as increasing the content of the document, delete the contents of the document, modify the content of the document, etc.
2 DOM history
DOM Level 0:
First, we need to determine is in the DOM standard does not DOM0 level this level. Called
the DOM0 DOM level is a reference point in the history of the coordinates of it, how should I say, DOM0 level refers to the IE4 and N etscape 4.0 of these browsers are initially supported by DOM-related methods. The main focus on the common page elements such as images, links and forms. Now some of those images and forms, currently still can be used in the current release of the DOM.
DOM Level 1:
in October 1998 to become a W3C Recommendation. DOM1 stage consists of two modules: DOM core (DOM Core) and DOM HTML. This version introduces a complete model of the web page, allowing navigation in each section of the page.
DOM Level 2:
for DOM level 1 did expand, published in 20001 years, the introduction of the popular getElementById () method, allowing access to specific elements on web pages easier.
DOM Level 3:
for DOM level 2 made a further extension was published in 2004.
3 node type and node name
- by a large number of documents are composed of nodes. And each node has a property called the nodeType, used to indicate the type of node. Different node types corresponding to different values, specific values corresponding to the following table:
node name corresponding to the numerical
Wu pixel point P Node.ELEMENT_NODE (1)
an attribute node Node.ATTRIBUTE_NODE ⑵
text node ⑶ Node.TEXT_NODE
CDATA node Node.CDATA_SECTION_NODE ⑷
entity reference name node Node.ENTRY_REFERENCE_NODE (5)
entity name node Node.ENTITY_NODE (6)
processing instruction node Node.PROCESSING_INSTRUCTION_NODE (7)
comment node Node.COMMENT_NODE (8)
document node Node.DOCUMENT_NODE (9)
the type of document nodes Node.DOCUMENT_TYPE_NODE ( 10)
document fragment node Node.DOCUMENT_FRAGMENT_NODE (. 11)
(12 is) the DTD declaration node Node.NOTATION_NODE
different nodes correspond to a different node types, we can obtain the node type of the node through nodeType property
nodeType property can be used in conjunction with, and if to ensure that the error does not perform an operation on the wrong type of node
In addition to obtaining a type other than the node, we can also obtain the name of the node through nodeName property,
may be used to obtain an element node nodeValue text value
2. The use of the old DOM
1 document.body
returned page <body> element
2 document.images
returns a node list of all the document images
can be like an array to get each picture element
3 document.links
returns a node <a> all elements with an href attribute and <area> element in the list
4 document.anchors
return all have va name attribute> element in a list of nodes
5 document.forms
return all documents in the form of a list of nodes
3. quickly find node
1 getElementById ()
to quickly lock the node id of a value of
2 getElementsByTagName ()
to pass the name of the label Quick Find node, but to find nodes by tag name is a way to get a list of nodes, we need to locate a specific node by a manner similar to the array.
GetElementsByClassName 3 ()
className, as the name suggests, is to find the elements by class name. And we know, is the name of the class can have the same, so in this way the return will be a list of elements,
4 document.getElementsByName ()
This method can be used to access the element corresponding to the node name values. Since the node name allows the same value, so this method will return a list of nodes.
5 document.querySelector ()
This is a new HTML5 lookup node method biggest feature is that it can to find the first element in the document matched by CSS syntax, note that only the first element!
6 document.querySelectorAll ()
compared to the above methods this one more All identifier, we can guess, this is the return of all the elements to meet the requirements, or use the same CSS syntax to find
4. Find the relationship between nodes
1 childNodes property
each node has a childNodes attribute, wherein an array of object class holds a NodeList. This object contains all the child nodes below the node. NodeList objects are automatically changed.
2 children property
children only property returns a node following all the child element node, it will ignore all text nodes and blank node
3 firstChild lastChild and
then we'll start with these two attributes are, respectively, the first access node a child node and the last node, the following example:
<body>
<P ID = "test1" class = "ABC"> Lorem ipsum dolor amet SIT </ P>.
<P ID = "test2"> Lorem ipsum dolor SIT amet. </ P>
<HR EF = A ""
<Li> ITEM1 </ Li>
<Li> ITEM2 </ Li>
<Li> Item3 </ Li>
</ UL>
<Script>
the let I = document.getElementById ( "Test3"); the console.log (i.firstChild );
</ Script>
</ body>
effect:
► #text
can see here on the visit to the <ul> following the first child, but in fact this is a blank node node, what does that mean? That is the DOM inside spaces and line breaks will be seen as a node. Such a node is called a blank node. If I now the gap between the <ul> element and vli> element to be deleted, then it should be the first child for the <ul> following the first <li>, as follows:
<body>
<the p-the above mentioned id = "test1" class = "ABC"> Lorem ipsum dolor amet SIT. </ P>
<P ID = "test2"> Lorem ipsum dolor amet SIT. </ P>
<a HR ef="" class="abc"> link </a> 1
<ul the above mentioned id = "Test3">
<li>
the console.log (i.firstChild);
</ Script>
</ body>
effect:
<li> iteml </ Li>
time <ul> following the first child element becomes the first <li> element.
If you want the underlying HTML structure before keeping on acquiring the first content <li> elements, then it is only to find layers of down, as follows:
<body>
<the p-the above mentioned id = "test1" class = "abc"> SIT amet ipsum dolor Lorem. </ P>
<P ID = "test2"> Lorem ipsum dolor amet SIT. </ P>
<a HR ef="" class="abc"> </a> link. 1
<UL ID = "Test3">
<Li> ITEM1 </ Li>
<Li> ITEM2 </ Li>
<Li> Item3 </ Li>
</ UL>
<Script>
the let I = document.getElementById ( "Test3"); Console. log (i.firstChild.nextSibling.firstChild);
<
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test3"); console.log(i.lastChild);
</script>
</body>
效果：
► #text
This is also acquired with a blank node
4 parentNode
Get parent node's attributes
5 previousSibling and the nextSibling
PR eviousSiblings property returns a neighboring node before under the same parent node. If the node has a parent node of the first
node, it returns null, the following example:
<body>
<P ID = "test1" class = "ABC"> Lorem ipsum dolor SIT amet.v / P>
<P ID = "test2"> Lorem ipsum dolor SIT amet.v / P>
<a HR ef="" class="abc"> </a> link. 1
<UL ID = "Test3">
<Li> item1v / Li>
<Li > item2v / Li>
<Li> item3v / Li>
</ UL>
<Script>
the let I = document.getElementById ( "Test3");
the console.log (I);
the console.log (i.previousSibling.previousSibling);
</ Script>
</ body>
Effect:
► <UL ID = "Test3"> ... </ UL>
<a class=,,abc"> the href link l < / a>
double-write pr eviousSiblings, you can skip the first blank node, navigate to va> node.
next we look at nextSibling, nextSibling property returns the next adjacent nodes of the same parent node as
if the node is Finally, a parent node, then return null, the following example:
<body>
<P ID = "test1" class = "ABC"> Lorem ipsum dolor SIT amet.v / P>
<P ID = "test2"> Lorem ipsum SIT amet.v dolor / P>
<a HR ef="" class="abc"> link 1V / A>
<UL ID = "Test3">
<Li> item1v / Li>
<Li> item2v / Li>
<Li > item3v / Li>
</ UL>
<script>
let i = document.getElementById("test1"); console.log(i.nextSibling.nextSibling);
</script>
</body>
Effects: Here is the same, if only to write a nextSibling, then access to the node is a blank, twice in succession, skip this blank node, access to the next element node.
<P ID = "test2, L> Lorem ipsum dolor SIT amet · </ P>
. 6 previousElementSibling and nextElementSibling
to wrap the front and rear is also counted as a blank node, such processing does have too much trouble. So, now adding on
the pr eviousElementSibling and nextElementSibling these two properties, a query for directly ^ node
on a next element or node, the following example:
<body>
<P ID = "test1" class = "ABC"> Lorem ipsum dolor amet SIT . </ P>
<P ID = "test2"> Lorem ipsum dolor amet SIT. </ P>
<a HR ef="" class="abc"> link 1 </a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
let i = document.getElementById("test2"); console.log(i.previousElementSibling);
</script>
</body>
效果：
<p id=l,testl" class^'abc'^Lorem ipsum dolor sit amet・</p>
再来看一^? nextElementSibling属性的例子
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a hr ef="" class="abc"> 链接 1</a>
<ul id="test3">
<li>item1v/li>
<li>item2v/li>
<vli>item3v/li>
</ul>
<script>
let i = document.getElementById("test2"); console.log(i.nextElementSibling); </script>
</ body>
Effect:
The node operation
creating and adding nodes to a
method for the createElement () allows us to create a node element
insertBefore () is added in front of the node
2 deletion node
syntax deletion node is as follows:
parent node .removeChild (child nodes)
3 replaced node
syntax is as follows:
parent .replaceChild (new node, old node)
4 clone node
clone clone node into shallow and deep clone, only need to cloneNode () method passing a Boolean value that can be realized shallow and deep cloning clones.
The syntax is as follows clone node:
node .clone (Boolean value)
shallow clone
so-called shallow clone is a clone pointed to a node, the node is just a clone of it, false method parameters into
a deep clone of
so-called deep clone, it refers to a copy node and its child nodes, need to pass the Boolean value is true.
5 document fragments
earlier, we have learned to add nodes to the document inside, but there is a problem, that is, if you want to add a large number of nodes, then this method will be added individually seem inefficient, because it will add a node to refresh the page . This time, we can use cr eateElementF ragment DOM provided inside () method, add the first node in a document fragment inside, and then finally one time added to the document inside
6 to create a note node
provides to create a note nodes in the DOM methods createComment (), you can use this method to create a note
7 real-time collection
Information node is changed in real time. For example, if we add or remove a node, then when we visit the length of the parent node we will soon have to change
there is a pit, using the previous DOM methods, such as document.getElementsByTagName to get to the real-time collection of elements and returns HTMLCollection, and use the new que rySelecto rAll to get to the real-time collection of elements is not set back to a NodeList, the length is not updated in real time.
6 quick access to the contents of the node
1 innerHTML innerText and
text values for obtaining innerText element node, and is used in all nodes innerH TML following user element things, including H TML label.
Modify bod y inside the node content, I do not need to painstakingly remove the existing node, then create a new node these steps and i nnerHTML modify the contents of the can body, very convenient and simple
2 textContent (extension)
through the property, we can get directly to the text content of an element node
innerText face also seemed to get the element node text value, both what is the difference?
The main difference is in the following points:
• textContent will get style = "displaymone11 in the text, but not innerText
• textContent will get style tags inside the text, but not innerText
• innerText for IE compatibility better
• textContent though but as the standard method only supports IE8 + above browsers
6. quick access node content
1 and the innerHTML the innerText
the innerText for acquiring text of the node element value
and innerH TML is used for all user nodes following elements things, including H TML tag
operating properties and 7. Class
1 operation element property related methods (extended)
to get and set element properties
getAtt ribute () to get the name suggests is an element node property value
setAtt ri bute () is to set the property value of an element node
deleting element attributes
using removeAttribute DOM provided inside () method to delete, passed directly to be deleted property name as an argument to
use removeNamedItem () method to remove the property, is the same with the first set of attributes to the element node acquisition of property
acquired property index
item () method, which is also used on the basis of a set of attributes, incoming parameter is a number, can be positioned to a certain property of the above,
the class 2 element related operations (expansion)
of the DOM can classList to obtain an element node all classes
to obtain the DOM element by className this attribute class, the value returned is a string
add class
DOM which also adds a new add () Rapid method to add an element to the Node Class
remove class
to remove an element node by remove () method of the class, it is to be used to set the above classes classList
handover class
Toggle () method is a very useful method can be used to switch the class. If the element node did not give the class, add the class, if that class, delete class. If the class is added, it returns true, if it is deleted, it returns false.
Element property general procedure 3
to operate the attributes and classes through the point
where we set up by the point attribute of the DOM element, in general, this is the recommended way to access or set properties. But some exceptions, because in this way can only be set or access the values inherent properties of the label, but it is self-defined attributes can not get or set. For example, set the name attribute to the <p> element can not succeed, because the <p> element itself is no name attribute. If setAtt ri bute method can row.
Also to note is that the keyword named property also needs special treatment, such as class and for property.
If a class attribute, because it is a keyword, so it is necessary to operate by className (The above has been introduced), if the property is for, because this is a key, so they need to be operated by htmlFor.
4 custom properties
custom properties, according to norm H TML5 should make use of data - as a prefix, such as a <p> element is added - Power custom attributes, data-power should be set to
obtain data- properties, which can use the DOM the getAtt ribute () method to obtain the
dataset property of the tag in
test1.dataset.power = 'high speed';
this dataset is each element node has a property that refers to the beginning of all data- set of properties. But Gets or sets the time does not need to add the prefix.
Each node has a dataset element attributes, all of which points to the beginning of the data- set of properties. However, when acquiring or setting does not need to add the prefix
name data- attribute contains a hyphen, then you need to use camel nomenclature
8. Operation CSS
tylE properties by this property you can modify any element nodes style rules
in CSS inside Some properties are spaced bars using, for example: background-color, whereas if the DOM to modify the style of use, the need to modify the hump nomenclature, i.e. the backgroundColor
9. the operation of table
1 columns and rows of the table acquired
by rows and cells to get to a target table row and column
, if required the table inside the content, only the particular target cells and then re-assignment to
the content of the table 2 traverse the
contents of the table is traversed using a double loop for Walsh
3 new table into rows and columns of
the insertRow () and the insertCell () method to insert two rows and columns of the table, the following syntax:
inserRow (position): insert a specified position in the table on ^ a new line object.
insertCell (postion): Insert a new cell in the rows collection specified position.
4 delete rows and columns
deleteRow (postion): delete the specified row position on the table object.
deleteCell (postion): Deletes the specified position on a cell in the rows collection.
Table 5 Other properties and methods
property or method table action
caption point <caption> element (if present)
tHead point <thead> element (if present)
tBodies point <tbody> element (if present)
tFoot can point <tFoot> element (if present)
rows forms the set of all rows of
cells - which all cells of the row set
createCaption. Create a <caption> element and place it in the form
createTHeadO create <thead> element and place it in the form
createTFoot. Create a <tFoot> element and place it in the form
deleteCaption. Delete <caption> element
deleteTHead () delete the <thead> element
deleteTFoot. Delete <tFoot> element
insertRow (postion) at a predetermined position of the table object on the insert a new row
line designated position on deleteRow (postion) Remove table object
insertCell (postion) insert a new cell location specified in the rows collection on
deleteCell (postion) deleting a cell in the specified position on the rows collection