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,可以查阅资料或者以前的笔记
- (1)明确需求
- 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.根据思路编写代码
- 熟能生巧
- 1.分析需求