网站建设费应该怎样入账,大连鼎信网站建设公司,企业宣传视频制作免费模板,网站显示危险网站要怎么做1.1 作用和分类
作用: 就是使用 JS 去操作 html 和浏览器 分类#xff1a;DOM (文档对象模型)、BOM#xff08;浏览器对象模型#xff09;
1.2 什么是DOM
DOM#xff08; Document Object Model——文档对象模型#xff09;是用来呈现以及与任意 HTML 或 XML文档交互的…1.1 作用和分类
作用: 就是使用 JS 去操作 html 和浏览器 分类DOM (文档对象模型)、BOM浏览器对象模型
1.2 什么是DOM
DOM Document Object Model——文档对象模型是用来呈现以及与任意 HTML 或 XML文档交互的APIl 白话文DOM是浏览器提供的一套专门用来 操作网页内容 的功能DOM作用 开发网页内容特效和实现用户交互 DOM对象重要
DOM对象浏览器根据html标签生成的 JS对象 所有的标签属性都可以在这个对象上面找到 修改这个对象的属性会自动映射到标签身上
DOM的核心思想 把网页内容当做对象来处理
document 对象
是 DOM 里提供的一个对象 所以它提供的属性和方法都是用来访问和操作网页内容的 例document.write()
网页所有内容都在document里面 获取DOM对象
document
document 是 JavaScript 内置的专门用于 DOM 的对象该对象包含了若干的属性和方法 2.1 根据CSS选择器来获取DOM元素
querySelector 满足条件的第一个元素querySelectorAll 满足条件的元素集合 返回伪数组了解其他方式 操作元素内容
innerText 将文本内容添加/更新到任意标签位置文本中包含的标签不会被解析。innerHTML 将文本内容添加/更新到任意标签位置文本中包含的标签会被解析。
常用属性修改
直接能过属性名修改最简洁的语法
控制样式属性
应用【修改样式】通过修改行内样式 style 属性实现对样式的动态修改。
通过元素节点获得的 style 属性本身的数据类型也是对象如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。 2 .操作类名(className) 操作CSS
如果修改的样式比较多直接通过style属性修改比较繁琐我们可以通过借助于css类名的形式
操作表单元素属性
获取:DOM对象.属性名
设置:DOM对象.属性名 新值
自定义属性
标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如 disabled、checked、selected
自定义属性
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取 间歇函数
setInterval 是 JavaScript 中内置的函数它的作用是间隔固定的时间自动重复执行另一个函数也叫定时器函数
// 开启定时器
let 变量名 setInterval函数 时间 // 停止定时器
clearInterval(变量名) 事件
事件是编程语言中的术语它是用来描述程序的行为或状态的一旦行为或状态发生改变便立即调用一个函数 事件监听
结合 DOM 使用事件时需要为 DOM 对象添加事件监听等待事件发生触发时便立即调用一个函数。
addEventListener 是 DOM 对象专门用来添加事件监听的方法它的两个参数分别为【事件类型】和【事件回调】
步骤
获取 DOM 元素通过 addEventListener 方法为 DOM 节点添加事件监听等待事件触发如用户点击了某个按钮时便会触发 click 事件类型事件触发后相对应的回调函数会被执行
事件类型
click 译成中文是【点击】的意思它的含义是监听等着用户鼠标的单击操作除了【单击】还有【双击】dblclick
事件处理程序
addEventListener 的第2个参数是函数这个函数会在事件被触发时立即被调用在这个函数中可以编写任意逻辑的代码如改变 DOM 文本颜色、文本内容等。
鼠标事件
mouseenter 监听鼠标是否移入 DOM 元素mouseleave 监听鼠标是否移出 DOM 元素
scriptconst div document.querySelector(div)// 鼠标经过div.addEventListener(mouseenter, function () {console.log(轻轻的我来了)})// 鼠标离开div.addEventListener(mouseleave, function () {console.log(轻轻的我走了)})/script 键盘事件
keydown 键盘按下触发 keyup 键盘抬起触发
scriptconst input document.querySelector(input)// 1. 键盘事件// input.addEventListener(keydown, function () {// console.log(键盘按下了)// })// input.addEventListener(keyup, function () {// console.log(键盘谈起了)// })// 2. 用户输入文本事件 inputinput.addEventListener(input, function () {console.log(input.value)})/script
焦点事件
focus 获得焦点
blur 失去焦点
const input document.querySelector(input)input.addEventListener(focus, function () {console.log(有焦点触发)})input.addEventListener(blur, function () {console.log(失去焦点触发)})
文本框输入事件
input
script// const btn document.querySelector(button)// btn.addEventListener(click, function (e) {// console.log(e)// })const input document.querySelector(input)input.addEventListener(keyup, function (e) {// console.log(11)// console.log(e.key)if (e.key Enter) {console.log(我按下了回车键)}})/script
scriptconst str im a teacher // console.log(str.trim()) // 去除字符串左右的空格const tx document.querySelector(textarea)tx.addEventListener(keyup, function (e) {// console.log(tx.value)if (e.key Enter) {// console.log(tx.value)console.log(tx.value.trim() )}})/script 事件对象
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来我们称这个对象为事件对象。
事件回调函数的【第1个参数】即所谓的事件对象通常习惯性的将这个对数命名为 event、ev 、e 。
接下来简单看一下事件对象中包含了哪些有用的信息
ev.type 当前事件的类型ev.clientX/Y 光标相对浏览器窗口的位置ev.offsetX/Y 光标相于当前 DOM 元素的位置
注在事件回调函数内部通过 window.event 同样可以获取事件对象。
环境对象
环境对象指的是函数内部特殊的变量 this 它代表着当前函数运行时所处的环境。
结论
this 本质上是一个变量数据类型为对象函数的调用方式不同 this 变量的值也不同【谁调用 this 就是谁】是判断 this 值的粗略规则函数直接调用时实际上 window.sayHi() 所以 this 的值为 window
回调函数
如果将函数 A 做为参数传递给函数 B 时我们称函数 A 为回调函数。
结论
回调函数本质还是函数只不过把它当成参数使用使用匿名函数做为回调函数比较常见
