JavaScript--Web APIs学习笔记（一）基础阶段+获取元素+操作元素

    <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()获取某类标签元素

document.getElementByTagName()得到的列表是伪数组，返回的是获取元素对象的集合

例一：获取标签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>

例二：获取指定副标签下的子标签

        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. 通过HTML5新增方法获取元素

getElementsByClassName('类名')，根据类名获取某些元素集合

querySelector('选择器') 根据指定选择器返回第一个元素对象，里面选择器需要加符号 .class，#id

querySelectorAll('选择器')返回指定选择器的所有对象集合

    <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. 获取特殊元素（body、html）

①获取body元素

document.body //返回body元素对象

②获取html元素

document.documentElement //返回html元素对象

三、事件基础

1. 事件由三部分（事件三要素）组成：事件源、事件类型、事件处理程序

（1）事件源：事件被触发的对象

（2）事件类型：如何触发、什么事件，如鼠标点击（onclick）或者鼠标经过

（3）事件处理程序：通过一个函数赋值触发

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

2. 执行事件

（1）获取事件源

（2）绑定事件、注册事件

（3）添加事件处理程序

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

    </script>

3. 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过出发
onmouseout	鼠标离开出发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点出发
onmousemove	鼠标移动出发
mouseup	鼠标弹起触发
onmousedown	鼠标按下触发

四、操作元素

1. 改变元素内容

element.innerText：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

区别：

    <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. 操作元素——点击按钮，改变文本显示时间

    <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. 操作元素——点击按钮改变图片（地址）

    <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. 操作元素——表单属性操作

利用DOM可以操作如下表单的属性：

type、value、checked、selected、disabled

表单里面的值（文字内容）是通过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>