专栏首页前端与Java学习前端day12-JS(WebApi)学习笔记(操作元素属性,事件介绍)
原创

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

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:失去焦点

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6语法学习(变量的解构赋值)

    另一种情况是不完全解构:就是等号左边的模式只匹配一部分等号右边的数组,这样解构依然可以成功

    帅的一麻皮
  • JAVA中的反射笔记

    应用场景:在没有类之前就将创建对象的动作做完了,这就是我们动态获取指定类并且使用类中的内容,这就是反射的应用场景,这样就提高了程序的扩展性。

    帅的一麻皮
  • 前端移动web-day03学习笔记

    rem:参考的是根元素(html)字体大小 (统一的,一个页面只有一个html)

    帅的一麻皮
  • css中postion的fixed和absolute区别

    通过上面的例子,可知h2的绝对定位参照点是id=p2的父元素,p3是静态的static定位,不能当作定位点

    luxixing
  • 13_开发品牌名称获取接口的基于本地缓存的fallback降级机制

    fallback,你之前都是必须去调用外部的依赖接口,或者从MySQL中去查询数据的,但是为了避免说可能外部依赖会有故障

    JavaEdge
  • 自实现PC端jQuery版轮播图

      最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就...

    用户1174387
  • 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了...

    用户1174387
  • 自己实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了...

    用户1187932
  • 前端基础-CSS梅兰练习

    cwl_java
  • 日本创新公司开发AI骨架检测引擎支持NVIDIA AGX Xavier

    日本创新公司Next System将NVIDIA高性能嵌入式计算机“ Jetson AGX Xavier”添加到“ Standard”的兼容平台中,成为其自主开...

    GPUS Lady

扫码关注云+社区

领取腾讯云代金券