【JavaEE】_JavaScript（Web API）

目录

1. DOM 

1.1 DOM基本概念

1.2 DOM树

2. 选中页面元素

2.1 querySelector

2.2 querySelectorAll

3. 事件

3.1 基本概念

3.2 事件的三要素

3.3 示例

4.操作元素

4.1 获取/修改元素内容

4.2 获取/修改元素属性

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

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

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

4.4 获取/修改样式属性

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

4.4.2 修改元素应用的CSS类名

5.操作结点

5.1 新增结点

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选择器)选中页面元素，返回被选中的具体对象；

    <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

    <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 示例

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

运行结果如下：

点击选择：

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

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

    <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:

    <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：

    <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：

    <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：打印在输入框中输入的内容

    <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，并显示结果

    <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是在进行字符串拼接：

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

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

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

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

    <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点击即可字体放大

    <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：切换夜间模式：

    <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：

    <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：

    <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：

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

运行后页面如下：

console标签页为：

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