JavaScript进阶之DOM

前面我们学习了ECMAScript规定的基础语法，但只有基础语法我们做不了常用的网页交互效果，所以我们还要更多的学

---

Web APIs

Web API是w3c组织的标准，其分为DOM和BOM,是js独有的部分。主要用来实现页面交互功能。
是浏览器提供的一套浏览器功能和页面元素的API（BOM,DOM)

---

API

API：(应用程序编程接口）是一种工具能更好的帮助我们实现功能.

---

DOM简介

-什么是DOM：文档对象模型，是处理可拓展标记语言的标准编程接口
DOM树：

获取元素（标签）

1.根据id获取：getElementById(）

<div id="name">张三</div>
    <script>
        //参数id是字符串所以引号不能少
        //返回元素对象
        let name = document.getElementById("name");
        console.log(name)
        //打印返回的元素对象更好的查看元素属性
        console.dir(name)
    </script>

 //按照标签名来输出所以内容
       //let name1 = document.getElementByTagName('div')
       var body = document.body//获取body元素
       var html1 = document.documentElement//获取gtml元素

事件

网页中每个元素都可以产生和触发js的事件，如我么可以点击某个按钮时产生一些操作。

<button id="bit">点击</button>
    <script>
        
        //事件有事件源，事件类型，事件处理程序
        //事件源：事件被触发的对象
        var btn = document.getElementById('bit')
        //事件类型：如何触发，如鼠标点击触发，键盘触发
        //处理程序，事件需要干什么
        btn.onclick = function(){
            alert('欢迎')
        }
        //btn被点击则弹出‘欢迎’

常见的鼠标事件

操作元素

1 改变元素的内容

<button id="bit">显示当前时间</button>
    <div id="ddd">时间</div>
    <div id="ddd">时间</div>
    <div id="ddd">时间</div>
    <div id="ddd">时间</div>
    <script>
    //点击按钮，div文字发生变化
        //获取元素
        var bit = document.querySelector('button')
        var div = document.getElementById("ddd")
        //注册时间
        bit.onclick = function(){
            div.innerHTML = '2002-19<br>-20'
        }
        //innerText不识别html标签，innerHTML可识别HTML标签
        div.innerText = '<strong>你好</strong>'//字体不会加粗
        div.innerHTML = '<strong>你好</strong>'//字体加粗

修改元素的样式

元素名+className

var int1  = document.querySelector("div");
        int1.onclick = function(){
            this.className = 'ibe'//把元素的类名改变
            this.style.color = '#fff'//改变行内的样式
        }

小结：上次的学习了解了js的基本语法，此次学习是对基础语法的简单应用，目的是为了更熟悉js的接口，以及更灵活的运用在开发上，总之受益匪浅。