• 【JavaScript】WebAPI详解

    目录

    1. 了解什么是WebAPI

    2. 认识DOM

    3. 获取页面元素

    3.1 querySelector

    3.2 querySelectorAll

    4. 认识事件

    5. 操作元素

    5.1 获取/修改元素内容

    5.1.1 innerText 

    5.1.2 innerHTML 

    5.2 获取/修改元素属性

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

    5.4 获取/修改样式属性

    5.4.1 行内样式操作 

    5.4.2 类名样式操作

    6. 操作节点

    6.1 新增节点

    6.1.1 创建元素节点

    6.1.2 往dom树中插入节点

    6.2 删除节点

    1. 了解什么是WebAPI

    前面学习的JS分为三大部分：

    • ECMAScript：基础语法部分
    • DOM API：操作页面结构
    • BOM API：操作浏览器

    WebAPI就包括了DOM和BOM，API是一个广义的概念，而WebAPI是一个更具体的概念，指DOM+BOM，所谓API的本质就是一些现成的函数/对象，程序员可直接拿来用，方便开发

    2. 认识DOM

    DOM全称为Document Object Model

    W3C标准为我们提供了一些列函数，使得我们可以操作：网页内容，网页结构，网页样式

    DOM树：一个页面的结构是一个树形结构，称为DOM树

    页面结构

    DOM树结构

    重要概念：

    • 文档：一个页面就是一个文档，使用document表示
    • 元素：页面中所有的标签都称为元素，使用element表示 
    • 节点：网页中所有的内容都可以称为节点（标签节点，注释节点，文本节点，属性节点），使用node表示

    3. 获取页面元素

    这部分工作类似CSS选择器功能

    3.1 querySelector

    使用querySelector能够完全复用前面所学的CSS选择器知识，达到更快捷更精准的方式获取到元素对象

    var element = document.querySelector(selector);

    说明：获取页面的一个selector标签元素，如果有多个相同的标签，则匹配第一个

    1. <body>
    2.     <div>
    3.         <span>span>
    4.     div>
    5.     <p>111p>
    6.     <p>222p>
    7. body>
    8. <script>
    9.     var div = document.querySelector("div");
    10.     var p = document.querySelector("p");
    11.     console.log(div);
    12.     console.log(p);
    13. script>

    注意：querySelector可以被任何元素调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素

    1. <script>
    2.     var div = document.querySelector("div");
    3.     var span = div.querySelector("span");
    4.     console.log(span);
    5. script>

    3.2 querySelectorAll

    与querySelector不同的是querySelectorAll获得与之匹配的页面所有的元素，以数组的形式保存

    1. <body>
    2.     <div id="i1">111div>
    3.     <div id="i2">222div>
    4. body>
    5. <script>
    6.     var divArr = document.querySelectorAll("div");
    7.     console.log(divArr);
    8. script>

    4. 认识事件

    JS要构建动态页面，就需要感知用户的行为，用户对页面的一些操作（点击，选择，修改等）都会在浏览器中产生一个个事件，被JS获取到，从而进行更复杂的交互操作

    事件的三要素：

    • 事件源：哪个元素触发的
    • 事件类型：点击，修改，选中等
    • 事件处理程序：通常是一个回调函数，当事件发生后，浏览器自动调用回调函数，来完成与用户的交互

    示例：点击按钮，弹出“你好”的警示窗口

    1. <body>
    2.     <input type="button" value="按钮">
    3. body>
    4. <script>
    5.     var btu = document.querySelector("input");
    6.     btu.onclick = function(){
    7.         alert("你好");
    8.     }
    9. script>

    注意：这个匿名函数是一个回调函数，当事件发生后，由浏览器自动调用 

    5. 操作元素

    5.1 获取/修改元素内容

    5.1.1 innerText 

    Element.innerText表示获取一个节点及其后代渲染的文本内容

    示例：获取元素的内容

    1. <body>
    2.     <div>
    3.         <p>111p>
    4.         <p>222p>
    5.     div>
    6. body>
    7. <script>
    8.     var div = document.querySelector("div");
    9.     console.log(div.innerText);
    10. script>

    示例：修改元素的内容

    1. <body>
    2.     <p>111p>
    3.     <span>span>
    4.     <div>div>
    5. body>
    6. <script>
    7.     var p = document.querySelector("p");
    8.     p.innerText = "333"; //将p中的111改为333
    9.     var span = document.querySelector("span");
    10.     span.innerText = "444"; //给span中填444
    11.     var div = document.querySelector("div");
    12.     div.innerText = "555"
    13. script>

    从中可以发现innerText无法获得div内部的html结构，只能得到文本内容，修改元素内容时，也会把span标签当作文本内容进行设置

    5.1.2 innerHTML 

    Element.innerHTML会设置或获取html语法表示的元素的后代

    示例：获取页面元素

    1. <body>
    2.     <div>
    3.         <span>111span>
    4.         <span>222span>
    5.         <span>333span>
    6.     div>
    7. body>
    8. <script>
    9.     var div = document.querySelector("div");
    10.     console.log(div.innerHTML);
    11. script>

    示例：修改元素内容

    1. <body>
    2.     <p>111p>
    3.     <div>div>
    4. body>
    5. <script>
    6.     var p = document.querySelector("p");
    7.     p.innerHTML = "222"; //将p中的111修改为222
    8.     var div = document.querySelector("div");
    9.     div.innerHTML = "1
      2"      ;
    10. script>

    从中可以看到，innerHTML不光能获取到页面的html结构，也能修改结构，并且获取的内容保留空格和换行

    5.2 获取/修改元素属性

    使用console.dir()可以打印对象属性

    示例：获取一张图片的属性

    1. <body>
    2.     <img src="1.jpg" alt="小女孩儿">
    3. body>
    4. <script>
    5.     var img = document.querySelector("img");
    6.     console.dir(img);
    7. script>

    我们可以直接通过这些属性获取属性值

    示例：直接获取图片路径和alt

    1. <body>
    2.     <img src="1.jpg" alt="小女孩儿">
    3. body>
    4. <script>
    5.     var img = document.querySelector("img");
    6.     console.log(img.src);
    7.     console.log(img.alt);
    8. script>

    还可以直接修改属性

    示例：点击切换图片

    1. <body>
    2.     <img src="1.jpg" width="400px" height="300px">
    3. body>
    4. <script>
    5.     var img = document.querySelector("img");
    6.     img.onclick = function(){
    7.         if(img.src.lastIndexOf("1.jpg")!=-1){
    8.             img.src = "2.jpg";
    9.         }else {
    10.             img.src = "1.jpg";
    11.         }
    12.     }
    13. script>

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

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

    • value：input的值
    • disabled：禁用
    • checked：复选框会使用
    • selected：下拉框会使用
    • type：input的类型（文本，密码，按钮，文件等）

    input具有一个重要的属性value，value决定了表单元素的内容，如果是输入框，value表示输入框的内容，修改这个值会影响到界面显示，如果是按钮，value为按钮的内容，可以通过value来实现按钮中文本的切换 

    示例：点击替换按钮的文本，在“播放”，“暂停”之间切换

    1. <body>
    2.     <input type="button" value="播放">
    3. body>
    4. <script>
    5.     var inp = document.querySelector("input");
    6.     inp.onclick = function(){
    7.         if(inp.value=="播放"){
    8.             inp.value = "暂停";
    9.         }else {
    10.             inp.value = "播放";
    11.         }
    12.     }
    13. script>

    示例：点击计数

    使用一个输入框输入初始值，每次点击，值+1

    1. <body>
    2.     <input type="text" id="text" value="0">
    3.     <input type="button" id="button" value="点击">
    4. body>
    5. <script>
    6.     var text = document.querySelector("#text");
    7.     var button = document.querySelector("#button");
    8.     button.onclick = function(){
    9.         var num = text.value;
    10.         num++;
    11.         text.value = num;
    12.     }
    13. script>

    示例：全选/取消全选按钮

    1. <body>
    2.     <input type="checkbox" id="all">全选
    3.     <input type="checkbox" class="ball">篮球
    4.     <input type="checkbox" class="ball">足球
    5.     <input type="checkbox" class="ball">排球
    6.     <input type="checkbox" class="ball">棒球
    7. body>
    8. <script>
    9.     var all = document.querySelector("#all");
    10.     var balls = document.querySelectorAll(".ball");
    11.     //实现全选，或者取消全选
    12.     all.onclick = function(){
    13.         for(var i = 0;i < balls.length;i++){
    14.             balls[i].checked = all.checked;
    15.         }
    16.     }
    17.     //查看是否全部选中
    18.     function ischeckAll(){
    19.         for(var i = 0;i < balls.length;i++){
    20.             if(!balls[i].checked){
    21.                 return false;
    22.             }
    23.         }
    24.         return true;
    25.     }
    26.     //每选一个判断是否全选，若已经全选，则勾选全选，若无则不勾选全选
    27.     for(var i = 0;i < balls.length;i++){
    28.         balls[i].onclick = function(){
    29.             if(ischeckAll()){
    30.                 all.checked = true;
    31.             }else {
    32.                 all.checked = false;
    33.             }
    34.         }
    35.     }
    36. script>

    5.4 获取/修改样式属性

    CSS中的元素属性都可以通过JS来修改

    5.4.1 行内样式操作 

    element.style.[属性名] = [属性值];

    style中的属性都是使用驼峰命名方式和CSS属性对应的，例：font-size---fontSize，background-color---backgroundColor

    示例：点击修改文字颜色和修改文字大小

    1. <body>
    2.     <div style="color: red; font-size: 1em;">我爱学习div>
    3. body>
    4. <script>
    5.     var div = document.querySelector("div");
    6.     div.onclick = function(){
    7.        if(div.style.color!="blue"){
    8.         div.style.color = "blue";
    9.         div.style.fontSize = "2em";
    10.        }else {
    11.         div.style.color = "red";
    12.         div.style.fontSize = "1em";
    13.        }
    14.     }
    15. script>

      

    5.4.2 类名样式操作

    通过修改元素CSS样式的类名，来切换不同的场景

    element.className = [CSS 类名];

    示例：点解切换“日间”，“夜间”模式 

    1. <body>
    2.     <div class="d1">
    3.         窗前明月光<br>
    4.         疑是地上霜<br>
    5.         举头望明月<br>
    6.         低头思故乡<br>
    7.     div>
    8. body>
    9. <script>
    10.     var div = document.querySelector("div");
    11.     div.onclick = function(){
    12.        if(div.className=="d1"){
    13.         div.className = "d2";
    14.        }else {
    15.         div.className = "d1";
    16.        }
    17.     }
    18. script>
    19. <style>
    20.     .d1 {
    21.         color: black;
    22.         background-color: whitesmoke;
    23.     }
    24.     .d2 {
    25.         color: white;
    26.         background-color: black;
    27.     }
    28. style>

    6. 操作节点

    6.1 新增节点

    新增分为两步：

    1. 创建元素节点
    2. 把元素节点插入dom树中

    6.1.1 创建元素节点

    使用createElement方法创建一个元素

    示例

    1. <body>
    2.     
    3. body>
    4. <script>
    5.     var div = document.createElement("div");
    6.     div.id = "mydiv";
    7.     div.innerHTML = "哈哈";
    8.     console.log(div);
    9. script>

    发现虽然div标签创建成功了，但是没有在页面上显示出来，原因就是我们还没有将其插入到DOM树中

    上面是创建元素节点，还可以创建：

    • createTextNode：创建文本节点
    • createComment：创建注释节点
    • createAttribute：创建属性节点

    6.1.2 往dom树中插入节点

    使用appendChild将节点插入到指定节点的最后一个孩之后

    语法：element.appendChild(aChild) 

    示例：

    1. <body>
    2.     <div id="d1">
    3.         <div>111div>
    4.         <div>222div>
    5.     div>
    6. body>
    7. <script>
    8.     var div = document.createElement("div");
    9.     div.id = "mydiv";
    10.     div.innerHTML = "哈哈";
    11.     var div1 = document.querySelector("#d1");
    12.     div1.appendChild(div);
    13. script>

    使用insertBefore将节点插入到指定节点之前

    语法：parentNode.insertBefore(newNode,referenceNode) 

    说明：

    • parentNode：被插入节点的父节点 
    • newNode：待插入的节点
    • referenceNode：新节点插入这个节点之前

    如果referenceNode为null，则newNode将被插入子节点的末尾

    示例：

    1. <body>
    2.     <div id="d1">
    3.         <div>111div>
    4.         <div>222div>
    5.         <div>333div>
    6.         <div>444div>
    7.     div>
    8. body>
    9. <script>
    10.     var div = document.createElement("div");
    11.     div.id = "mydiv";
    12.     div.innerHTML = "哈哈";
    13.     var div1 = document.querySelector("#d1");
    14.     div1.insertBefore(div,div1.children[0]);
    15. script>

    注意：如果一个节点插入两次，则只有最后一次生效 

    1. <body>
    2.     <div id="d1">
    3.         <div>111div>
    4.         <div>222div>
    5.         <div>333div>
    6.         <div>444div>
    7.     div>
    8. body>
    9. <script>
    10.     var div = document.createElement("div");
    11.     div.id = "mydiv";
    12.     div.innerHTML = "哈哈";
    13.     var div1 = document.querySelector("#d1");
    14.     div1.insertBefore(div,div1.children[0]);
    15.     div1.insertBefore(div,div1.children[2]);
    16. script>

      

    6.2 删除节点

    使用removeChild删除子节点

    语法：oldChild = element.removeChild(chid); 

    • child为待删除结点
    • element为child的父节点
    • 返回值为被删除的结点
    • 被删除的结点只是从dom树中被删除了，但是仍然在内存中，可以随时加入dom树的其他位置
    • 如果上child不是element的子结点，则该方法会抛出异常

    示例：

    1. <body>
    2.     <div id="i1">
    3.         <div>111div>
    4.         <div>222div>
    5.         <div>222div>
    6.         <div>333div>
    7.     div>
    8. body>
    9. <script>
    10.     var i1 = document.querySelector("#i1");
    11.     i1.removeChild(i1.children[2]);
    12. script>

  • 相关阅读:
    7-29 删除字符串中的子串
    python selenium参数详解和案例实现
    2022年好用的蓝牙耳机有哪些？2022年蓝牙耳机推荐
    80行代码轻松搞定反向传播神经网络(BPNN)
    android audio volume 知识点
    为什么要做知识管理
    python | 自动化exe程序
    互联网公司是如何跟踪用户喜好并推荐商品的？
    WPF图表库LiveCharts的使用
    脚本：python实现樱花树
  • 原文地址：https://blog.csdn.net/qq_58710208/article/details/126178855