前端 --- JavaScript WebAPI

转x33g5p2x  于2022-04-19 转载在 Java  
字(12.2k)|赞(0)|评价(0)|浏览(516)

1. WebAPI 背景知识

1.1 什么是 WebAPI

JS 分成三个大的部分:

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

WebAPI 就包含了 DOM + BOM.

1.2 DOM 基本概念

什么是 DOM

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

  1. 网页内容
  2. 网页结构
  3. 网页样式

DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树.

重要概念:

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

2. 获取元素

2.1 querySelector

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

语法格式:

  1. let element = document.querySelector(selectirs);
  • selectors 填一个或者多个选择器

使用示例:

  1. <div class="one"> abc </div>
  2.     <div id="two"> def </div>
  3.     <div><input type="text"></div>
  4.     <script>
  5.         let one = document.querySelector('.one');
  6.         console.log(one);
  7.         let two = document.querySelector('#two');
  8.         console.log(two);
  9.         let three = document.querySelector('input');
  10.         console.log(three);
  11.     </script>

运行截图

2.2 querySelectorAll

如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

使用示例:

  1. <div class="one">123</div>
  2.     <div id="two">456</div>
  3.     <script>
  4.         let divs = document.querySelectorAll('div');
  5.         console.log(divs);
  6.     </script>

运行截图

3. 操作元素

3.1 获取/修改元素内容

1. innerText

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

**注:**不识别 html 标签. 是非标准的(IE发起的). 读取结果不保留html源码中的 换行和空格.

使用示例:

  1. <div class="one">hello world</div>
  2.     <div class="two">hello world</div>
  3.     <script>
  4.         let div = document.querySelector('.two');
  5.         console.log(div);
  6.         div.innerText = '<span>world hello</span>';
  7.     </script>

运行截图:

通过 innerText无法获取到 div 内部的 html 结构, 只能得到文本内容.

2. innerHTML

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

  • 识别 html 标签. W3C 标准的. 读取结果保留html源码中的 换行 和 空格

代码示例:

  1. <div class="one">hello world</div>
  2.     <div class="two">hello world</div>
  3.     <script>
  4.         let div = document.querySelector('.two');
  5.         console.log(div);
  6.         div.innerHTML = '<span>world hello</span>';
  7.     </script>

运行截图:

innerHTML 不光能获取到页面的 html结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行

3.2 获取/修改元素属性

注: 通过 element.属性来获取属性
代码示例:

  1. <img src="male.png" title="男" alt="男">
  2.     <script>
  3.         let img = document.querySelector('img');
  4.         img.onclick = function() {
  5.             if(img.title.lastIndexOf("男") != -1){
  6.                 img.src = 'female.png';
  7.                 img.title = '女';
  8.             }else{
  9.                 img.src = 'male.png';
  10.                 img.title = '男';
  11.             }
  12.         }
  13.     </script>

运行结果:

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

代码示例1: 播放 暂停的转换.

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

运行截图:

代码示例2: 计数

  1. <input type="text" value="0" id="one">
  2.     <input type="button" value="点击+1" id="add">
  3.     <script>
  4.         let one = document.querySelector('#one');
  5.         let add = document.querySelector('#add');
  6.         add.onclick = function() {
  7.             one.value++;
  8.         }
  9.     </script>

代码示例3: 全选/取消全选按钮

  1. <h3>选择你喜欢玩的游戏</h3>
  2.     <input type="checkbox" class="game">王者荣耀<br/>
  3.     <input type="checkbox" class="game">和平精英<br/>
  4.     <input type="checkbox" class="game">开心消消乐<br/>
  5.     <input type="checkbox" class="game">我的世界<br/>
  6.     <input type="checkbox" class="all">全选
  7.     <script>
  8.         let games = document.querySelectorAll('.game');
  9.         let all = document.querySelector('.all');
  10.         all.onclick = function(){
  11.             for (let i = 0; i < games.length; i++) {
  12.                 games[i].checked = all.checked;
  13.             }
  14.         }
  15.         for (let i = 0; i < games.length; i++) {
  16.             games[i].onclick = function() {
  17.                 all.checked = allChecked();
  18.             }
  19.         }
  21.         function allChecked() {
  22.             for (let i = 0; i < games.length; i++) {
  23.                 if(!games[i].checked){
  24.                     return false;
  25.                 }
  26.             }
  27.             return true;
  28.         }
  29.     </script>

运行截图

3.4 获取/修改样式属性

CSS 中指定给元素的属性, 都可以通过 JS 来修改
style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.
例如: font-size => fontSize, background-color => backgroundColor 等

1. 行内样式操作

  1. element.style.[属性名] = [属性值];
  2. element.style.cssText = [属性名+属性值];
代码示例: 字体变大
  1. <div style="font-size: 20px;color:red">你好</div>
  2.     <script>
  3.         let div = document.querySelector('div');
  4.         div.onclick = function() {
  5.             let fontSize = parseInt(div.style.fontSize);
  6.             fontSize += 10;
  7.             div.style.fontSize = fontSize + "px";//注意有单位的要带上单位
  8.         }
  9.     </script>

运行截图:

2. 类名样式操作

  1. element.className = [CSS 类名];
代码示例: 背景颜色变化
  1. <style>
  2.         html,body{
  3.             height: 100%;
  4.             width: 100%;
  5.         }
  6.         div {
  7.             height: 100%;
  8.             width: 100%;
  9.         }
  10.         .black{
  11.             background-color:black;
  12.             color: gray;
  13.         }
  14.         .gray {
  15.             background-color: gray;
  16.             color: black;
  17.         }
  18.     </style>
  19.     <div class='black'>
  20.         你好!
  21.     </div>
  22.     <script>
  23.         let div = document.querySelector('div');
  24.         div.onclick = function() {
  25.             if(div.className.indexOf("black") != -1){
  26.                 div.className = 'gray';
  27.             }else{
  28.                 div.className = 'black';
  29.             }
  30.         }
  31.     </script>

运行截图:

4. 操作节点

4.1 新增节点

分为两个步骤:

  1. 创建元素节点
    ① createElement创建元素节点.
    ② createTextNode 创建文本节点
    ③ createComment 创建注释节点
    ④ createAttribute 创建属性节点
  2. 插入节点到 dom 树中
    ① 使用 appendChild 将节点插入到指定节点的最后一个孩子之后
    ②使用insertBefore将节点插入到指定节点之前

代码示例:

  1. <div class="test">
  3.     </div>
  4.     <script>
  5.         let div = document.createElement('div');
  6.         div.id = 'mydiv';
  7.         div.className = 'one';
  8.         div.innerHTML = 'hehe';
  10.         let test = document.querySelector('.test');
  11.         test.appendChild(div);
  12.     </script>

运行截图:

代码示例: 当一个节点插入两次,相当于移动.

  1. <div class="parent">
  2.         <div>1</div>
  3.         <div>2</div>
  4.         <div>3</div>
  5.         <div>4</div>
  6.     </div>
  8.     <script>
  9.         let child = document.createElement('div');
  10.         child.innerHTML = '100';
  12.         let parent = document.querySelector('.parent');
  13.         // 本来有四个元素,0号元素没有,就插入一个元素
  14.         parent.insertBefore(child,parent.children[0]);
  15.         // 插入到2号元素前,1号元素是1不是child,2号元素是2.
  16.         parent.insertBefore(child,parent.children[2]);
  17.     </script>

运行结果:

4.2 删除节点

使用 removeChild 删除子节点

  1. oldChild = element.removeChild(child);

注: 如果 child 不是 element 的子节点,会抛异常

代码示例:

  1. <div class="parent">
  2.         <div class="child">1</div>
  3.         <div class="child">2</div>
  4.         <div class="child">3</div>
  5.     </div>
  6.     <script>
  7.         let parent = document.querySelector('.parent');
  8.         let childs = document.querySelectorAll('.child');
  9.         parent.removeChild(childs[1]);
  10.     </script>

运行结果:

5. 实现几个案例

5.1 猜数字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>猜数字</title>
  8. </head>
  9. <body>
  10.     <div class="parent">
  11.         <div><input type="button" value="重新开始一局新游戏" class="again"></div>
  12.         <div>
  13.             请输入要猜的数字: <input type="text" class="guessNum"> <input type="button" value="猜" class="press">
  14.         </div>
  15.         <div>
  16.             已经猜的次数: <span class="count">0</span>
  17.         </div>
  18.         <div>
  19.             结果: <span class="result"></span>
  20.         </div>
  21.     </div>
  22.     <script>
  23.         let guessNum = document.querySelector('.guessNum');
  24.         let press = document.querySelector('.press');
  25.         let count = document.querySelector('.count');
  26.         let result = document.querySelector('.result');
  28.         let countCount = 0;
  29.         let guessResult = Math.floor(Math.random()*100)+1;
  30.         press.onclick = function(){
  31.             countCount++;
  32.             count.innerHTML = countCount;
  33.             guessNumber = parseInt(guessNum.value);
  34.             if(guessNumber == guessResult){
  35.                 result.innerHTML = '猜对了';
  36.                 result.style = 'color : red';
  37.             }else if(guessNumber < guessResult){
  38.                 result.innerHTML = '猜小了';
  39.                 result.style = 'color : blue';
  40.             }else{
  41.                 result.innerHTML = '猜大了';
  42.                 result.style = 'color : orange';
  43.             }
  44.         }
  46.         let again = document.querySelector('.again');
  47.         again.onclick = function() {
  48.             guessResult = Math.floor(Math.random()*100)+1;
  49.             countCount = 0;
  50.             count.innerHTML = 0;
  51.             guessNum.value = '';
  52.             result.innerHTML ='';
  53.         }
  54.     </script>
  55. </body>
  56. </html>

运行截图:

5.2 表白墙

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表白墙</title>
  8. </head>
  9. <body>
  10.     <div class="parent">
  11.         <div id="wall">表白墙</div>
  12.         <div id="remind">输入后点击提交,会将信息显示在表格中</div>
  13.         <div class="one"><span class="two">谁:</span><input type="text" class="text"></div>
  14.         <div class="one"><span class="two">对谁:</span><input type="text" class="text"></div>
  15.         <div class="one"><span class="two">说什么:</span><input type="text" class="text"></div>
  16.         <div class="one"><input type="button" value="提 交" class="press"></div>
  17.     </div>
  18.     
  19.     <style>
  20.         /* 去除浏览器默认样式 */
  21.         * {
  22.             margin: 0;
  23.             padding: 0;
  24.         }
  25.         /* 设置总宽度 */
  26.         .parent {
  27.             width: 400px;
  28.             margin: 0 auto;
  29.         }
  30.         /* 涉资表白墙样式 */
  31.         #wall {
  32.             font-size: 30px;
  33.             font-weight: 700;
  34.             text-align: center;
  35.             margin: 5px;
  36.         }
  37.         /* 设置提示信息样式 */
  38.         #remind{
  39.             font-size:13px;
  40.             text-align: center;
  41.             color:gray;
  42.             margin: 5px;
  43.         }
  44.         /* 设置弹性布局 */
  45.         .one {
  46.             display: flex;
  47.             justify-content: center;
  48.             align-items: center;
  49.             height: 40px;
  50.         }
  51.         /* 设置文字内容 */
  52.         .two {
  53.             width: 100px;
  54.             line-height: 40px;
  55.         }
  56.         /* 设置输入框 */
  57.         .one .text{
  58.             width: 200px;
  59.             height: 20px;
  60.         }
  61.         /* 提交按钮的设置 */
  62.         .one .press{
  63.             width: 304px;
  64.             height: 40px;
  65.             color:white;
  66.             background-color: orange;
  67.             border-radius: 5px;
  68.             border: none;
  69.         } 
  70.         /* 设置鼠标点击的时候改变颜色 */
  71.         .one .press:active{
  72.             background-color: red;
  73.         }
  74.         /* 提交之和内容的设置 */
  75.         .elem {
  76.             text-align: center;
  77.             
  78.         }
  79.     </style>
  80.     <script>
  81.         // 获取到输入框元素
  82.         let texts = document.querySelectorAll('.text');
  83.         // 获取到提交按钮元素
  84.         let press = document.querySelector('.press');
  85.         // 设置单击事件
  86.         press.onclick = function() {
  87.             let user1 = texts[0].value;
  88.             let user2 = texts[1].value;
  89.             let message = texts[2].value;
  90.             // 如果有一个为空,就提交不成功
  91.             if(user1=='' || user2=='' || message==''){
  92.                 return;
  93.             }   
  94.             // 这里都不为空,创建新的节点 
  95.             let elem = document.createElement('div');
  96.             elem.className = 'elem';
  97.             elem.innerHTML = user1 + '对' + user2 + '说: ' +message;
  98.             // 插入新的节点
  99.             let parent = document.querySelector('.parent');
  100.             parent.appendChild(elem);
  101.             // 提交之后,将输入框置空.
  102.             for(let i = 0; i < 3; i++){
  103.                 texts[i].value='';
  104.             }
  105.         }
  106.     </script>
  107. </body>
  108. </html>

运行截图:

5.3 待办事项

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>待办事项</title>
  8. </head>
  9. <body>
  10.     <div class="parent">
  11.         <div class="one">
  12.             <input type="text" class="text"><input type="button" value="新建任务" class="submit">
  13.         </div>
  14.         <div class="two">
  15.             <div class="left">
  16.                 <h3>未完成</h3>
  17.             </div>
  19.             <div class="right">
  20.                 <h3>已完成</h3>
  21.             </div>
  22.         </div>
  23.     </div>
  24.     <style>
  25.         /* 去除浏览器默认样式 */
  26.         * {
  27.             margin: 0;
  28.             padding: 0;
  29.         }
  30.         /* 设置宽度 */
  31.         .parent {
  32.             width: 840px;
  33.             margin: 0 auto;
  34.         }
  35.         /* 设置输入框和新建的样式 */
  36.         .one {
  37.             height: 50px;
  38.             padding: 20px;
  39.         }
  40.         /* 设置输入框样式 */
  41.         .one .text{
  42.             height: 50px;
  43.             width: 600px;
  44.         }
  45.         /* 设置提交框样式 */
  46.         .one .submit {
  47.             background-color: orange;
  48.             color: white;
  49.             height: 50px;
  50.             width: 196px;
  51.             border: none;
  52.         }
  53.         /* 设置点击时的背景 */
  54.         .one .submit:active{
  55.             background-color: red;
  56.         }
  57.         /* 设置已完成和未完成的样式 */
  58.         .two{
  59.             width: 800px;
  60.             height: 800px;
  61.             display: flex;
  62.             margin: 0 auto;
  63.         }
  64.         /* 设置未完成和已完成字体样式 */
  65.         .two h3 {
  66.             height: 50px;
  67.             text-align: center;
  68.             line-height: 50px;
  69.             background-color: black;
  70.             color: white;
  71.         }
  72.         /* 设置未完成左边的样式 */
  73.         .left {
  74.             width: 50%;
  75.             height: 100%;
  76.         }
  77.         /* 设置已完成右边的样式 */
  78.         .right {
  79.             width: 50%;
  80.             height: 100%;
  81.         }
  82.         /* 新建任务的样式 */
  83.         .row {
  84.             height: 50px;
  85.             display: flex;
  86.             align-items: center;
  87.         }
  88.         /* 新建任务字体的样式 */
  89.         .row span {
  90.             width: 340px;
  91.         }
  92.         /* 新建任务的删除按钮样式 */
  93.         .row button{
  94.             width: 40px;
  95.             height: 40px;
  96.         }
  97.     </style>
  98.     <script>
  99.         // 首先获取新建按钮元素
  100.         let submit = document.querySelector('.submit');
  101.         // 设置鼠标单击事件
  102.         submit.onclick = function() {
  103.             // 获取输入框元素
  104.             let text = document.querySelector('.text');
  105.             // 判断输入框内容是否为空
  106.             if(text.value == '') return;
  107.             // 新建代办事项
  108.             let row = document.createElement('div');
  109.             row.className='row';
  110.             let checkBox = document.createElement('input');
  111.             checkBox.type='checkbox';
  112.             let thing = document.createElement('span');
  113.             thing.innerHTML = text.value;
  114.             let del = document.createElement('button');
  115.             del.innerHTML='删除';
  116.             row.appendChild(checkBox);
  117.             row.appendChild(thing);
  118.             row.appendChild(del);
  119.             // 获取左边元素
  120.             let left = document.querySelector('.left');
  121.             left.appendChild(row);
  122.             // 添加节点之后置空
  123.             text.value='';
  125.             // 设置选择框的鼠标单击事件
  126.             checkBox.onclick = function() {
  127.                 // 如果被选择了就移动已完成
  128.                 // 如果未完成就移动到未完成
  129.                 if(checkBox.checked){
  130.                     let target = document.querySelector('.right');
  131.                     target.appendChild(row);
  132.                 }else{
  133.                     let target = document.q
  134.                     uerySelector('.left');
  135.                     target.appendChild(row);
  136.                 }
  137.             }
  138.             // 设置删除按钮的鼠标单击事件
  139.             del.onclick = function() {
  140.                 // 使用 parentNode 获取到父节点
  141.                 let parent = row.parentNode;
  142.                 // 删除该节点
  143.                 parent.removeChild(row);
  144.             }
  145.         }
  146.     </script>
  147. </body>
  148. </html>

运行截图:

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/wwzzzzzzzzzzzzz/article/details/124217317

内容来源于网络，如有侵权，请联系作者删除！

JavaScript前端html5css3vscode

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com