js学习笔记5（API及DOM）

        <!-- //Web API

        //Web APIs 和 JS基础关联性

        //JS的组成：Javascript：ESMAScript（包含Javascript基础）、DOM（页面文档对象模型）、BOM（浏览器对象模型）；DOM和BOM属于Web APIs

        //JS基础阶段：学习的是ECMAScript标准规定的基本语法，要掌握JS基础语法，为后续知识做铺垫

        //Web APIs 阶段：Web APIs是W3C组织的标准；主要学习DOM和BOM；这是JS独有的部分；主要学习页面交互功能；需要JS基础

        //Web APIs 是JS的应用

        //API 和 Web API

        //API(应用程序接口):是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组程序的能力，而又无需访问源码，或理解内部工作机制的细节（简单理解为API是一种工具，便于轻松实现想要实现的功能；比如手机的充电口就类似于一个API）

        //Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM）    比如想要浏览器弹出一个警示框，直接使用alert()即可

        //DOM

        //DOM:文档对象模型，是W3C组织推荐的处理可扩展标记语言HTML或者XML的标准编程接口；W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

        //DOM树

        // 文档：一个页面就是一个文档，用document表示  

        // 元素：页面中所有的标签都是元素，用element表示

        // 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），用node表示      DOM把以上内容都看作是对象

        //获取元素

        //根据ID获取

        //getElementById()    //驼峰命名法  get获得  Element元素  By通过 Id号id-->

        <!-- <div id="time">2019-9-9</div>

       

            1.因为文档从上往下加载，所以要先有标签，把script写在标签下面

         

         <script>

            var timer=document.getElementById('time');  //getElenmentById('')括号里一定要有引号，因为参数类型id是大小写敏感的字符串

            console.log(timer);

            console.log(typeof timer);  //结果为object   因为它返回的是元素对象

            console.dir(timer);  //使用console.dir打印返回元素对象 可以更好的查看里面的属性和方法

         </script> -->

         <!--

            根据标签名获取  

        getElementsByTagName()方法  返回带有指定标签名的对象的集合

        <ul>

            <li>知否知否，应是绿肥红瘦1</li>

            <li>知否知否，应是绿肥红瘦2</li>

            <li>知否知否，应是绿肥红瘦3</li>

            <li>知否知否，应是绿肥红瘦4</li>

            <li>知否知否，应是绿肥红瘦5</li>

        </ul>

        <ol id="ol">

            <li>知否知否，应是绿肥红瘦1</li>

            <li>知否知否，应是绿肥红瘦2</li>

            <li>知否知否，应是绿肥红瘦3</li>

            <li>知否知否，应是绿肥红瘦4</li>

            <li>知否知否，应是绿肥红瘦5</li>

        </ol>

        <script>

            /* var lis=document.getElementsByTagName('li'); //返回的是元素对象的集合，以伪数组的形式存储 不管页面中有几个,就算没有这个标签也是返回的元素对象集合，不过是一个空的伪数组形式

            console.log(lis);

            console.log(lis[1]);

            //如果想要依次打印里面的元素对象，可以采取遍历的方式👇     得到的元素是动态的（把标签里的内容改了，JS不用改也能得到修改后的内容）

            for(var i=0;i<lis.length;i++){

                console.log(lis[i]);

            } */

            //如果页面中有ul,也有ol，只获取ol中的li如何获取？使用document.getElementsByTagName会把整个页面的li都获取到

            //获取父元素内部所有指定标签的子元素  element.getElenmentsByTagName('标签名')   !!!⭐父元素必须是指明的哪个元素，不能是伪数组，不包括父元素自己

            /* var ol=document.getElementsByTagName('ol');  //[ol]

            console.log(ol[0].getElementsByTagName('li'));  */ //如果这里log里面的ol[0] 写成ol的话就会报错，因为此时ol是一个集合不是哪个元素，ol[0]表示页面中的第一个ol标签，此时就是一个具体的元素了

            //但其实实际开发中不会写这么麻烦，可以在ol 标签里加一个id="ol"会更方便

            var ol=document.getElementById('ol');

            console.log(ol.getElementsByTagName('li'));

       

        </script>

    -->

    <!--

        通过HTML5新增方法获取

     -->

     <!-- <div class="box">盒子1</div>

     <div class="box">盒子2</div>

     <div id="nav">

        <ul>

        <li>首页</li>

        <li>产品</li>

     </ul>

     </div>

     

     <script>

        //1.getElementsByClassName('类名')；  根据类名返回元素对象集合

        var boxs = document.getElementsByClassName('box');

        console.log(boxs);

        //2.querySelector  返回指定选择器的！第一个！元素对象   不同的选择器写法不一样，加不同符号

        var fisrtbox=document.querySelector('.box');  //.类名

        console.log(fisrtbox);

        var firstid=document.querySelector('#nav');  //#id名

        console.log(firstid);

        var lis=document.querySelector('li');  // 标签名

        console.log(lis);

        //想选择所有类名相同的元素怎么办？   querySelectorAll('选择器')  返回指定选择器的！所有！元素对象

        var allBox=document.querySelectorAll('.box');

        console.log(allBox);

        var liAll=document.querySelectorAll('li');

        console.log(liAll);

     </script> -->

 

     <!-- 获取特殊元素   body元素、html元素 -->

     <!-- <script>

        //1.获取body元素

        var bodyEle = document.body;

        console.log(bodyEle);

        //2.获取html元素

        var htmlEle=document.documentElement;

        console.log(htmlEle);

     </script> -->

 

     <!-- 事件基础   事件：响应-触发机制-->

     <!-- <button id="btn">唐伯虎</button>

     <script>

        //事件三要素：事件源（谁被触发了）、事件类型（怎么触发的，比如说是鼠标点击会被触发还是鼠标滑过会被触发）、事件处理程序（触发来干什么  通过函数赋值的方式完成）        

        //点击一个按钮，弹出对话框

        //事件源：按钮   事件类型：鼠标点击onclick    事件处理程序：弹出对话框

        var btn=document.getElementById('btn');  //首先要获得这个元素，才能处理事件

        btn.onclick = function(){   //btn就是事件源  onclick就是事件类型   function(){}是处理程序

            alert('点秋香');

        }

     </script> -->

     <!-- 执行事件的步骤：1.获取事件源  2.绑定事件（注册事件）  3.添加事件处理程序 -->

     <!-- <div>123</div>

     <script>

        //要求点击123 控制台输出‘我被点击了’

        var div=document.querySelector('div'); //1.获取事件源

        //div.onclick   2.绑定事件（注册事件）

        div.οnclick=function(){

            console.log('我被点击了');

        }

     </script> -->

     <!-- 操作元素   ！！！！重点！！⭐

    1.改变元素内容 innerText    innerHTML -->

    <!-- <button>显示当前时间</button>

    <div>某个时间</div>

    <p>123

        <span>456</span>

    </p>

    <script>

        /* var btn=document.querySelector('button');

        var div=document.querySelector('div');

        btn.οnclick=function(){

            div.innerText=getDate();   //innerText修改内容  调用函数

        }

        function getDate(){

        var date= new Date();

        var year=date.getFullYear();

        var month=date.getMonth() + 1;  //别忘了加一哦！！！

        var dates=date.getDate();

        var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];

        var day=date.getDay();

        return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];

        }

        //元素也可以不用绑定事件

        var p=document.querySelector('p');

        p.innerText=getDate();            //此处就不用事件，页面打开直接显示当前时间 */

        //innerHTML和innerText功能相似，但有区别

        //innerText 不识别html标签，非标准，可以获取可读写，会去除空格和换行     ！常用！ innerHTML识别html标签，W3C标准，可以获取可读写，保留空格和换行

        /* var p1=document.querySelector('p');

        // p1.innerText='<strong>000</strong>';  //<strong>000</strong>

        // p1.innerHTML='<strong>000</strong>';   //000(加粗了)

        console.log(p1.innerText);  //123 456

        console.log(p1.innerHTML);  //123                                                                  <span>456</span> */

   </script> -->

   <!-- 操作元素，改变元素属性  比如 src,href,alt,title,id -->

   <!-- <button id="liu">刘德华</button>

   <button id="zhang">张学友</button><br>

   <img src="image/liu.webp" alt="" title="刘德华">

   <script>

    //修改src

    //1.获取元素

    var liu=document.getElementById('liu');

    var zhang=document.getElementById('zhang');

    var img=document.querySelector('img');

    //绑定事件  处理程序

    zhang.onclick = function(){

        img.src='image/zhang.png';

        img.title='张学友'         //title是指鼠标放在图片上时显示的内容

    }

    liu.onclick = function(){

        img.src='image/liu.webp';

        img.title='刘德华'

    }

   </script> -->

   <!-- 案例：根据系统不同时间显示不同图片和文字，比如早上就显示早上的图片和‘早上好’，中午和晚上同理

        分析：1.判断系统时间，利用日期内置对象    2.利用分支语句设置不同图片    3.需要一个图片，根据时间修改图片，需要用到src属性     4.需要一个div元素，显示不同问候语，修改元素内容     -->

        <!-- <img src="image/sping.webp" alt="">

        <div>上午好</div>

        <script>

            //获取元素

            var img=document.querySelector('img');

            var div=document.querySelector('div');

            //得到当前时间--小时数

            var date=new Date();

            var h=date.getHours();

            //判断时间改变文字及图片

            if(h<12 && h>5){

                img.src='image/sping.webp';

                div.innerHTML='上午好呀！';

            }else if(h<18){

                img.src='image/summer.webp';

                div.innerHTML='中午好呀！';

            }else{

                img.src='image/winter.jpg';

                div.innerHTML='晚上好呀！';

            }

           

        </script> -->

        <!-- 表单元素的属性操作   属性：type,value,checked,selected,disabled -->

        <!-- <button>按钮</button>

        <input type="text" value="输入内容">

        <script>

            var btn = document.querySelector('button');

            var ipt = document.querySelector('input');

            btn.onclick = function (){

                ipt.value='被点击了';      //注意！ 此时这里是表单元素，无法使用innerHTML来改变文字内容，innerHTML只适用于普通盒子的元素，表单元素想要修改内容要使用value

                //如果想要按钮禁用，用disabled

                // btn.disabled=true;

                this.disabled=true;  //this是当前的意思，这里因为要改变的对象是btn（函数的调用者），所以这里也可以使用this

            }

        </script> -->

 

        <!-- 样式属性操作    可以通过修改元素的大小、颜色、位置等样式 -->

        <!-- 行内样式：element.style    类名样式：element.className -->

        <!-- 行内样式 -->

        <!-- <div style="width: 200px;height: 200px;background-color:aqua;"></div>    想在鼠标点击时把背景颜色和宽高改了

        <script>

            var div=document.querySelector('div');

            div.οnclick=function(){        //JS修改style样式操作，产生的是行内样式，CSS权重更高（比内嵌权重高）

                this.style.backgroundColor='red';  //属性采取驼峰命名法，和样式里的不一样

                this.style.width='250px';     //别忘了单位

                this.style.height='250px';

            }

        </script> -->

        <!-- 类名样式 -->

        <!-- <div>文本</div>

        <script>

            var div=document.querySelector('div');

            div.οnclick=function(){        //JS修改style样式操作，产生的是行内样式，CSS权重更高（比内嵌权重高）

                // this.style.backgroundColor='red';  //属性采取驼峰命名法，和样式里的不一样

                // this.style.width='250px';     //别忘了单位

                // this.style.height='250px';

                //以上写法只适合简单的比较少的样式，如果较多样式或功能情况下使用类名修改，在css里写想要修改为的样式，直接在js里将类名赋给盒子就行

                this.className='change';//写这一句就够了

                //如果原来也有一个类名，会直接把原来的类名覆盖掉

                this.className='原来的类名 修改的类名'   //如果希望修改过后原来的类名保留，那就写‘原来的类名+空格+要修改的类名’

            }

        </script> -->