【JavaEE】_JavaScript（Web API）

[1. DOM](#1. DOM)

[1.1 DOM基本概念](#1.1 DOM基本概念)

[1.2 DOM树](#1.2 DOM树)

[2. 选中页面元素](#2. 选中页面元素)

[2.1 querySelector](#2.1 querySelector)

[2.2 querySelectorAll](#2.2 querySelectorAll)

[3. 事件](#3. 事件)

[3.1 基本概念](#3.1 基本概念)

[3.2 事件的三要素](#3.2 事件的三要素)

[3.3 示例](#3.3 示例)

4.操作元素

[4.1 获取/修改元素内容](#4.1 获取/修改元素内容)

[4.2 获取/修改元素属性](#4.2 获取/修改元素属性)

[4.3 获取/修改表单元素属性](#4.3 获取/修改表单元素属性)

[4.3.1 value：获取到元素里用户填写的值；](#4.3.1 value：获取到元素里用户填写的值；)

[4.3.2 type：输入框的形态（文本框、密码框...）](#4.3.2 type：输入框的形态（文本框、密码框...）)

[4.4 获取/修改样式属性](#4.4 获取/修改样式属性)

[4.4.1 修改内联样式：修改style属性的值](#4.4.1 修改内联样式：修改style属性的值)

[4.4.2 修改元素应用的CSS类名](#4.4.2 修改元素应用的CSS类名)

5.操作结点

[5.1 新增结点](#5.1 新增结点)

[5.2 删除结点](#5.2 删除结点)

WebAPI都是浏览器给JS提供的功能，如果浏览器不同，API的行为也可能存在差异；

1. DOM

1.1 DOM基本概念

DOM即Document Object Model 即文档（HTML）对象（JS对象）模型；

含义为：把HTML中的每个标签都可以映射到JS中的一个对应对象。

故而：标签上显示的内容可以通过JS对象感知到，同时JS对象修改对应属性，能够影响到标签的显示；

1.2 DOM树

DOM树结构形如：

注：（1）文档：一个页面就是一个文档，即document；

（2）元素：页面中所有的标签都成为元素，即element；

（3）结点：网页中所有的内容都可以称为结点（标签结点，注释结点，文本节点，属性结点等），即note；

接下来将介绍常用的DOMAPI；

2. 选中页面元素

2.1 querySelector

在CSS中，使用选择器选中元素进行操作，在JS中，使用**querySelector(CSS选择器)**选中页面元素，返回被选中的具体对象；

javascript 复制代码

    <div class="box">abc</div>
    <div id="id"> def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>

    <script>
        let elem1=document.querySelector('.box');
        console.log(elem1);
        
        let elem2=document.querySelector('#id');
        console.log(elem2);

        let elem3=document.querySelector('h3>span>input');
        console.log(elem3);
    </script>

运行结果为：

注：（1）document是浏览器中的全局对象，任何一个页面都有一个document；

（2）所有的DOM API都是通过document对象展开的；

（3）除console.log之外，还可以使用cconsoe.dir打印对象，以elem1为例：

展开后可以查看dir对象的所有属性；

（4）CSS所有的选择器都可以在querySelector处使用；

2.2 querySelectorAll

javascript 复制代码

    <div class="box">abc</div>
    <div id="id"> def</div>
    <h3>
        <span>
            <input type="text">
        </span>
    </h3>
    <script>
        var arr=document.querySelectorAll('div');
        console.log(arr);
    </script>

运行结果为：

注：如果有多个类选择器重名，则querySelector默认选中第一个；

如果希望实现全部选中，则可使用querySelectorAll，二者使用方法完全相同，只是其返回的是一个数组；

3. 事件

3.1 基本概念

事件就是针对用户的操作进行的一些响应。

用户的行为会在浏览器中产生一些事件，要能够和用户交互，就需要代码针对事件做出反应；

3.2 事件的三要素

（1）事件源：哪个元素产生的事件；

（2）事件类型：是点击，选中还是修改等等；

（3）处理程序：事件发生后要执行哪个代码；

3.3 示例

javascript 复制代码

<div class="box" onclick="alert('hello')">选择</div>

运行结果如下：

点击选择：

注：这是一个最简单的方式：直接在元素中使用onXXX方法来绑定一个事件处理程序；

但这种写法在实际开发中并不常用，更常用的方式如下：

javascript 复制代码

    <div class="box" >选择</div>
    <div id="id">def</div>
    <script>
        let div = document.querySelector('.box');
        div.onclick = function(){
            alert('hello');
        }
    </script>

其中，事件源为名为.box的div，事件类型为点击事件，事件处理程序为function函数；

4.操作元素

4.1 获取/修改元素内容

先获取到该元素，使用innerHTML属性，就能拿到元素里的内容，修改该属性就会影响界面显示：

（一）使用innerHTML:

javascript 复制代码

    <div class="box" >abc</div>
    <div id="id">def</div>
    <script>
        let div = document.querySelector('.box');
        div.onclick = function(){
            console.log(div.innerHTML);
        }
    </script>

运行结果为：

点击abc四次后查看console标签页：

注：（1）输出"选择"文本前的数字是chrome控制台将相邻的相同的日志合并的结果，如果需要展开，可以在设置（Setting）中取消以下选项：

（二）修改innerHTML：

javascript 复制代码

    <div class="box" >abc</div>
    <div id="id">def</div>
    <script>
        let div = document.querySelector('.box');
        div.onclick = function(){
            //console.log(div.innerHTML);
            div.innerHTML +='a';
            console.log(div.innerHTML);
        }
    </script>

运行结果为：

点击四次abc后查看console标签页：

对应的，页面显示也发生改变：

4.2 获取/修改元素属性

HTML的标签属性也会映射到JS对象中；

代码示例：点击图片从1.jpg更换显示为2.jpg：

javascript 复制代码

    <img src="1.jpg" width="200px" alt="">
    <script>
        let img = document.querySelector('img');
        img.onclick=function(){
            console.log(img.src);
            img.src='2.jpg';
        }
    </script>

运行页面如下：

点击图片后：

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

表单元素（input,textarea,select...）有一些特别的属性，普通标签没有，如：

4.3.1 value：获取到元素里用户填写的值；

代码示例1：打印在输入框中输入的内容

javascript 复制代码

    <input type="text">
    <button>点击</button>
    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            console.log(input.value);
        }
    </script>

运行代码后，在网页页面输入框中输入hello world：

console标签页有：

注：不能将console.log(input.value)写为console.log(input.innerHTML)，innerHTML获取到的是标签的内容，即双标签的开始和结束标签中编写的内容，input是单标签，没有内容；

代码示例2：点击按钮令输入框中的数字+1，并显示结果

javascript 复制代码

    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick=function(){
            let value = parseInt(input.value);
            value+=1;
            input.value = value;
        }
    </script>

运行后输入4点击两次+1按钮：

注：（1）value属性是一个String类型，直接+1是在进行字符串拼接：

javascript 复制代码

        button.onclick=function(){
            let value = input.value;
            value+=1;
            input.value = value;
        }

进行数值+1需要使用parseInt()函数将字符串类型转化为整数类型；

4.3.2 type：输入框的形态（文本框、密码框...）

代码示例：输入框文本与密码的更换

javascript 复制代码

    <input type="text">
    <button>隐藏密码</button>
    <script>
        let input = document.querySelector('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            if(input.type=='text'){
                input.type='password';
                button.innerHTML='显示密码';
            }else{
                input.type='text';
                button.innerHTML='隐藏密码';
            }
        }
    </script>

运行后，在输入框中输入123456：

点击隐藏密码后：

4.4 获取/修改样式属性

4.4.1 修改内联样式：修改style属性的值

代码示例1：实现div点击即可字体放大

javascript 复制代码

    <div style="font-size: 20px;">Hello JavaScript</div>

    <script>
        let div = document.querySelector('div');
        div.onclick=function(){
            //先获取到当前字体的大小(转换为数值)
            let fontSize=parseInt(div.style.fontSize);
            fontSize +=10;
            // 设置字体大小时，切记px单位
            div.style.fontSize = fontSize+'px';  
        }
    </script>

运行后初始页面如下：

点击两次后：

注：（1）JS中所写的样式的属性名与CSS属性可能不同：

字体大小属性在CSS中写为font-size（脊柱命名法），在JS中写为fontSize（驼峰命名法），由于CSS中无需进行算术运算且CSS不区分大小写的，在JS等其他语言中，就需要进行转换；

属性名是相同的，只需将脊柱命名的属性名改为驼峰命名即可；

4.4.2 修改元素应用的CSS类名

代码示例1：切换夜间模式：

javascript 复制代码

    <div id='one' class="light" style="font-size:20px; height:500px">切换</div>
    <style>
        .light{
            color: black;
            background-color: white;
        }
        .dark{
            color: white;
            background-color: black;
        }
    </style>
    <script>
        let div = document.querySelector("#one");
        div.onclick = function(){
            if(div.className == 'dark'){
                div.className='light';
            }else{
                div.className='dark';
            }
        }
    </script>

运行后网页初始页面为：

点击切换后，页面如下：

以上操作都是针对当前页面上已有元素进行展开的，

也可以通过JS实现对页面元素的创建与删除；

5.操作结点

5.1 新增结点

新增节点分为两个步骤：

（1）创建一个元素；

（2）将这个元素结点插入到DOM树中；

代码示例1：实现在"请输入"文字后新增输入框，其默认值为hello：

javascript 复制代码

    <div class="one">
        请输入：
    </div>
    <script>
        let input = document.createElement('input');
        input.value='hello';
        // 输入框中默认显示hello;
        let div = document.querySelector(".one");
        div.appendChild(input);
    </script>

运行后界面如下：

代码示例2：实现无序列表1 1 和2 2 后新增3 3至9 9：

javascript 复制代码

    <ul>
        <li>1 1</li>
        <li>2 2</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        for(let n=3;n<10;n++){
            let li = document.createElement('li');
            li.innerHTML = n+' '+n;
            ul.appendChild(li);
        }
    </script>

运行后页面如下：

注：（1）使用appendChild将新增结点插入到指定结点的最后一个孩子之后；

（2）使用insertBefore将新增结点插入到指定结点之前；

5.2 删除结点

代码示例1：基于前例无序列表1 1至9 9，实现删除3 3元素并通过console标签页打印3 3：

javascript 复制代码

        let toDelete = document.querySelectorAll('li')[2];
        console.log(toDelete);
        ul.removeChild(toDelete);

运行后页面如下：

console标签页为：

注：使用parentElem.removeChild(childElem)删除指定元素的子元素；