JavaScript--Web APIs study notes (1) basic stage + acquisition element + operation element

The basic grammar of ECMAScript paves the way for the future, and Web APIs is an application of js, which uses a lot of basic grammar of JS for interactive effects.

Learn DOM and BOM in the Web APIs phase.

①BOM: Brower Object Model (browser object model), change the content structure and style of web pages

②DOM: Document Object Model (Document Object Model)

API (Application Programming Interface, Application Programming Interface)

Web API is a set of APIs (BOM, DOM) provided by browsers to operate browser functions and page elements

MDN详细API：https://developer.mozilla.org/zh-CN/docs/Web/API

Two, DOM basics - get elements

1. Get the element getElementByld to get the element object with ID

Returns an element object matching a specific ID. Since the ID of an element is required to be unique in most cases (ID is case-sensitive), this method naturally becomes an efficient way to find a specific element.

    <div id = 'time'>2022-4-7</div>
    <script>
        //get获取element元素，通过by，ID方法
        timer = document.getElementById('time');
        console.log(timer);
        console.dir(timer);//console.dir返回的是元素对象，更好查看里面的属性和方法
    </script>

2. getElementByTagName() to get a certain type of tag element

The list obtained by document.getElementByTagName() is a pseudo-array, which returns a collection of element objects

Example 1: Get the label li

    <ul>
        <li>哈哈，标签1</li>
        <li>哈哈，标签2</li>
        <li>哈哈，标签3</li>
        <li>哈哈，标签4</li>
    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
    </script>

Example 2: Get the subtags under the specified subtag

        var ol = document.getElementsByTagName('ol');
        console.log(ol[0].getElementsByTagName('li'))

    <ul>
        <li>哈哈，标签1</li>
        <li>哈哈，标签2</li>
        <li>哈哈，标签3</li>
        <li>哈哈，标签4</li>
    </ul>
    <ol id="ol">
        <li>另外标签</li>
        <li>另外标签</li>
        <li>另外标签</li>
    </ol>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'))

        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));     
    </script>

3. Get elements through new methods in HTML5

getElementsByClassName('class name'), get some element collection according to the class name

querySelector('selector') Returns the first element object according to the specified selector, and the selector needs to be marked with .class, #id

querySelectorAll('selector') returns a collection of all objects of the specified selector

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>产品1</li>
            <li>产品2</li>
        </ul>
    </div>
    <script>
        var boxes = document.getElementsByClassName('box');
        var firstBox = document.querySelector('.box');
        var nav = document.querySelector('#nav');
        var li = document.querySelector('li');
        var allBox = document.querySelectorAll('All.box');//这里和getElementsByClassName('box')相似
        var lis = document.querySelectorAll('li');

        console.log(boxes);
        console.log(firstBox);
        console.log(nav);
        console.log(li);
        console.log(allBox);
        console.log(lis);
    </script>

4. Get special elements (body, html)

① Get the body element

document.body //return body element object

② Get html elements

document.documentElement //return html element object

3. Event basis

1. The event consists of three parts (three elements of the event): event source, event type, event handler

(1) Event source: the object where the event is triggered

(2) Event type: how to trigger, what event, such as mouse click (onclick) or mouse passing

(3) Event handler: triggered by a function assignment

<body>
    <button id="btn">事件源：小明</button>
    <script>
        var btn = document.getElementById('btn');//
        btn.onclick = function(){
            alert('去学习');
        }
    </script>
</body>

2. Executing events

(1) Get the event source

(2) Binding events, registration events

(3) Add event handlers

    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            console.log('123被选中了');
        }

    </script>

3. Common mouse events

mouse event	Triggering conditions
onclick	Triggered by left mouse click
onmouseover	mouse over start
onmouseout	mouse left
onfocus	get mouse focus trigger
onblur	lose mouse focus
onmousemove	mouse move start
mouseup	Mouse up trigger
onmousedown	mouse down trigger

4. Operating elements

1. Change element content

element.innerText: The content from the start position to the end position, but it removes html tags, and spaces and newlines are also removed

element.innerHTML: the entire content from the start position to the end position, including html tags, while retaining spaces and newlines

the difference:

    <div id="div3"></div>
    <div id="div4"></div>
    <p id="p2">
        p标签里面
        <span>123</span>
    </p>
    <script>
        //innerText不识别html标签
        var div3 = document.querySelector('#div3');
        var div4 = document.querySelector('#div4');
        div3.innerText = '<strong> 今年</strong>2022';
        div4.innerHTML = '<strong> 今年</strong>2022';
        var p2 = document.querySelector('#p2');
        console.log(p2.innerHTML);
        console.log(p2.innerText);
    </script>

2. Operation elements - click the button to change the text display time

    <button id="btn2">显示当前时间</button>
    <div id="div2">某个时间</div>
    <script>
        //获取元素
        var btn2 = document.querySelector('#btn2');
        var div2 = document.querySelector('#div2');
        //注册事件
        btn2.onclick = function(){
            // div2.innerText = '2022-4-7';
            div2.innerText = getDate();

        }
        function getDate(){
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth()+1;
            var dates = date.getDate();
            return '今天'+year+'年'+month+'月'+dates+'日';
            // return date;
        }
    </script>

3. Operating elements - click the button to change the picture (address)

    <button id="img1">图片一</button>
    <button id="img2">图片二</button>
    <img src="D:\image\img1.jpg" alt="" id="img">
    <script>
        var img1=document.getElementById('img1');
        var img2=document.querySelector('#img2');
        var img=document.querySelector('#img');
        img1.onclick = function(){
            img.src='D:/image/img1.jpg';
            img.title='图片一-粉色云'
        }
        img2.onclick = function(){
            img.src='D:/image/img2.jpg';
            img.title='图片二-动漫图'
        }
    </script>

4. Operation element - form attribute operation

DOM can be used to manipulate the attributes of the following forms:

type、value、checked、selected、disabled

The value (text content) in the form is modified by value

    <!-- 表单属性操作 -->
    <br>
    <button id="btn3">点击按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn3=document.querySelector('#btn3');
        var input=document.querySelector('input');
        btn3.onclick=function(){
            // input.innerHTML='点击了';//不生效，因为表单里面值是用value来修改的
            input.value = '被点击了';
            // btn3.disabled = true;
            this.disabled = true;//作用相同，this只想的调用的btn3
        }
    </script>