[JavaScript] 常见WebAPI用法

文章目录

一、WebAPI是什么?

上一篇讲JS基础语法的文章说提到了JS由三部分组成,分别是

  • ES:JavaScript语法;
  • DOM:页面文档对象,对页面中的元素进行操作;
  • BOM:浏览器对象模型,对浏览器窗口进行操作;
    而WebAPI就包括了DOM + BOM;

本质上可以看成一些现成的方法来供程序员调用,方便开发。
由于WebAPI有很多,大多数使用都是以查阅接口的详细说明文档为主,本文主要列举一些开发中常用的API。

二、事件

2.1 概念

JS要构建动态页面,就需要感知用户的行为。用户对于页面的一些操作,比如点击、选择、修改等操作都会在浏览器中产生一个个时间,被JS获取到,从而达到交互的效果

2.2 事件三要素

  1. 事件源:哪个元素触发的;
  2. 事件类型:是点击,选中,还是修改?
  3. 时间处理程序:进一步如果处理,往往是一个回调函数;

三、获取元素

需要通过一个API,querySelector函数来实现~

<div class="box">abc</div>
<script>
    var elem1 = document.querySelector('.box');
    console.log(elem1);
</script>

若选中的元素有多个,但querySelector只能获取到其中一个,如果想要都获取到,就需要使用querySelectorAll函数来实现~

<div class="box">abc</div>
<div id="id">def</div>
<script>
    var elems = document.querySelectorAll('div');
console.log(elems);
</script>

四、操作元素

4.1 获取/修改元素内容

内容:<div>内容</div>开始标签和结束变迁中间的部分就是内容,内容可以是一段文字,也可以是其他的HTML标签;

//读操作
元素对象.innerText;
//写操作
元素对象.innerText = String;
4.1.1 innerText

innerText只能获取/修改元素里面的文本;

<div>
        <span>hello world</span>
        <span>hello world</span>
</div>
<script>
        var div = document.querySelector('div');
        // 读取 div 内部内容
        console.log(div.innerText);
        // 修改 div 内部内容, 界面上就会同步修改
        div.innerText = 'hello js <span>hello js</span>';
</script>

网页效果如下图所示,因为innerText无法获取到div内部的HTML结构,之恶能得到本文内容,所以修改页面时把span标签也当成本文来显示了。
[JavaScript] 常见WebAPI用法

4.1.2 innerHTML

innerHTML不仅可以获取/修改元素里面的文本,也可以获取/修改里面嵌套的标签;

<div>
        <span>hello world</span>
        <span>hello world</span>
</div>
<script>
        var div = document.querySelector('div');
        // 读取页面内容
        console.log(div.innerHTML);
        // 修改页面内容
        div.innerHTML = '<span>hello js</span>'
</script>

与innerText不同的是,innerHTML不仅可以获取到文本,同时也能获取到页面的HTML结构并且修改页面结构。显然innerHTML的应用要比innerText更广。
[JavaScript] 常见WebAPI用法

4.2 获取/修改元素属性

直接通过JS代码来修改相关属性,

一个HTML标签中的全部属性可以通过dir来全部查看;
console.dir(img);

<img src="rose.png" alt="这是一朵花" title="玫瑰花">
<script>
    var img = document.querySelector('img');
    img.onclick = function(){
    	img.src = 'cat.png';
    }
</script>

上面的代码实现的功能是,当点击rose.png这张图片时,将图片换成cat.png显示
[JavaScript] 常见WebAPI用法

4.3 获取/修改表单元素属性

4.3.1 value:input标签的值
<input type="button" value="播放">
<script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
        if (btn.value === '播放') {
            btn.value = '暂停';
       } else {
            btn.value = '播放';
       }
   }
</script>

上述diamagnetic中,input标签是按钮,value表示按钮的内容,可以通过反复点击按钮来达到更换按钮文本值的功能。
[JavaScript] 常见WebAPI用法

4.4 获取/修改样式属性

4.4.1 行内样式操作

直接通过style属性来设置行内样式,适用于改的样式较少的情况;

<div style="color: black; font-size:20px">哈哈</div>
<script>
    var div = document.querySelector('div');
    div.onclick = function () {
        var curFontSize = parseInt(this.style.fontSize);
        curFontSize += 50;
        this.style.fontSize = curFontSize + "px";
   }
</script>

上述代码实现了点击文字使其放大的功能,显然其修改的是文字的大小样式。
[JavaScript] 常见WebAPI用法

4.4.2 类名样式操作

通过className属性给元素设置一个CSS类名,适用于要修改的样式很多的情况;

五、操作节点

5.1 新增节点

5.1.1 创建元素节点

通过createElement方法创建新的元素节点,但是并不会直接显示出来。页面上能显示的内容是DOM树中的内容,新创建的这个元素节点并灭有挂到DOM树上,所以不会显示出来。

var element = document.createElement(tagName);
5.1.2 插入节点到 DOM 树中

创建新的元素节点后将其插入到DOM树中才会在页面中显示出来。

  • appendChild 是把新元素插入到父元素的所有子节点最后;
element.appendChild(aChild);
<div class="container"> </div>
<script>
    var div = document.createElement('div');
    div.id = 'mydiv';
    div.className = 'box';
    div.innerHTML = 'hehe';
    var container = document.querySelector('.container');
    container.appendChild(div);
</script>

刷新网页可以看到新创建的节点div已经被加入到了DOM树中。
[JavaScript] 常见WebAPI用法

  • insertBefore 是把新元素插入到指定子元素的前面;
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
<div class="container">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
    <script>
    	/*创建新的节点元素*/
        var newDiv = document.createElement('div');
        newDiv.innerHTML = '新的节点';
        /*获取元素*/
        var container = document.querySelector('.container');
        console.log(container.children);
        /*将新节点插入到第二个元素之前*/
        container.insertBefore(newDiv, container.children[2]);
    </script>

[JavaScript] 常见WebAPI用法

Q:如果对一个新节点使用 insertBefore 方法插入两次,会有什么效果?
如果针对一个节点插入两次,则只有最后一次生效
可以通过下面一个代码例子来理解一下

<div class="container">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
    <script>
        var newDiv = document.createElement('div');
        newDiv.innerHTML = '新的节点';
        var container = document.querySelector('.container');
        console.log(container.children);
        container.insertBefore(newDiv, container.children[2]);
        container.insertBefore(newDiv, container.children[4]);
    </script>

上述代码中将新节点 newDiv 前后两次插入到第二个元素前和第四个元素前,网页显示如下图,显然最后新节点是插入到了第四个元素之前,即最后一个插入操作生效。
[JavaScript] 常见WebAPI用法

5.2 删除节点

removeChild : 删除某个父元素的指定子元素;

oldChild = element.removeChild(child);

同样使用上述的代码例子,最后一行将第二个元素节点删掉。

<div class="container">
        <div>11</div>
        <div>22</div>
        <div>33</div>
        <div>44</div>
    </div>
    <script>
        var newDiv = document.createElement('div');
        newDiv.innerHTML = '新的节点';
        var container = document.querySelector('.container');
        console.log(container.children);
        container.insertBefore(newDiv, container.children[2]);
        container.removeChild(container.children[1]);
    </script>

[JavaScript] 常见WebAPI用法

上一篇:JavaScript--BOM对象和DOM对象


下一篇:什么是DOM和BOM?