Web API knowledge in JavaScript

catalogue

1. What is web API

2. Basic concepts of DOM

2.1 DOM tree (document object type)

3. Get elements and events

3.1. Get elements

3.2 events

4. Operation element

4.1. Get / modify the content in the element

4.2. Get / modify attributes in elements

4.3. Get / modify attributes in form elements

4.4. Get and modify style attributes

4. How to operate nodes

4.1. Add node

1) Create element node

2) Insert into Dom tree

4.2. Delete node

1. What is web API

API (Application Programming Interface) is some pre-defined functions, which aims to provide the ability for application programs and developers to access a set of routines based on some software or hardware without accessing the source code or understanding the details of the internal working mechanism.

WebAPI concept:
The browser provides a set of APIs (BOM and DOM) for operating browser functions and page elements. The most important thing of Web API is that it can build services for various clients. In addition, different from WCF REST Service, WebAPI uses various aspects of Http protocol to express services (such as URI/request response header/caching/versioning/content format), so it saves a lot of configuration.

2. Basic concepts in DOM

javaScript is divided into three parts

ECMAScript defines the syntax of javaScript

Dom and BOM are a series of API s (DOM is used to operate the contents of the DOM tree and BOM is used to operate the browser window)

2.1 DOM tree (document object type)

Each web page is like a tree structure, which we call DOM tree, as shown in the following figure:

3. Get elements and events

3.1. Get elements

There are two ways to get elements: querySelector and querySelectorAll

 querySelector:

    <div class="box">abc</div>
    <div id="id">abc</div>
    <h3><span><input type="text"></span></h3>
    <script>
        var a=document.querySelector('.box');
        console.log(a);
        var b=document.querySelector('#id');
        console.log(b);
        var c=document.querySelector('h3 span input');
        console.log(c);
    </script>

querySelectorAll: (will become an array)

    <div class="a">qwe</div>
    <div class="b">asd</div>
    <script>
        var num=document.querySelectorAll('div');
        console.log(num);
    </script>

3.2 events

Event has three elements: event source, event type and event handling

Which element triggers the event, the selection of trigger event type, and the process of event processing

    <button class="a">Button</button>
    <script>
        var num=document.querySelector('.a');
        num.onclick=function(){
            alert("hello word");
        }
    </script>

4. Operation element

4.1. Get / modify the content in the element

innerText:

    <div class="a">Button</div>
    <script>
        var num=document.querySelector('.a');
        //Replace content
        num.innerText='qweqwe';
    </script>

 innerHtml:

    <div class="a">Button</div>
    <script>
        var num=document.querySelector('.a');
        //Replace content
        num.innerHTML='qweqwe';
    </script>

Note that the difference between innerText and innerHtml is that innerHtml can change the DOM tree structure, while innerText can only change the content.  

4.2. Get / modify attributes in elements

Get element attributes:

    <img src="123.jpg" alt="people" title="Xuan Xuan">
    <script>
        var num=document.querySelector('img');
        console.log(num.alt);
        console.log(num.title);
    </script>

 

To modify attributes in an element:

    <img src="123.jpg" alt="people" title="Xuan Xuan">
    <script>
        var num=document.querySelector('img');
        num.onclick=function(){
            if(num.src.lastIndexOf('123.jpg')!=-1){
                num.src="12.jpg";
            }else{
                num.src="123.jpg";
            }
        }
    </script>

4.3. Get / modify attributes in form elements

    <input type="button" value="play">
    <script>
        var num=document.querySelector('input');
        num.onclick=function(){
            if(num.value=="play"){
                num.value="suspend";
            }else{
                num.value="play";
            }
        }
    </script>

4.4. Get and modify style attributes

In line style operation:

    <div style="font-size: 20px; font-weight: 700;">ha-ha</div>
    <script>
        var div=document.querySelector('div');
        div.onclick=function(){
            var a=parseInt(div.style.fontSize);
            a+=10;
            div.style.fontSize=a+"px";
        }
    </script>

 

Class name style operation:

        .con{
            width: 100%;
            height: 300;
        }
        .light{
            background-color:aqua;
        }
        .night{
            background-color: antiquewhite;
        }
    </style>
    <div class="con light">
        This is a passage,<br>
        This is a passage,<br>
        This is a passage,<br>
        This is a passage,<br>
    </div>
    <script>
        var div=document.querySelector('div');
        div.onclick=function(){
            if(div.className.indexOf("light")!=-1){
                div.className="con night";
            }else{
                div.className="con light";
            }
        }
    </script>

 

 

4. How to operate nodes

4.1. Add node

1) Create element node

    <div class="con">

    </div>
    <script>
        var div=document.createElement('div');
        div.id='divId';
        div.className='box';
        div.innerHTML='hello word';
        console.log(div);
    </script>

Not shown because it has not been inserted into the Dom tree.  

2) Insert into Dom tree

Insert after:

    <div class="con">

    </div>
    <script>
        //add to
        var div=document.createElement('div');
        div.id='divId';
        div.className='box';
        div.innerHTML='hello word';
        console.log(div);

        //Insert after
        var con=document.querySelector('.con');
        con.appendChild(div);
    </script>

 

Insert before:

    <div class="con">
        <div>aaaaa</div>
        <div>aaaaa</div>
        <div>aaaaa</div>
        <div>aaaaa</div>
    </div>
    <script>
        //add to
        var div=document.createElement('div');
        div.id='divId';
        div.className='box';
        div.innerHTML='hello word';
        console.log(div);

        //Front insert
        var con=document.querySelector('.con');
        con.insertBefore(div,con.children[0]);
    </script>

 

Middle insertion:

con.insertBefore(div,con.children[n]);

 

4.2. Delete node

    <div class="con">
        <div>aaaaa</div>
        <div>aaaaa</div>
        <div>aaaaa</div>
        <div>aaaaa</div>
    </div>
    <script>
        //add to
        var div=document.createElement('div');
        div.id='divId';
        div.className='box';
        div.innerHTML='hello word';
        console.log(div);

        //insert
        var con=document.querySelector('.con');
        con.insertBefore(div,con.children[0]);

        //Delete node
        var c=con.removeChild(con.children[0]);
    </script>

Keywords: Javascript ECMAScript

Added by Grizzzzzzzzzz on Wed, 09 Feb 2022 04:58:06 +0200