当前位置：网站首页>Web API、DOM

Web API、DOM

2022-06-11 06:55:00 【A Xuan is going to graduate~】

One ：WEB API and js The associated .

1.js It is divided into ECMAScript and DOM、BOM.js Fundamental is ECMAScript, Mainly js Basic grammar .WEB API The main thing to learn is DOM and BOM.

js Based on learning ECMAScript Basic grammar paves the way for the following ,WEB APIs yes JS Application , A lot of use JS Basic grammar to do interactive effects .

2.API and WEB API

（1）API Simple understanding ：API Is a tool provided by programmers , In order to realize the desired function more easily .

（2）WEB API

Two 、DOM Reading guide

2.1 DOM brief introduction

2.2 DOM Some proper nouns of ：

DOM Trees ：

file ： A page is a document .DOM Use in doucument Express

Elements ： All tags in the page are elements ,DOM Use in element Express

node ： Everything in the page is a node （ label 、 attribute 、 Text 、 Notes, etc. ）,DOM Use in node Express .

2.3 Get elements

There are several ways to get the elements in the page ：

2.3.1 according to ID obtain .

Use getElementById(); To get

（1） Because the document page loads from top to bottom , So first you have to have a label . therefore script Write it under the label .

（2） Parameters id Is a case sensitive string

（3） It returns an element object , Can pass typeof Variable name Check it out. , Back to a object

（4）console.dir（ Variable name ） Print the elements of the object Better view the properties and methods inside .

<body>
    <div id="time">2010-9-9</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);// Output timer Properties and methods of .
    </script>
</body>

2.3.2 Get... According to the tag name

Use getElementsByTagName() Method can return a with the specified tag name A collection of objects .

（1） What is returned is the collection of obtained element objects , With Pseudo array Form storage of

（2） You want to print the element object in it , You can use traversal output . The resulting element object is dynamic .

give an example ：① hypothesis ul Multiple... Are stored in li Elements , Want to get multiple li Elements .

have access to document.getElementsByTagName('li'); Get... In the entire document li Elements .

② hypothesis ul Store multiple... In li Elements ,ol Multiple... Are also stored in li Elements .

If you want to get the li, have access to document.getElementsByTagName('li');

If you want to get ol Under the li, have access to element.getElementsByTagName('li'). First of all get var ol = document.getElementsByTagName('ol'); then console.log（ol[0].getElementsByTagName('li')）.// Premise , There is only one... In the whole page ol. Why use [0] Well , because ol Get an array , Not an element , So write it [0]
Or to ol Add one more id, Through the first var ol = document.getElementById(id name ), Re pass ol.getElementsByTagName('li') obtain li Elements .

2.3.3 Get elements by class name . Be careful ：H5 Newly added .

getElementsByClassName()// Returns the collection of element objects according to the class name

2.3.4 Select by selector , It's also H5 Newly added .

（1）document.querySelector(' Selectors ')// According to the specified selector The first element object . Remember that the selector inside needs to be signed .

document.querySelector('. Class name ')
document.querySelector('#id')
document.querySelector(' Tag name ')

（2）document.querySelectorAll(' Selectors ')// Returns all element objects of the specified selector .

2.4 Get special elements （body、html）

Can be set by id To get , however body and html There is only one page . Therefore, the method is also provided .

2.4.1 obtain body Elements .

var bodyEle = document.body

2.4.2 obtain html Elements

var htmlEle = document.documentElement;

2.5 event

A mechanism for triggering a response , Every element in a web page can trigger js event .

2.5.1 Composition of events （ Event source 、 Event type 、 Event handler Also known as the three elements of events ）

（1） Event source ： The event is triggered by

（2） Event type ： How to trigger , What event ： Mouse click （onclick）、 Mouse over 、 Roller, etc

（3） Event handler ： Through a function assignment to complete

Case study ：

<body>
    <button id = "btn"> Tang Bohu </button>
    <script>
        var btn = documnent.getElementById('btn');// Event source 
        btn.onclick = function(){// Event type 、 Three elements of the event 
            alert(' Some autumn fragrance ');
        }
    <script>
</body>

2.5.2 Steps to execute the event ：

Get the event source
The binding event （ Registration events ）onclick
Add event handler btn.onlick = function(){.....}

2.6 Operational elements

2.6.1 Modify element content

<body>
    // Press the button ,div Display the current system event time ,p The tag directly displays the current system event .
    <button> Displays the current system event </button>
    <div> Display time </div>
    <p></p>
    <script>
        var btn = document.querySelector('button');
        var div = document.quertSelector('div');
        btn.onclick = function(){
            div.innerText = '2019-06-06';// Or use the previously written function to get the current system event .
        }
        var p = document.querySelector('p');
        p.innerText('2019-06-06')
    </script>
</body>

innerText and innerHTML The difference between ：

They are both readable and writable .

When writing ：

（1）innerText Don't recognize html label . If you write with html label , Will write it out . Nonstandard

（2）innerHTML distinguish html label . If you write , with html label , For example, make the font bold , It will recognize , And make the font bold . W3C standard .

When reading ：

（1）innerText No display HTML label . Remove spaces and line breaks at the same time . Nonstandard

（2）innerHTML Show html label . Keep spaces and wrap .W3C standard .

2.6.2 Modify element properties

<body>
    // Click on different buttons , Show different pictures 
    <button id="ldh"> Lau Andy </button>
    <button id="zxy"> Jacky Cheung </button>
    <img src="images/ldh.jpg" alt="" title=" Lau Andy ">

    <script>
        // modify img in src Properties of 
        //1. Get elements 
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelectors('img');
        //2. The binding event 
        zxy.onclick = function(){
            img.src = 'images/zxy.jpg';
            img.title = ' Lau Andy ';
        }
        ldh.onlick = function(){
            img.src = 'images/ldh.jpg';
            img.title = ' Jacky Cheung ';
        }
        
    </script>
</body>

Case study ： Time sharing displays different pictures .（ I have done some exercises . Pay attention to the problems encountered .innerText It's not a function , It's an attribute .）

2.6.3 Attribute operations of form elements

Form element properties ：<input type="" value=" Input content " checked selected disabled>

<body>
    <button> Button </button>
    <input type="text" value=" Input content ">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        
        btn.onclick = function(){
            input.value = ' By clicking the ';
            //  If a form is disabled . No more clicks , It can be used disabled This attribute . Can be button Ban 
            //btn.disabled = true; Both writing methods can be .
            this.disabled = true;//this It points to the caller of the event function .
        }
    </script>
</body>

Case study ： Imitation Jingdong shows and hides password plaintext cases

Imitation Jingdong show hidden password plaintext case code and ideas https://blog.csdn.net/xuan971130/article/details/1232108832.6.4 Modify style properties

<head>
    <style>
        div{
            width: 200px;
            height:200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            this.style.backgroundColor = 'red';
        }
    </script>
</body>

js The style in adopts the hump naming method ： such as fontSize、backgroundColor
js modify style Style operation , In line style ,css The weight is relatively high .js Style modified in , Will be promoted to the inline style , The weight is relatively high .

Case study 2： The case of imitating Taobao relationship QR code

Imitation Taobao closed QR code ideas and code https://blog.csdn.net/xuan971130/article/details/123212449 Case study 3 Imitation Taobao shows the spirit figure

原网站

版权声明
本文为[A Xuan is going to graduate~]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203020525261046.html