JavaScript 进阶课程笔记 第一天

JavaScript 进阶课程笔记 第一天

一、Web API 基本认知

1.1 作用和分类
  • 作用:就是使用JS去操作 HTML 和浏览器
  • 分类:DOM(文档对象模型),BOM(浏览器对象模型)
1.2 什么是DOM(Document Object Model)

DOM是浏览器提供的一套专门用来操作网页内容的功能

1.3 DOM树
  • 作用:文档书直观的体现了标签与标签之间的关系
1.4 DOM对象

DOM对象:浏览器根据html标签生成的JS对象

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

二、获取DOM元素

2.1 根据CSS选择器来获取DOM元素(重点)

语法

//获取一个元素
document.querySelector('css选择器')
//获取多个元素
document.querySelectorAll('css选择器') //得到一个伪数组
//其他获取DOM元素的方法(了解)
document.getElementById('nav')    id
document.getElementByTagName('div')    标签
document.getElementsByClassName('w')    类名

三、设置/修改DOM元素内容

3.1 document.write() 方法
3.2 对象.innerText 属性
  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签不会被解析
3.3 对象.innerHTML 属性(纠结就用它
  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析

四、设置/修改DOM元素属性

4.1 设置/修改元素常用属性

最常见的属性比如: href、title、src 等

4.2 设置/修改元素样式属性
  • 比如通过 轮播图小圆点自动更换颜色样式

  • 点击按钮可以滚动图片,这是移动的图片的位置 left 等等

  • 通过 style 属性操作CSS
    JavaScript 进阶课程笔记 第一天_第1张图片

  • 操作类名(className) 操作CSS
    如果修改的样式较多,需要添加一个类,使用新值换旧值

元素.className = "新的类名"

注:会覆盖掉之前的类名

  • 通过 classList 操作类控制CSS
    为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
//追加一个类
元素.classList.add()
//删除一个类
元素.classList.remove()
//切换一个类
元素.classList.toggle()
4.3 设置/修改 表单元素 属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
  • 获取: DOM对象.属性名
  • 设置: DOM对象.属性名 = 新值

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如: disabled、checked、selected

五、定时器-间歇函数

5.1 定时器函数介绍

网页中经常会需要一种功能:每隔一段时间需要自动执行一段代码,不需要我们手动去触发
例如:网页中的倒计时
JavaScript 进阶课程笔记 第一天_第2张图片

5.2 定时器函数基本使用
  1. 定时器函数开启
setInterval(函数名,时间)
  1. 定时器函数关闭
let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

你可能感兴趣的:(Javascript,笔记,javascript,css,前端)