当前位置：网站首页>Summary of DOM knowledge points

Summary of DOM knowledge points

2022-06-11 23:41:00 【Mg Fuwan】

DOM-Document Object Model

Summary of some knowledge points , Don't talk much , Code up

1.DOM Query the remaining methods

 <script>
        window.onload = function () {
            // obtain body label 
            //var body = document.getElementByTagName("body")[0];
            // stay document There is a property in body, What it keeps is body References to 
            var body = document.body;

            // document.documentElement What is kept is html label 
            var html = document.documentElement;
            console.log(html);

            //document.all Represents all elements of the page 
            var all = document.all;  Of the underlying element class attribute chaxunyi

            // According to the class Property to query a set of element node objects 
            //getElementsClassName() Are not compatible ie8 And the following 
            var box1 = document.getElementsByClassName("box1");
            console.log(box1.length);

            // Gets all of the div
            var divs = document.getElementsByTagName("div");

            /*
             * document.querySelector()
             * - You need a string of selectors as arguments , According to css Selector to query an element node object 
             * - although ie8 There is no getElementsByClassName(), But it can also be used querySelector() Instead of 
             * - Using this method will return the only element , If there are more than one element that satisfies the condition , Then he will only return to the first 
             */
            var div = document.querySelector(".box1 div");
            var box1 = document.querySelector(".box1");
            /*
             * document.querySelectorAll()
             * - Methods and querySelector() Usage is similar. , The difference is that it encapsulates the qualified elements into an array 
             * - Even if there is only one qualified element . It also returns an array 
             * 
             */
            var box1=document.querySelectorAll(".box1");
        }
    </script>
</head>

<body>
    <div class="box1">
        <div> first </div>
    </div>
    <div class="box1">
        <div> the second </div>
    </div>
    <div class="box1">
        <div> Third </div>
    </div>
</body>

2.DOM Additions and deletions

Write a few specific case To deepen understanding

// Create a " Guangzhou " node , Add to #city Next 
myClick("btno1",function(){
    // Create Guangzhou node <li> Guangzhou </li>
    // establish li Element nodes 
   
     // You can create an element node object 
    // You need a tag name as a parameter , The element node object will be created according to the tag name 
    // And return the created object as the return value 
   var li= document.createElement("li");
   
   // Create Guangzhou text node 
   //document.createTextNode()
   // Can be used to create a text node object 
   // Need a text content as a reference , A text node will be created based on this content , And return the new node to 
   var geText= document.createTextNode(" Guangzhou ");
    
    // take geText Set up li Child nodes of 
    // Add a new child node to a parent node 
    // usage : Parent node .appendChild( Child node )
    li.appendChild(gzText);
    
    // take " Guangzhou " Add to city Next 
    city.appendChild(li);
;})

// Insert Guangzhou into #bj Before 
myClick("btn02",function(){
    // Create a Guangzhou 
    var li=document.createElement("li");
    var gzText=document.createTextNode(" Guangzhou ");
    li.appendChild(geText);
    // obtain id by bj The node of 
    var bj=document.getElementById("city");
    // obtain city
    var city=document.getElementById("city");
    //insertBefore()
    //-- You can insert a new child node before the specified child node 
    // grammar :
    // Parent node .insertBefore( New node , Old node )
    city.insertBefore(li,bj);
})
//replaceChild()
// You can replace an existing child node with a specified child node 
// grammar : Parent node .replaceChild( New node , Old node );

//removeChild()
//-- You can delete a child node 
//-- grammar : Parent node .removeChild( Child node );
// Can also be   Child node .parentNode.removeChild( Child node )

bj.parentNode.removeChild(bj);

// towards city Add Guangzhou 
var city=document.getElementById("city");
// Use innterHTML It can also be done DOM Operations related to the addition, deletion and modification of , If the action is too big, we usually combine the two methods 
//city.innterHTML+="<li> Guangzhou </li>"

var li=document.createElement("li");
li.innterHTML=" Guangzhou ";

原网站

版权声明
本文为[Mg Fuwan]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206112339238966.html