WebAPIs-01:（获取元素、操作元素、事件基础）

最新推荐文章于 2024-07-26 11:41:15 发布

A-sleep

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量496

点赞数 1

分类专栏： WebApis JavaScript 基础篇文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/FellAsleep/article/details/121884508

版权

JavaScript 基础篇同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

WebApis

8 篇文章 0 订阅

订阅专栏

1.Docuemnt Object Model（文档对象模型）

JavaScript组成三个部分:

1.ECMAScript - JavaScript的核心

定义了javascript的语法规范
JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准

2.DOM - 文档对象模型

一套操作页面元素的API
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

3.BOM - 浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。
在这里插入图片描述
DOM工作原理：
硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树（document） -> 开始渲染页面

  js为什么可以操作网页的html元素?
  因为浏览器会将html代码读取到内存中，生成一颗dom树对象（document）
  修改了dom树内容，最终页面也会变化

1.操作DOM元素

学习目标:
    1.查询单个元素:document.querySelector()
        
    2.查询所有元素:document.querySelectorAll()
        
    3.document.querySelector()  和 document.querySelectorAll() 区别
       3.1 document.querySelector(): 得到DOM对象,可以直接操作修改
       3.2 document.querySelectorAll() 得到数组,不可以直接操作修改   需要通过下标获取里面的DOM对象

在这里插入图片描述

        //把CSS  类选择器 作为函数参数 将函数用变量接收  实参名等于变量名 目的是方便阅读
        let box = document.querySelector('.box');
        // 类型检测 box为对象
        console.log(typeof box)//object 对象  
        console.log(box);
        // 对象访问:
        // 对象.属性名
        // 修改
        // 对象.属性名 = '新属性'

  		//选择器不存在则会获取null 空/
        let box1 = document.querySelector('.one');
        console.log(box1);//null

        //获取满足条件的所有元素
        let boxList = document.querySelectorAll('.box')
        console.log(boxList);//伪数组 需要通过数组下标获取里面的DOM对象
        boxList[1].style.color = 'yellow';
        //伪数组不能使用数组的方法
        //boxlist.reverse();

        //3.两种语法的区别
        // document.querySelector():得到DOM对象,可以直接操作修改

        box.style.color = 'red';

        // document.querySelectorAll():得到数组,不可以直接操作修改

2.操作元素属性

语法（普通元素）	示例	描述
元素.style.样式属性	box.style.width	获取元素`css样式`属性
className	box.className	获取元素`类名`
innerText	box.innerText	获取元素的文本
src	img.src	获取元素(图片img)的路径
href	a.href	获取元素（a标签）的超链接

语法（表单元素）	示例	描述
value	input.value	获取表单元素(单标签)的文本
disabled	input.disabled	是否禁用（`布尔类型`）
checked	input.checked	是否选中(`布尔类型`),radio单选框 checkbox多选框
selected	input.selected	是否选中(`布尔类型`),select下拉选择框

2.1 元素内容的属性操作

学习目标:操作元素内容

元素.innerText 获取文本元素
元素.innerHTML 获取文本内容(文本+标签)

异同点:

相同:都是获取字符串

不同:获取内容不同

   innerText:获取文本,无法解析字符串的标签
   innerHTML:获取内容,可以解析字符串的标签


        let box = document.querySelector('.box')

        console.log(box.innerText);

        console.log(box.innerHTML);

        // innerText:无法解析字符串的标签
        box.innerText = '<a href="">我是链接</a><p> 我是pp</p>'
        // innerHTML: 获取内容, 可以解析字符串的标签
        box.innerHTML = '<a href="">我是测试</a><p> 我是pp</p>'

2.2 元素的html属性操作

语法	作用
元素.id	获取id
元素.className	获取类名
元素.innerText	获取文本
元素.href	获取链接（常用于a标签）
元素.src	获取路径(常用于img标签)
元素.style	获取css样式对象(获取的是一个对象类型，包含所有css熟悉)
元素.style.backgroundColor	获取css样式的颜色（带`-`的css样式，需要使用驼峰命名来获取）

 学习目标:掌握元素的常用属性
			语法:
			对象.属性名
      		元素.href : 链接    a 标签的链接 
      		元素.src : 路径      img 标签的路径

    //获取元素
    //把CSS类选择器 作为函数参数 将函数用变量接收  实参名等于变量名 目的是方便阅读   // 类型检测 a为对象 
    let a = document.querySelector('a')
    let img = document.querySelector('img')

    // 1.href: a标签的链接
    console.log(a.href);
    //DOM工作原理是在渲染之前 将DOM树改了
    a.href = 'http://www.itheima.com'

    // 2. src: img 标签的路径
    console.log(img.src);//文件资源的绝对路径
    //对象.属性 访问 重新赋值
    img.src = './1.png'

2.3 元素的css属性操作

   通过style属性来修改CSS样式:
   元素.style.样式名

   //先获取元素
        let box = document.querySelector('.box')

        //1.通过style属性来改  元素.style.样式名
        box.style.width = '200px';
        // 注意点:如果样式有- ,border- margin- font- ,在DOM语法中 都需要转成小驼峰命名法
        // 原因: 因为 - 不符合JS命名规则
        box.style.marginTop = '100px';
        box.style.backgroundColor = 'pink';

3.元素样式属性操作三种方式

1.元素.style.样式名
	*场景:修改单个样式
	 例如:box.style.width = '200px';
	 
2.元素.className
	*了解:通过类目可以修改多个样式,但是会覆盖原先的类样式.(使用场景不多)
	通过(className)操作CSS  对象.className = '类名'
	例如:
	//先获取元素
    let one = document.querySelector('.one')
    //对象.属性 访问 重新赋值
    one.className = ('two')

3.classList语法:操作类名,但是不会覆盖原先的类名.
通过新增删除切换类名的操作来修改CSS样式.
// 1. 新增样式：对象.classList.add(‘类名’)
// 2. 删除样式：对象.classList.remove(‘类名’)
// 3. 切换样式：对象.classList.toggle(‘类名’)
(切换样式: 有则移除, 无则追加)

//classList语法
    //  1. 新增样式：  对象.classList.add('类名')
    //  2. 删除样式：  对象.classList.remove('类名')
    //  3. 切换样式：  对象.classList.toggle('类名')

/*注意事项:.
		('')括号里的类选择器和类目要注意区分
		('.box')是类选择器 
		('box')是类名 */
		
		let box = document.querySelector('.box');
        box.classList.add('two')//追加类名
        box.classList.remove('one')//移除类名
        box.classList.toggle('three')//切换类名

4.表单元素常用属性

语法	作用
元素.value	获取文本
元素.disabled	获取禁用状态（布尔类型）
元素.checked	获取选中状态（用于radio/checkbox）
元素.selected	获取选中状态(用于option)

 <script>
      /* 学习目标： 表单元素属性 */

      //1.获取表单元素
      let inputList = document.querySelectorAll('input')
      console.log(inputList) //数组
      let optionList = document.querySelectorAll('option')
      console.log(optionList)

      //2.表单属性操作

      //2.1 表单文本   value
      /* *****注意： inputList是一个数组，不是DOM对象。 无法操作DOM对象属性的
            数组中的元素才是DOM对象 [DOM对象,DOM对象,DOM对象]
        解决方案： 利用数组下标来获取DOM对象，然后再操作属性
         */
      // console.log( inputList.value );//undefined
      console.log(inputList[1].value) //'admin'
      inputList[1].value = '欢迎来到武汉大前端'

      //2.2 表单布尔类型属性（表单状态）

      console.log(inputList[0].disabled) //true  禁用
      inputList[0].disabled = false

      inputList[4].checked = true

      optionList[1].selected = true
    </script>

6.事件介绍及注册事件

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div
      id="box"
      class="one"
      style="width: 100px;height: 100px;background-color: green"
    ></div>

    <script>
      //获取页面元素
      let box = document.querySelector('#box')
      //动态操作元素属性(html属性，css样式属性)
      // box.style.backgroundColor = 'red';

      /* 
        1.交互(功能) ： 什么元素 在 什么时刻 做 什么事
        2.事件(技术) :  js实现交互功能的一种机制(技术)
        3.事件三要素
            事件源 ： 什么元素(对象)
            事件类型 ： 什么时刻(属性) （单击 双击 鼠标移入  鼠标移出）
                单击： onclick
                双击: ondblclick
                鼠标移入： onmouseover
                鼠标移出： onmouseout
            事件处理 ： 做什么事(函数)
        4.注册事件 : 给元素添加交互功能
            语法：  事件源.事件类型 = 事件处理函数  
                    box.onclick = function(){}

        5.事件原理
            5.1 注册事件本质 是 ： 对象的属性(方法)赋值
            5.2 注册事件的时候，事件处理函数不会执行 （函数在声明的时候不会执行）
            5.3 当用户触发事件(点击)的时候，浏览器会自动去调用事件处理函数
                * 点击box的时候，浏览器底层会执行一行代码：  box.onclick();
         */

      /* 
        任何元素都可以注册事件(添加交互功能)
        任何元素都可以注册很多个事件
         */
      box.onclick = function () {
        box.style.backgroundColor = 'red'
      }

      box.onmouseover = function () {
        box.style.backgroundColor = 'purple'
      }

      box.ondblclick = function () {
        alert('你双击我了')
      }
    </script>
  </body>
</html>

7. 扩展实际开发思路介绍

1.实际开发中，我们做某一个功能的时候，通常遵循以下分析思路
- （1）明确需求
  - 我们代码的意义是完成需求，如果连需求是什么都不清楚，从何谈实现？
- （2）根据需求整理思路
  - 明确需求之后，应该根据需求理清代码思路
  - 磨刀不误砍柴工，如果敲代码想到一行写一行，思路很容易混乱，而且容易出现bug
- （3）根据思路敲代码
  - 思路一旦清晰，敲代码就是一个代码熟练度问题，如果忘记了某个api，可以查阅资料或者以前的笔记
2.如何来描述需求和整理思路
- 网页的交互需求，其实就是事件，通常都三个大步骤`点击了(事件类型)什么元素（事件源），发生了什么事（事件处理）
- 所以我们在整理思路的时候，应该从事件三要素触发

8.扩展获取元素语法补充(了解即可)

重点掌握选择器获取,其他仅做了解

语法	示例	描述
getElementById()	document.getElementById(‘box’)	根据`id`获取元素
getElementsByTagName()	document.getElementsByTagName(‘li’)	根据`标签名`获取元素
getElementsByClassName()	document.getElementsByClassName(‘one’)	根据`类名`获取元素
getElementsByName()	document.getElementsByName(‘sex’)	根据`name属性值`获取`表单元素`
`querySelector()`	document.querySelector(‘选择器’)	根据选择器获取满足条件`第一个`元素
`querySelectorAll()`	document.querySelectorAll(‘选择器’)	根据选择器获取满足条件`所有`元素

总结:

1.1-获取元素操作

1.根据选择器获取元素
- 获取满足条件的第一个元素
- 语法：document.querySelector ( “选择器” )
- 例如：document.querySelector ( “.className” )
- 获取满足条件的所有对象
- 语法：document.querySelectorAll ( “选择器” )
2.获取元素的属性
- 两种语法: 点语法:
```
元素.属性名
```
  字符串语法:
```
元素['属性名']
```
  - div.style

1.2-事件

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

1.3-功能点开发思路

1.功能开发思路
- 1.分析需求
  - 点击了(事件类型)哪个元素(事件源),发生了什么事(事件响应)
- 2.根据需求理清思路
  - 事件三要素：事件源、事件类型、事件响应
  - 1.(获取元素)
  - 2.(注册事件)
  - 事件.事件类型=事件处理函数
  - box.onclick = function(){ 3.事件处理 }
- 3.根据思路编写代码
  - 熟能生巧

A-sleep

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPIs-01:（获取元素、操作元素、事件基础）

1.Docuemnt Object Model（文档对象模型）JavaScript组成三个部分:1.ECMAScript - JavaScript的核心定义了javascript的语法规范JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了js语言的标准2.DOM - 文档对象模型一套操作页面元素的APIDOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作3.BOM - 浏览器对象模型一套操作浏览器功能的A
复制链接

扫一扫

专栏目录