JavaScript基础结束——向新的内容出发

本文链接：https://blog.csdn.net/s_meng_/article/details/117431147

这周不知道怎么回事，开始变得有点堕落，学习计划作出了安排，却不想去学习。

现在js基础也过完了一遍，开始DOM的学习了，接下来的主要学习就是跟着视频敲案例，
我也不知道该怎么分享了。

之后我会结合案例来进行分享吧，有什么做错的地方欢迎各位大佬指正。

当然，可能也很少有大佬来看吧，我就把这个平台当成自己笔记和自己学习所输出的地方吧，
接下来也要重新调整心态，更好的去面对自己的学习计划，让自己能以更加积极的态度去学习。

让我们一起加油吧！

文章目录

API和web API

API是为程序员提供的接口，帮助我们实现某种功能。
web API主要是针对浏览器提供的接口，主要针对于浏览器的交互效果。
web API一般都有输入和输出（函数的参数和返回值），wbe API很多都是方法（函数）。

事件处理

事件处理一般有鼠标经过、点击、离开、键盘的按下等等各种操作。
下面是一些常用的事件：
在这里插入图片描述

DOM

DOM事件执行的三要素：

获取事件源
怎么去触发事件
绑定事件（注册事件）

修改元素的内容

innerText

<body>
    <div>
        <p>这是一段文字</p>
    </div>
    <script>
    	// element.innerText = '修改的内容';
        var div = document.querySelector('div');
        div.innerText = 'This is a <i>cat</i>!';
    </script>
</body>

在这里插入图片描述

innerHTML

<body>
    <div>
        <p>这是一段文字</p>
    </div>
    <script>
        var div = document.querySelector('div');
        div.innerHTML = 'This is a <i>cat</i>!';
    </script>
</body>

在这里插入图片描述

两者的区别

共同点：都可以修改元素的内容
不同点：
innerText会完全显示修改的所有字段，不支持HTML标签，获取元素内容时，会删掉所有的空格和字符。
innerHTML修改时可以支持HTML标签，获取内容时，空格，换行和标签都会显示出来。

修改元素的样式

element.style 对行内样式进行操作

<body>
    <div>
        <p>这是一段文字</p>
    </div>
    <script>
        var p = document.querySelector('p');
        // element.style.样式= '修改';
        p.style.color = 'pink';
    </script>
</body>

element.className 类名样式操作符

<body>
    <div>
        <p>这是一段文字</p>
    </div>
    <script>
    	// 先声明类，在需要的时候直接调用
        var p = document.querySelector('p');
        p.style.color = 'pink';
        p.className = 'bg';
    </script>
</body>