JavaWeb-JS（WebAPI）

梦想成为光头强！

已于 2022-03-16 13:12:08 修改

阅读量1.5k

点赞数

分类专栏： JavaWeb 文章标签： javascript 前端开发语言

于 2022-03-15 10:40:09 首次发布

本文链接：https://blog.csdn.net/weixin_53860901/article/details/123487962

版权

JavaWeb 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

这一部分是关于WebAPI的部分，我们上一篇博客说过，JS总共有三部分

1.ECMAScript:基础语法部分
2.DOM API：操作页面结构
3.BOM API：操作浏览器

我们的WebAPI部分就包括了DOM + BOM。
这里给出手册参考地址：

WebAPI接口参考

一丶关于DOM + 事件初识

DOM全称为Document Object Model。一个页面结构就是一个多子树结构，每一个节点都抽象为一个页面文档的对象。
这里有几个重要概念需要进行说明：

文档: 一个页面就是一个文档, 使用 document 表示。
元素: 页面中所有的标签都称为元素. 使用 element 表示。
节点: 网页中所有的内容都可以称为节点(标签节点, 注释节点, 文本节点, 属性节点等)。使用 node 表示。

我们的JS和DOM API都是和事件相关的

（1）事件源：由哪个元素引起
（2）事件类型：用户的操作，就像点击，双击，选中这些
（3）事件回调函数：事件发生以后需要做什么。（这里我们需要提供一个回调函数，在事件发生以后，由浏览器自动执行里面的代码）

其实我们学的JS代码执行流程也就是上面这些

1.事件源：这里我们学习如何选择页面元素
2.调用DOM的API来做事情。（1）设置属性（2）设置标签内容

二丶获取元素

我们在获取页面元素这里说两种方式。

<1>querySelector

语法格式如下：

var element = document.querySelector(selectors);

关于这个语句的具体含义：
在这里插入图片描述

这里注意啦！

1> selectors 包含一个或多个要匹配的选择器的 DOM字符串DOMString，该字符串必须是有效的
2> CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常
表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.
3> 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()
4> 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素

因为参数是选择器，所以要通过特殊符号指定是那种选择器。
例如：

.**  这种类型就是类选择器
#**  这种类型就是id选择器

示例代码如下：

<body>
    <div class="1">这里是类选择器</div>
    <div id = "2">这里是id选择器</div>
</body>
<script>
    var el1 = document.querySelector(".1");
    console.log(el1);
    var el2 = document.querySelector("#2");
    console.log(el2);
</script>

对应显示如下：
在这里插入图片描述

<2>querySelectorAll

这个的用法和上面差不多是一致的。但是如果说我们要返回多个元素，就要用querySelectorAll方法，返回一个数组，让这个数组里面包含我们要返回的多个元素。

<body>
    <p>张三今晚在学习JAVA</p>
    <p>李四今晚在玩游戏</p>
    <p>王五今晚在和女朋友聊天</p>
</body>
<script>
    //如果返回器返回多个元素，需要使用querySelectorAll，返回的是一个数组其中包含多个元素
    var arr = document.querySelectorAll("p")
    //数组的遍历
    //一丶下标的方式
    for(let i = 0;i < arr.length;i++){
        console.log(arr[i]);
    }
    //方式二：in
    for(let e of arr){//类似JAVA中的一个int[]，for(int x:arr)
        console.log(e);
    }
</script>

在页面上的显示如下
在这里插入图片描述

三丶操作元素

<1>获取/修改元素内容

1> innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

// 读操作
var renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string

2>innerHTML(主要)

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;

它是先获取到事件源的元素，然后再去注册事件。

<2>获取/修改样式属性

1>查看元素对象属性

我们可以通过console.dir()查看元素对象属性。

<body>
    <img src="dog.jpg" alt="" style="width: 100px; height: 100px;">
</body>
<script>
    //获取img元素
    var img= document.querySelector("img");
    //console.dir表示，将一个对象中的属性丶方法打印出来
    console.dir(img);
</script>

我们的界面显示如下，右侧就是对象的属性

在这里插入图片描述

2> 获取/修改元素属性

我们这里赋值和获取值的方式主要有两种

对象.属性
对象['属性']

然后接着上面的代码，给出一个操作示例，点击切换图片

<body>
    <img src="dog.jpg" alt="" style="width: 100px; height: 100px;">
</body>
<script>
    //获取img元素
    var img= document.querySelector("img");
    //console.dir表示，将一个对象中的属性丶方法打印出来
    console.dir(img);
    img.onclick = function(){
        //对象src属性保持的是绝对路径，我们用包含来判断就行
        if(img.src.lastIndexOf( "rose.jpg") !== -1){
            img.src = "dog.jpg";
        }else{
            img.src = "rose.jpg";
        }
    }
</script>

我们通过这两种方式可以直接获取该元素中的属性，当然也可以设置为我们想要的值。比如上面我们直接赋值rose.jpg。我们页面刚开始加载的时候是dog.jpg，然后点击图片之后执行JS代码img.src = “rose.jpg”，这个时候图片就变为玫瑰花了。
在这里插入图片描述

在这里插入图片描述

3>为style属性赋值

如果说我们要赋值的是style属性的话，就要分为以下两种方式来进行讨论。

1>行内样式操作

“行内样式”通过style直接在标签上指定的样式，优先级很高。
适用于改的样式少的情况。

$\color{red}{示例：点击切换字体大小}$

<body>
    <p>点我试试</p>
<script>
    var p = document.querySelector("p");
    p.onclick = function(){
        console.log(p.style.color)
        if(p.style.color == '' || p.style.color == 'black'){
            p.style.fontSize = "2em";
            p.style.color = 'red';
        }else{
            p.style.fontSize = '2em';
            p.style.color = 'black';
        }
    }
</script>

对应的显示如下
在这里插入图片描述
点击之后变为如下样式

2>类名样式操作

如果说在我们要修改的style样式很多的时候，就会很不方便，所以这个时候我们就可以通过class来设置标签样式，再调整class（对应DOM元素的className属性）。

语句如下：

element.className = [CSS 类名];

$\color{red}{示例：切换白天黑夜}$

<body>
    <span class="day">
        这是一大段话<br>
        这是一大段话<br>
        这是一大段话<br>
        这是一大段话<br>
    </span>
<script>
    //span标签，点击切换模式：因为模式设置的css样式可能比较多，所以切换class类更方便一点
    var span = document.querySelector("span");
    span.onclick = function(){
        //获取当前点击时候的class
        //<span class="">标签中的class属性，在js的元素对象属性对应为className,因为class在js中是关键字
        var cls = span.className;
        if(cls == "day"){
            span.className = "black";
        }else{
            span.className = "day";
        }
    }

对应显示如下，这是白天模式：
在这里插入图片描述
点击之后切换黑夜属性：

<3>获取/修改表单元素属性

表单（主要是指input标签）的以下属性都可以通过DOM来修改

value: input 的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input 的类型(文本, 密码, 按钮, 文件等）

接下来对上面的这些属性部分进行使用

1>文本框 + 按钮 + 普通标签

$\color{red}{示例一：切换播放暂停}$

<body>
    切换播放/暂停<input type="button" id = "btn" value="播放">
</body>
<script>
   var btn = document.querySelector("#btn");
    btn.onclick = function(){
        var content = btn.value;
        if(content == "播放"){
            //切换显示的内容为暂停
            btn.value = "暂停";//注意这里不能写成 content = "播放"
        }else{
            btn.value = "播放"
        }
    }
</script>

选择按钮元素，绑定点击事件，切换显示的文本内容
在这里插入图片描述

$\color{red}{示例二：点击按钮，文本框值+1}$

<body>
    点击计数+1:
    <input type="text" id="sum" value="0">
    <input type="button"  id = "sum_btn" value="点击我+1">
    <br>
</body>
<script>
    //点击按钮，文本框值+1
    var sum = document.querySelector("#sum");
    var sumBtn = document.querySelector("#sum_btn");
    sumBtn.onclick = function(){
        var count = +sum.value;//这里是字符串,要转为数值
        console.log(count);
        sum.value = count+1;
    }
</script>

上面要提到的就是这行代码

var count = +sum.value;//这里是字符串,要转为数值

如果直接写成sum.value = sum.value + 1,他就会给后面不断加1，是字符串形式的加。然后具体显示如下：

在这里插入图片描述

2>复选框

复选框是checked属性，这里需要特别说明。

在html标签中，属性值是checked选中，但是在JS中，checked属性是true/false。

$\color{red}{示例：全部选中/取消}$

<body>
    全部选中/取消：
    <!--类似dom元素：{onclick：all()}-->
    <input type="checkbox" id="all">全部选中
    <input type="checkbox" class="item">妲己
    <input type="checkbox" class="item">安琪拉
    <input type="checkbox" class="item">貂蝉
    <input type="checkbox" class="item">王昭君
</body>
<script>
    var all = document.querySelector("#all");
    var items = document.querySelectorAll(".item");
    all.onclick = function(){
        for(item of items){
            item.checked = all.checked;
        }
    }
</script>

具体效果如下
在这里插入图片描述
当我们点击全部选中框时，就会全选。

$\color{red}{以下是优化代码：}$

为什么要优化呢？因为这里我们想要实现一个功能，就是当我们把妲己，安琪拉，貂蝉，王昭君选中之后，全部选中框就会自动选上。

<body>
    全部选中/取消：
    <!--类似dom元素：{onclick：all()}-->
    <input type="checkbox" id="all">全部选中
    <input type="checkbox" class="item">妲己
    <input type="checkbox" class="item">安琪拉
    <input type="checkbox" class="item">貂蝉
    <input type="checkbox" class="item">王昭君
</body>
<script>
    var all = document.querySelector("#all");
    var items = document.querySelectorAll(".item");
    all.onclick = function(){
        for(item of items){
            item.checked = all.checked;
        }
    }

    for(item of items){//每一个都绑定点击事件
        item.onclick = function(){
            let allChecked = true;
            for(it of items){
                if(!it.checked){
                    allChecked = false;
                }
            }
            all.checked = allChecked;
        }
    }
</script>

这里特别说明一下，如果说框被选上了，那么checked属性就是true，如果没被选上，那么属性框的checked属性就是false。

四丶操作节点

操作节点分为两步

1.创建一个节点
2.把元素节点插入到DOM树当中

<1>创建元素节点

使用 createElement 方法来创建一个元素. options 参数暂不关注

var element = document.createElement("标签名")

可以通过这种方法设置DOM对象的属性，标签内容。

首先在这里想通过一个问题来引出为什么要有创建节点这个事。
在这里插入图片描述

我们想要实现这个功能，每点击一下，就会在下方新加文本框中的内容。
在这里插入图片描述

那么按照我们学习过的内容，可以写出如下代码：

<body>
    <input type="text"  id="content" value = "新加的内容">
    <input type="button" id = "add" value="添加文本框内容为一个段落">
    <div id="container">
        <h3>显示的内容</h3>
    </div>
</body>
<script>
    //绑定点击事件，获取文本框内容，添加到container中
    var content = document.querySelector("#content");
    var container = document.querySelector("#container");
    add.onclick = function(){
        //点击时，获取文本框内容
        var text = content.value;
        //第一种方式：innerHTML,先获取container中所有内容，在最后拼接<p>标签
        var html = container.innerHTML;
        html += "<p><h3>";
        html += text;
        html += "</h3><p>";
        container.innerHTML = html;
    }
</script>

但是这种方式是有一个很大问题的

它得效率很差，已有的标签浏览器已经渲染了，但是又会重新设置，然后再次渲染，这样就很浪费资源。

所以我们就有了如下的方式，通过新加一个节点来进行新加内容的添加

<body>
    <input type="text"  id="content" value = "新加的内容">
    <input type="button" id = "add" value="添加文本框内容为一个段落">
    <div id="container">
        <h3>显示的内容</h3>
    </div>
</body>
<script>
     //绑定点击事件，获取文本框内容，添加到container中
    var add = document.querySelector("#add");
    var content = document.querySelector("#content");
    var container = document.querySelector("#container");
    add.onclick = function(){
        //第二种方式:创建一个dom元素（<p>）,然后添加到container内，作为最后一个子节点。
        var text = content.value;
        var p = document.createElement("p");
        p.innerHTML = "<h3>" + text + "</h3>";
        container.appendChild(p);//添加到dom树形结构中，并作为container最后子节点
    }
</script>

<2>插入节点

1>插入指定节点之后

这个功能的实现需要使用appendChild

element.appendChild(aChild)

实际上我们上面就已经实现过了这个功能了。
在这里插入图片描述
所以这里就不再写新的代码来进行演示。

2>插入到指定节点之前

这个功能是通过使用insertBefore将节点插入到指定节点之前。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

再准确一些，父节点parentNode有一个子节点referenceNode，这个语句会将newNode插入到referenceNode之前。

<body>
    <div id="insertBeforeDiv">
        <p>11</p>
        <p>22</p>
        <p>33</p>
        <p>44</p>
    </div>
<script>
    //insertBefore:在某个节点前插入另一个节点
    var insertBeforeDiv = document.querySelector("#insertBeforeDiv");
    //准备要插入的节点
    var insertNode = document.createElement("p");
    insertNode.innerHTML = "插入的新节点";
    insertBeforeDiv.insertBefore(insertNode,insertBeforeDiv.children[0]);
</script>

效果如下
在这里插入图片描述

DOM对象：其中包含属性
DOM.children:返回该DOM对象下一级所有的子节点数组
DOM.parentNode:返回该dom对象上一级的节点

$\color{red}{这里注意！！！}$
$\color{red}{使用appendChild或者insertBefore插入节点时，如果该节点已}$
$\color{red}{经存在，那么就做移动操作。}$

<3>删除节点

这里使用removeChild删除子节点

oldChild = element.removeChild(child);

这里注意了

1>child 为待删除节点
2>element 为 child 的父节点
3>返回值为该被删除节点
4>被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom
树的其他位置. 
5>如果上例中的 child节点 不是 element 节点的子节点,则该方法会抛出异常.

演示如下：

<body>
    <div id="insertBeforeDiv">
        <p>11</p>
        <p>22</p>
        <p>33</p>
        <p>44</p>
    </div>
<script>
    var insertBeforeDiv = document.querySelector("#insertBeforeDiv");
    var last = insertBeforeDiv.children[insertBeforeDiv.children.length - 1];//取最后一个节点
    insertBeforeDiv.removeChild(last);
</script>

这里我们就对上面的插入节点的代码进行更改
在这里插入图片描述
然后我们就可以看到最后一个节点已经被删除了。

五丶总结

前端部分浅浅的了解了，准备后端吧！！！加油！！！

梦想成为光头强！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-JS（WebAPI）

前言这一部分是关于WebAPI的部分，我们上一篇博客说过，JS总共有三部分1.ECMAScript:基础语法部分2.DOM API：操作页面结构3.BOM API：操作浏览器我们的WebAPI部分就包括了DOM + BOM。这里给出手册参考地址：WebAPI接口参考一丶关于DOM + 事件初识DOM全称为Document Object Model。一个页面结构就是一个多子树结构，每一个节点都抽象为一个页面文档的对象。这里有几个重要概念需要进行说明：文档: 一个页面就是一个文档
复制链接

扫一扫