前端day12-JS(WebApi)学习笔记(操作元素属性，事件介绍)

原创

帅的一麻皮

修改于 2020-04-17 10:09:11

1.6K0

修改于 2020-04-17 10:09:11

文章被收录于专栏：前端与Java学习前端与Java学习

1-WebApi介绍

1.1-WebAPI概念介绍

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
- 任何开发语言都有自己的API
- API的特征输入和输出(I/O)
- API的使用方法(console.log())
WebAPI概念
- 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
- 此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

1.2-JavaScript组成三个部分

1.ECMAScript - JavaScript的核心
- 定义了javascript的语法规范
- JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准
2.DOM - 文档对象模型
- 一套操作页面元素的API
- DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
3.BOM - 浏览器对象模型
- 一套操作浏览器功能的API
- 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

1.3-DOM

Docuemnt Object Model（文档对象模型）
- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- HTML DOM 模型被构造为对象的树。
HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应

DOM工作原理:

硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树（document） -> 开始渲染页面

js为什么可以操作网页的html元素?

因为浏览器会将html代码读取到内存中，生成一颗dom树对象（document）,修改了dom树内容，最终页面也会变化

1.4-BOM

browerser object model:浏览器对象模型
BOM定义了一套操作浏览器功能的API

2-获取页面元素

1. document.querySelector('css选择器')

a. 只能获取满足选择器条件的第一个元素

b. 如果无法获取元素，则会返回null

2. document.querySelectorAll('css选择器')

a. 可以获取满足选择器条件的所有元素

b. 返回值一定是数组（伪数组）

    <div id="box1" class="one">div1</div>
    <div id="box2" class="one">div2</div>
    <p class="one">ppppp</p>
    <script>
        var one = document.querySelector(".one");
        console.log(one);//<div id="box" class="one">div1</div>
        var box = document.querySelector("#box2");
        console.log(box);//<div id="box2" class="one">div2</div>
        var oneList = document.querySelectorAll(".one");
        console.log(oneList);//NodeList(3) [div#box1.one, div#box2.one, p.one]

        var two = document.querySelector(".two");
        console.log(two);//如果没有该对象则返回null
        
        var box3 = document.querySelectorAll(".two");
        console.log(box3);//返回一个空的NodeList []
        
        //伪数组：有数组三要素，没有数组的api
        // oneList.reverse();//程序报错
    </script>

3-操作元素属性

3.1-元素属性操作

1.语法：元素.属性名(其实就是对象的取值赋值语法)
- 设置元素属性的值:元素.属性名 = 属性值
2.特点：
- 1.class在js中是一个关键字，如果要拿到类名需要使用className
- 2.只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值
- 3.一定是一个字符串，例如：div.style.height得到150px 得到的是一个带单位的字符串
- 4.如果css样式的属性有 -
  - 例如background-color,margin-top,使用js获取和设置这些属性的时候需要使用驼峰命名(因为-符号不符合js的命名规范)
  - 例如:div.style.backgroundColor
3.注意点：修改类名需要注意会覆盖掉原本的类样式，所以一般我们不会直接修改类名，而是在原先类名的基础上加一个类，这里需要注意多个类名之间的空格
- 例如：div.className += " two";//字符串拼接添加类型，注意多个类名之间的空格

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            border: 1px solid rgb(0, 0, 0);
            font-size: 30px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div id="box1" class="box" style="
    color:red;
    background-color: burlywood;
    margin-left:100px;
    ">
        hello Javascript
    </div>

    <script>
        var box1 = document.querySelector("#box1");//获取元素
        //2.操作元素的属性   ：对象的取值/赋值语法   (点语法 或 字符串语法)
        //2.1 取值:  对象名.属性名
        console.log(box1.id);//box1
        console.log(box1['id']);//box1
        
        console.log(box1.style);//css样式属性对象
        console.log(box1.style.color);//red
        console.log(box1.style.marginLeft);//100px 注意：marginLeft用驼峰命名法才能取到值
        //只能获取到行内样式的属性值，无法得到行外(内联/外联)样式的属性值
        console.log(box1.style.height);//因为没有定义在行内样式  返回空字符串
        
        //2.2 赋值：  对象名.属性名 = 值
        /*  
        注意点：html属性带- ，background-  font- margin- padding-,在js中都需要转成驼峰命名法
            a.驼峰命名法： （1）去掉- （2）将-后面的首字母变成大写
            b.原因： - 不符合js命名规则
        */
        box1.style.width="300px";
        box1.style.fontSize = "16px";
        box1.style.paddingTop = "30px";
        
    </script>
</body>
</html>

3.2-普通元素常用属性

3.3-表单元素常用属性

3.4-元素属性操作注意点

4-事件介绍及注册事件

1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div p）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
- 事件源.事件类型 = 事件处理函数
  - box.onclick = function(){}
4.事件工作原理
- a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
- b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
5.页面中 任何元素 都可以注册很多个事件(点击，移入等)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            border: 5px solid pink;
            background-color: burlywood;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="box1">点我触发事件</div>

    <script>
        var box1 = document.querySelector("#box1");
        box1.onclick = function(){
            console.log("你点击了我");
        }
        box1.onmouseover = function(){
            console.log("你触发了鼠标移入事件");
            box1.style.backgroundColor = "red";
        }
        box1.onmouseout = function(){
            console.log("你触发了鼠标移出事件");
            box1.style.backgroundColor = "yellow";
        }
        box1.ondblclick = function(){
            console.log("你触发了双击事件");
            box1.style.fontSize = "30px";
            box1.style.width = "200px";
            box1.style.height = "200px";
        }
    </script>
</body>
</html>

onclick:鼠标单击
onmouseover:鼠标移入
onmouseout:鼠标移出
onfocus:成为焦点
onblur:失去焦点

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

api