前端—JavaScript(WebAPI)

最新推荐文章于 2024-05-11 18:21:57 发布

金字塔端的蜗牛

最新推荐文章于 2024-05-11 18:21:57 发布

阅读量201

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_62824239/article/details/125039940

版权

学习了前面的知识，要想写实际的程序，是不够的，还需要掌握相关的“生态”，配套的库/框架。
对于在浏览器上运行的JS来说，最最核心的库，就是DOM API。

DOM API：浏览器给JS提供的原生的接口，基于这样的接口，就可以针对页面上的元素进行操作了。
DOM ：文档对象模型。在HTML中，会把每个html标签，都视为是一个JS中可以操作对象，操作这个对象就可以影响到界面的显示。

DOM基本概念

什么是DOM

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

网页内容
网页结构
网页样式

DOM树

一个页面的结构是一个树形结构，称为DOM树。
在这里插入图片描述

获取元素

获取元素，是使用DOM的基础。
要想操作页面上的元素，就需要先拿到对应的JS对象。

querySelector

<body>
    <div class="one">
         hello one
     </div>
     <div id="two">
         hello two
     </div>
     <ul>
         <li>aaa</li>
     </ul>

     <script>
        //  querySelector参数，就是一个CSS的选择器
         let e=document.querySelector('.one');
         console.log(e);
         let r=document.querySelector('#two');
         console.log(r);
        //  复合选择器
         let s=document.querySelector('ul li');
         console.log(s);
         
         
         
     </script>

</body>

执行效果

当querySelector的参数的选择器，匹配到了多个元素的时候，此时返回的对象，就是匹配结果中的第一个元素。

 <ul>
         <li>aaa</li>
         <li>bbb</li>
         <li>ccc</li>
         <li>ddd</li>
  </ul>
  <script>
   let s=document.querySelector('ul li');
         console.log(s);
   </script>

执行结果

因此像这种情况，如果想把这些li都选中，就需要使用querySelectorAll。
querySelectorAll返回的是一个数组，包含所有被选中的元素。

querySelectorAll

 <ul>
         <li>aaa</li>
         <li>bbb</li>
         <li>ccc</li>
         <li>ddd</li>
  </ul>
  <script>
   let s=document.querySelectorAll('ul li');
         console.log(s);
   </script>

执行效果

准确的说，querySelectorAll返回的不是一个真正的原生的数组，而是一个对象，只不过这个对象，有length，也能够通过下标的方式来访问内部元素。这样的对象使用起来和数组非常相似，称为“伪数组”。

事件

事件概念

JS中的很多代码，都是通过“事件”来触发的。
事件，就是浏览器对于用户的操作行为进行了一个“统称”。（准确的说，事件也不一定是用户操作产生的，但是大部分是）

例如：鼠标在页面上移动，就会产生一个鼠标移动事件，
鼠标在页面某个位置点击，就会产生一个鼠标点击事件
JS就是在不同的事件中，进行不同的处理。

事件三要素

事件源：哪个HTML元素产生的事件
事件类型：鼠标移动，鼠标点击，键盘事件，窗口大小改变事件
事件处理程序：当事件产生之后，执行啥样的JS代码。

 <button>这是一个按钮</button>
  <script>
         let button=document.querySelector('button');
         button.onclick=function(){
             alert('hello');
         }
  </script>

执行效果：

操作元素

操作=获取+修改

操作元素内容

通过对象里面的一个属性innerHTML来实现（元素里面包含的html代码是啥样的）
示例一：

 <div id="screen">hello world </div>
 <button id="btn">这是按钮</button>
 <script>
         let btn=document.querySelector('#btn');
         btn.onclick=function() {
             let screen=document.querySelector('#screen');
             console.log(screen.innerHTML);
         }
  </script>

示例二：

 <div id="screen">hello world</div>

    <button id="btn">这是获取内容按钮</button>
   <button id="btn2">这是修改内容按钮</button>
<script>
   let btn2=document.querySelector('#btn2');
    btn2.onclick=function() {
             let screen=document.querySelector('#screen');
             screen.innerHTML='<h1>修改后的内容</h1>';
    }

</script>

示例三：
写一个div显示整数，写一个按钮，每次点击这个按钮，就让里面的数 +1

 <div id="screen">0</div>
  <button id="plus">+</button>
  <script>
      let plusBtn=document.querySelector('#plus');
      plusBtn.onclick=function() {
            //  1.获取到screen中的值
            let screen=document.querySelector('#screen');
            let val=screen.innerHTML;
            //  2.把这个值+1
           val += 1;
            //  3.把新的值写回去
            screen.innerHTML=val;
      }
  </script>

执行效果：

是因为这里的innerHTML得到的是string类型，要想进行相加，句需要把字符串转成整数。

 <div id="screen">0</div>
  <button id="plus">+</button>
  <script>
      let plusBtn=document.querySelector('#plus');
      plusBtn.onclick=function() {
            //  1.获取到screen中的值
            let screen=document.querySelector('#screen');
            let val=screen.innerHTML;
            val=parseInt(val);
            //  2.把这个值+1
           val += 1;
            //  3.把新的值写回去
            screen.innerHTML=val;
      }
  </script>

获取input输入的字符串
input是单标签，不能使用innerHTML，此处是通过value来获取到input中的内容。

  <input type="text" id="screen" value="0">
  <button id="plus">+</button>
  <script>
      let plusBtn=document.querySelector('#plus');
      plusBtn.onclick=function() {
            //  1.获取到screen中的值
            let screen=document.querySelector('#screen');
            let val=screen.value;
            val=parseInt(val);
            //  2.把这个值+1
           val += 1;
            //  3.把新的值写回去
            screen.value=val;
      }
  </script>

操作元素属性

通过 dom对象.属性名就可以进行操作了。

<img src="cat.jpg"  alt="">
    <script>
        let s=document.querySelector('img');
        s.onclick=function() {
            console.log(s.src);
            if(s.src.indexOf('cat.jpg') >= 0){
                s.src='dog.jpg';
            }else if(s.src.indexOf('dog.jpg') >= 0){
                s.src='cat.jpg';
            }
           
        }
    </script>

获取/修改表单元素属性
示例一：切换按钮的文本.
在 “播放” - “暂停” 之间切换.

 <input type="button" value="播放">
 <script>
      let input=document.querySelector('input');
       input.onclick=function() {
            if(input.value=='播放'){
                input.value='暂停';
            }else if(input.value=='暂停'){
                input.value='播放';
            }
        }
 </script>

示例二：全选 / 取消按钮

<input type="checkbox" id="all">全都要<br
<input type="checkbox" class="girl">貂蝉<br>
<input type="checkbox" class="girl">小乔<br
<input type="checkbox" class="girl">安其拉<br>
<input type="checkbox" class="girl">妲己<br>
 <script>
        //1.先获取到元素
        let all=document.querySelector('#all');
        let girls=document.querySelectorAll('.girl');
        //2.给all注册点击事件
        all.onclick=function() {
            for(let i=0;i<girls.length;i++){
                girls[i].checked=all.checked;

            }
        }
        //3.针对每个girl注册点击事件，实现对于all的取消操作
        for(let i=0;i<girls.length;i++){
            girls[i].onclick=function() {
                all.checked=checkGirls(girls);
            }
        }
        function checkGirls(girls){
            //判定是不是所有的girl都被选中
            for(let i=0;i<girls.length;i++){
                if(!girls[i].checked){
                    //只要有一个没被选中，就让all是未选中状态
                    return '';

                }
            }
            //遍历之后，发现所有的都被选中，就让all也是选中的状态
            return 'checked';
        }
  </script>

操作元素样式

本质上也是操作元素属性。

style对应行内样式（直接把样式写到style里面）

示例：点击放大字体

<div style="font-size:20px">这是一个文本</div>
    <script>
        let div=document.querySelector('div');
        div.onclick=function() {
            //1.先获取到当前字体的大小
            console.log(parseInt(div.style.fontSize));
            let fontSize=parseInt(div.style.fontSize);
             //2.在当前字体大小的基础上，多加5px
             fontSize += 5;
             div.style.fontSize=fontSize+'px';

        }
    </script>

执行效果：

className/ classList对应内部样式/外部样式，应用了一个/一组CSS类名。

在HTML中，表示类名的属性，就是class ，但是在JS中，属性名变成了className/ classList。
class在JS中也是一个关键字。

示例：夜间模式

 <style>
       .light {
            background-color: #fff;
            color:#000;

        }
        .dark {
            background-color: #000;
            color:#fff;
        }
    </style>
    <div class="light" style="height:500px">这是一段话</div>
    <button>关灯</button>
    <script>
        let div=document.querySelector('div');
        let button=document.querySelector('button');
        button.onclick=function() {
            if(div.className=='light'){
                div.className='dark';
                button.innerHTML='开灯';
            }else if(div.className=='dark'){
                div.className='light';
                button.innerHTML='关灯';
            }
        }
     </script>

操作节点

新增节点

创建新节点

<div class="container">
    <script>
        let newDiv=document.createElement('div');
        newDiv.id='newDiv';
        newDiv.className='one';
        newDiv.innerHTML='hello';
        console.log(newDiv);
     </script>

执行结果：

此处创建的节点，并没有被挂在dom树上，因此浏览器页面中，是显示不出来的。

把节点挂在dom树上

使用appendChild把节点插入到某个节点的子元素中。

<div class="container">
    <script>
        let newDiv=document.createElement('div');
        newDiv.id='newDiv';
        newDiv.className='one';
        newDiv.innerHTML='hello';
        console.log(newDiv);

        let container=document.querySelector('div');
       container.appendChild(newDiv);
   </script>

删除节点

removeChild来实现
得先拿到父节点，在拿到待删除的子节点

 <div class="container">
    
    </div>
    <button>删除div</button>
    <script>
        let newDiv=document.createElement('div');
        newDiv.id='newDiv';
        newDiv.className='one';
        newDiv.innerHTML='hello';
        console.log(newDiv);

        let container=document.querySelector('div');
       container.appendChild(newDiv);

       let button=document.querySelector('button');
       button.onclick=function() {
           container.removeChild(newDiv);
       }
     </script>

代码案例

猜数字

预期效果：

<body>
    <button id="resetBtn">重新开始一局游戏</button><br>
    <span>要猜的数字：</span>
    <input type="text">
    <button id="guessBtn">猜</button><br>
    <span>结果：</span><span id="result"></span><br>
    <span>已经猜的次数：</span><span id="guessCount">0</span>

    <script>
        //1.先把上面需要用到的元素都拿到
        let resetBtn=document.querySelector('#resetBtn');
        let input=document.querySelector('input');
        let guessBtn=document.querySelector('#guessBtn');
        let resultSpan=document.querySelector('#result');
        let guessCountSpan=document.querySelector('#guessCount');
        //2.生成一个1-100的随机数
        let toGuess= Math.floor(Math.random() * 100) + 1;
        console.log(toGuess);
        //3.实现点击 猜 按钮的逻辑
        guessBtn.onclick=function() {
            //1.读取到input中输入的内容，并转成整数
            if(input.value==' '){
                return;
            }
            let  curNum=parseInt(input.value);
            //2.判定大小关系，并给出提示
            if(curNum < toGuess){
                resultSpan.innerHTML='小了';
                resultSpan.style.color='red';
            } else if(curNum > toGuess){
                resultSpan.innerHTML='大了';
                resultSpan.style.color='red';
            }else {
                resultSpan.innerHTML='猜对了';
                resultSpan.style.color='yellow';
            }
            //3.更新猜的次数
             let guessCount=parseInt(guessCountSpan.innerHTML);
             guessCountSpan.innerHTML=guessCount + 1;
        }
        //4.实现reset操作的逻辑
        resetBtn.onclick=function() {
            //让页面刷新
            location.reload();
        }
   </script>
</body>

在这里插入图片描述

表白墙

预期效果：

<body>
    <style>
        * {
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .container {
            width:100%;
        }
        h3 {
            text-align: center;
            padding:20px 0;
            font-size: 30px;
        }
        p{
            text-align: center;
            color:#999;
            padding:10px 0;
        }
        .row {
            width:400px;
            height:50px;
            margin:0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span {
            width:60px;
            font-size: 15px;
        }
        .row input {
            width:300px;
            height:40px;
            line-height: 40px;
            font-size: 15px;
            text-indent: 0.5em;
            outline: none;
        }
        .row #submit {
            width:200px;
            height:40px;
            line-height: 40px;
            margin:0 auto;
            color:white;
            background-color: orange;
            border:none;
            border-radius: 10px;
        }
        .row #submit:active {
            background-color: grey;
        }


    </style>



    <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
         </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
         </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>

    <script>
        //当用户点击submit，就会获取到input中的内容，从而把内容构造成一个div，插入到页面的末尾
        let submitBtn=document.querySelector('#submit');
        submitBtn.onclick=function() {
            //1.先获取到3个input中的内容
            let inputs=document.querySelectorAll('input');
            let from=inputs[0].value;
            let to=inputs[1].value;
            let meg=inputs[2].value;
            if(from=='' || to=='' || meg==''){
                //用户还没填写完事，暂时先不提交数据
                return;
            }
            //2.生成新的div，内容就是input里的内容，把这个新的div加到页面中
            let div=document.createElement('div');
            div.innerHTML=from+'对'+to+'说：'+meg;
            div.className='row';
            let container=document.querySelector('.container');
            container.appendChild(div);
            //3.清空之前输入框的内容
            for(let i=0;i<inputs.length;i++){
                inputs[i].value='';
            }



        }
    </script>
    
</body>

金字塔端的蜗牛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端—JavaScript(WebAPI)

目录DOM基本概念什么是DOMDOM树获取元素querySelectorquerySelectorAll事件事件概念事件三要素操作元素操作元素内容操作元素属性操作元素样式操作节点新增节点创建新节点把节点挂在dom树上删除节点代码案例猜数字表白墙学习了前面的知识，要想写实际的程序，是不够的，还需要掌握相关的“生态”，配套的库/框架。对于在浏览器上运行的JS来说，最最核心的库，就是DOM API。DOM API：浏览器给JS提供的原生的接口，基于这样的接口，就可以针对页面上的元素进行操作了。DOM
复制链接

扫一扫