Document Object Model (DOM) uses the API defined by W3C (Application Program Interface) to manipulate HTML documents (not limited to HTML, but also XHTML, XML, etc.) so that users can interact with pages.

It uses object representation to represent the corresponding document structure and its contents.

By using the API (Application Program Interface) provided by DOM, the node can be dynamically modified, that is, the direct operation of DOM tree. JavaScript is used in browsers to implement changes to DOM trees.

Dynamic modification nodes can be divided into two steps: 1. Finding a node or label 2. Operating on the label.

I. Finding Elements

1. Direct search

document.getElementById retrieves a label based on ID
document.getElementsByName retrieves the tag set based on the name attribute
document.getElementsByClassName retrieves tag sets based on class attributes
Document. getElements ByTagName retrieves the tag set based on the tag name

2. Indirect search

// Contains text in the middle of the tag
parentNode          // Parent node
childNodes          // All child nodes
firstChild          // First child node
lastChild           // Last child node
nextSibling         // Next sibling node
previousSibling     // Last sibling node
 
//Does not contain text in the middle of the label
parentElement           // Parent Node Label Element
children                // All sublabels
firstElementChild       // The first sublabel element
lastElementChild        // Last sub-label element
nextElementtSibling     // Next Brother Label Element
previousElementSibling  // Last Brother Label Element

II. Operation

1. Content

innerText   Pure text
outerText
innerHTML   HTML content,Can include labels
outerHTML  
value       Selected values for form labels

2. Attributes

attributes                // Get all tag attributes
setAttribute(key,value)   // Setting label properties
getAttribute(key)         // Gets the specified label attribute
 
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/

3. class operation

className                // Get all class names
classList                // Get all class names in list form
classList.remove(cls)    // Delete the specified class
classList.add("cls")       // Adding classes

document.getElementById('gettxt').classList
>> ["c1","hide"]

4. Label operation

a. Create Tags

// Mode I
var tag = document.createElement('a')
tag.innerText = "dyan"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/***"
 
// Mode 2
var tag = "<a class='c1' href='http://www.cnblogs.com/***'>dyan</a>"

b. Operation label

// Mode I
var obj = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 
//Note: The first parameter can only be'before Begin','after Begin','before End','after End'.
 
// Mode 2
var tag = document.createElement('a')
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])

5. Style operation

var obj = document.getElementById('i1')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="Please enter keywords" style="color: gray;" />

<script>
   function Focus(ths){
       ths.style.color = "black";
       if(ths.value == 'Please enter keywords' || ths.value.trim() == ""){

           ths.value = "";
       }
   }

   function Blur(ths){
       if(ths.value.trim() == ""){
           ths.value = 'Please enter keywords';
           ths.style.color = 'gray';
       }else{
           ths.style.color = "black";
       }
   }
</script>

6. Location operation

Total Document Height
document.documentElement.offsetHeight
  
Current document occupies screen height
document.documentElement.clientHeight
  
Self-height
tag.offsetHeight
  
Location Height of Distance Superior
tag.offsetTop
  
Father Location Label
tag.offsetParent
  
Rolling Height
tag.scrollTop
 
/*
    ClientHeight - > Visible area: height + padding
    ClientTop - > Border Height
    OffsetHeight - > Visible area: height + padding + border
    Height of offsetTop - > Superior Location Label
    Scroll Height - > full text high: height + padding
    ScrollTop - > scroll height
    Special:
        Document Element refers to the root node of a document.
*/

7. Submitting Forms

document.geElementById('form').submit()

8. Other operations

console.log output box
alert pop-up box
confirm confirmation box
  
// URL and refresh
location.href gets the URL
Location. href = URL redirection
Reload () reload
  
// Timer
setInterval multiple timer
clearInterval clears multiple timers
setTimeout single timer
Clear Timeout Clears Single Timer

III. Events

Points for attention in the event:
a binding

Mode I
<button onclick="displayDate()">Try </button>

Mode 2
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

b event triggering

this tag is currently in operation, and event encapsulates the content of the current event

• this triggers the label of the current event
• Event triggers the event content keycoode of the current tag
• Event chains and jumpouts
• Custom Events > Default Events

<a href ="http://baidu.com" onclick="return Func();">sou baidu</a>
// Custom event priority is greater than default event
// Prevent default events plus return 
<script>
function Func(){
    alert(Turn to Baidu)；
    return false；  //true executes default events, false does not execute default events
}
</script>