【JavaEE】_JavaScript(WebAPI)

目录

[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)删除指定元素的子元素

相关推荐
Apifox5 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952710 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿33 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox