DOM Foundation

One 、 Concept

• yes JavaScript operation HTML Document interface Its full name is Document object model (Doucment Object Model)
• effect ： Translate the code in the document into an object model So you can use scripts to do all kinds of operations
• All relevant tag attributes, annotation text, etc. in the model 12 All kinds of data will be translated into one type of object Generally referred to as the Node object
• Browser according to DOM Model , take HTML The document is parsed into a series of nodes , Then these nodes form a tree structure
• DOM The smallest component unit of is the node (node), The tree structure of the document (DOM Trees ) from 12 There are three types of nodes

12 Types of nodes ： Element nodes 、 Document nodes 、 Document type node 、 Document fragment node 、 Text node 、 Comment node 、 Characteristics of the node 、CDATA node 、 Entity name node 、 Entity reference name node 、 Processing instruction node 、DTD Declaration node

 DOM Trees ：

Two 、 How to get elements

（ One ） The method provided by the system

  The old way

• document.getElementById

<div id="box1">  The box box1</div>

<script>
var div1=document.getElementById("box1") // If not, go back null
console.log(div1)   // Return a specific element 
</script>

• document.getElementsByClassName

<div class="box2"> The box 2-1</div>
<div class="box2"> The box 2-2</div>
<div class="box2"> The box 2-3</div>

<script>
var arr = document.getElementsByClassName("box2")
console.log(arr) // The return value is an array of classes   It's a data container   installed 3 A class named box2 Of div
</script>

• document.getElementsByName

<input type="radio" name="rad">
<input type="radio" name="rad">
<input type="radio" name="rad">

<script>
var name = document.getElementsByName("rad")
console.log(name)
</script>

• document.getElementsByTagName

<div> The box 1</div>
<div> The box 2</div>
<div> The box 3</div>

<script>
var tag = document.getElementsByTagName("div")
console.log(tag) // The return value is an array of classes   It's a data container   installed 3 individual div
</script>

   H5 A new method

• document.querySelector

<div id="box"> The box 1</div>
<div id="box"> The box 2</div>
<div id="box"> The box 3</div>

<script>
var el = document.querySelector("#box") // Select the first element that matches the selector   Return on no null
console.log(el) // first div  The box 1
</script>

• document.querySelectorAll

<div id="box"> The box 1</div>
<div id="box"> The box 2</div>
<div id="box"> The box 3</div>

<script>
var els = document.querySelectorAll(".box2") // All elements that match the selector   No return null
console.log(els) // All of the div  The box 1、2、3
</script>

    notes ：h5 The new method is better however document.getElementsById() It's the fastest

（ Two ） The direct acquisition method provided by the system

• document.body        //body label （ Commonly used ）
• document.forms       //form formset
• document.anchors   //a Tag set
• document.images    // Photo gallery
• document.links        // Connection set
• document.URL        // The URL of the current document

（ 3、 ... and ） The method of obtaining through relation

    Example html Code :

<div id="box1">
  <div class="box2" id="box">2</div>
  <div class="box2">
     <div class="box3" id="box3">3</div>
  </div>
  <div class="box2" id="box4">4</div>
</div>

• Parent The parent element and the parent node are the same

// With id by box Of div Benchmarking   Get its parent node 
var box = document.querySelector('#box')
var boxpe = box.parentElement  // Parent element 
var boxpd = box.parentNode    // Parent node 

• Sub level Child elements and child nodes are not necessarily the same

// With id by box1 Of div Benchmarking   Get its child nodes 
var box1 = document.querySelector('#box1')
var els = box1.children // Sub elements   Is an array of classes   Include 3 individual div Elements 
console.log(els)    //HTMLCollection(3) 0: div#box.box2  1: div.box2  2: div#box4.box2
var nodes = box1.childNodes // Children   Is an array of classes   Include 3 individual div Element nodes and document nodes 
console.log(nodes)  //NodeList(7) 0: text  1: div#box.box2   2: text  3: div.box2
                    //            4: text  5: div#box4.box2  6: text
 With id by box Of div Benchmarking   Get its child nodes 
var box = document.querySelector('#box')
var bc = box.children
console.log(bc) //HTMLCollection(0)  Return an empty data container 

• Brother node

   Last brother ： previousElementSibling  Last brother element No return null

                          previousSibling                Last sibling node No return null

// With id by box4 Of div Benchmarking   Get its brother （ the previous ） node 
var box4 = document.querySelector('#box4')
var bel = box4.previousElementSibling // Last element 
console.log(bel)   // class="box2" Of div
var bnode = box4.previousSibling // Last node 
console.log(bnode) //#text

  Next brother  ： nextElementSibling    Next brother element No return null

                          nextSibling                   Next sibling node No return null

// With id by box Of div Benchmarking   Get its brother （ next ） node 
var box = document.querySelector('#box')
var bne = box.nextElementSibling // The next element 
console.log(bne)
var bns = box.nextSibling // Next node 
console.log(bns)

// With id by box4 Of div Benchmarking   Get its brother （ next ） node 
var box4 = document.querySelector('#box4')
var bne = box4.nextElementSibling // The next element 
console.log(bne) //null

• The first 1 Child node

var box=document.getElementById("#box")
var fs1=box.firstChild           // The first 1 Child node 
var fs11=box.firstElementChild   // The first 1 Sub elements 
console.log(fs1,fs11)  // "2"  null

• The last child node

var box4=document.getElementById("#box4")
var ls1=box4.lastChild           // The last child node 
var ls11=box4.lastElementChild   // The last child element 
console.log(ls1,ls11)   // "4"  null

• Get how many child elements you are in the parent element / node

// Implement this method by yourself : The caller is the number of elements in the parent element  .index()                        
 Object.prototype.index1=function() {
     console.log(this)
     var arr=this.parentElement.childNodes
     for (let i = 0;i<arr.length;i++) {
         if(this==arr[i]){
             return i
            }
     }
 }
 var index=document.getElementById("box").index1()
console.log(index)

// Another way 
var son1=document.getElementById("box1").children[1]   // The second child element 
var son2=document.getElementById("box1").childNodes[1] // The second child node