JS学习笔记（三）

最新推荐文章于 2024-10-17 09:40:47 发布

vastSky0

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量74

点赞数

分类专栏：前端文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/NEXT00/article/details/129064829

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了API和WebAPI的概念，强调API是为程序员提供实现特定功能的接口，而WebAPI主要针对浏览器交互。接着详细讲述了DOM，它是处理HTML或XML的标准接口，用于操作和修改页面内容。最后，文章讨论了JavaScript事件，包括事件源、事件类型和事件处理程序，并给出动态更新按钮内容的案例。

摘要由CSDN通过智能技术生成

一、API和Web API

【1】API

API ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解︰API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

【2】Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM).现阶段我们主要针对于浏览器讲解常用的API，主要针对浏览器做交互效果。
比如我们想要浏览器弹出一个警示框，直接使用alert(‘弹出”)

【3】API和Web API区别

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

3.Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数)

二、DOM

【1】概念

文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML )的标准编程接口。
w3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

一个Html页面就是一个文档。

在这里插入图片描述

（DOM树）

【2】获取DOM元素

如果是在Html中操作DOM元素，需要先定义后引用，如在script标签中使用getElementById(‘me’)方法，其引用的id：me对应的元素对象需要在script标签之前就存在。

小技巧：通过console.dir();打印对象，可以更好的查看里面的属性和方法。

【3】案例练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB API学习</title>
</head>
<body>
    <ul>
        <li>1我爱学习,天天向上</li>
        <li>2我爱学习,天天向上</li>
        <li>3我爱学习,天天向上</li>
        <li>4我爱学习,天天向上</li>
        <li>5我爱学习,天天向上</li>
    </ul>
    <h3 id="forever">我爱湘大</h3>
    <ol id="oTable1">
        <li>我爱湘大1</li>
        <li>我爱湘大2</li>
        <li>我爱湘大3</li>
        <li>我爱湘大4</li>
    </ol>
    <div class="box">
        <h4>这里是box1</h4>
    </div>
    <div class="box">
        <h4>这里是box2</h4>
    </div>
    <script>
        //通过标签名获取，返回值是伪数组形式存储
        var myList=document.getElementsByTagName('li');
        console.log(myList);
        for (let i=0;i<myList.length;i++) {
            console.log(myList[i]);
        }
        //通过id获取
        var text1=document.getElementById('forever');
        console.log(text1);
        //获取父标签ol下的子标签li
        var table1=document.getElementById('oTable1');
        var myList2=table1.getElementsByTagName('li');
        console.log(myList2);
        //通过类名class获取
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
        //H5提供一个综合性方法querySelector('');
        //返回的是指定选择器的第一个元素对象，因为同类的可能有好几个标签
        //记得加符号#和.
        var box1=document.querySelector('.box');
        console.log(box1);
        var li1=document.querySelector('li');
        console.log(li1);
        //一次获取指定选择器所有的元素对象
        var allBox=document.querySelectorAll('.box');
        console.log(allBox);
    </script>
</body>
</html>

补充知识：

//获取body元素
var bodyEle=document.body;
console.log(bodyEle);
//获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);
// console.log(htmlEle.innerHTML);

三、事件

【1】概念

（1）JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。简单理解∶触发—响应机制。
（2）网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
（3）事件分为三个部分（三要素）：事件源、事件类型、事件处理程序

//(1)事件源事件被触发的对象谁按钮
var btn = document.getElementById( " btn " );
//(2)事件类型﹑如何触发什么事件比如鼠标点击(onclick)还是鼠标经过还是键盘按下
//(3)事件处理程序通过一个函数赋值的方式完成
btn1.onclick =function(){
            alert('xtu');
        };

案例：

//设置一个按钮，内容为“当前时间”，点击后按钮内容显示当前时间
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB API学习</title>
</head>

<body>
    <!-- <button id="btn1">母校</button> -->
    <button id="btn2">当前时间</button>
    <script>
        /* var btn1 = document.getElementById("btn1");
        btn1.onclick =function(){
            alert('xtu');
        }; */
        var btn2 =document.getElementById('btn2');
        btn2.onclick=function(){
            var date =new Date();
            var year=date.getFullYear();
            //getMonth方法返回的是索引值，从0开始的，要得到真正的月份数需要加一
            var month=date.getMonth()+1;
            var day=date.getDate();
            //getDay方法返回的是一周中的星期几，为整数形式
            var weekDay = date.getDay();
            var weekArr=['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
            var today=year+'年-'+month+'月-'+day+'日-'+weekArr[weekDay];
            btn2.innerText=today;
        };
    </script>
</body>

</html>