DOM与BOM操作
复习链接: http://c.biancheng.net/view/9360.html
事件对象： https://www.runoob.com/jsref/dom-obj-event.html
初识DOM
DOM --> Document Object Model --> 文档对象模型 --> 通过js来操作网页内容
前几节课学习的是JavaScript的基本语法.学习过程中可能会产生割裂感(和html/css没有联系). 从这节课开始就是和之前的知识点串联在一起.
通过dom让js和html/css产生联系
DOM树 --> 一个网页文档里的所有内容(图片,文本,样式)在网页底层中是用树形结构保存的.树里面每个分支的终点叫做node(节点). 每个节点都属于一个对象(属性/方法)
网页的内容是以树形结构的方式保存在程序里.每个元素都是一个对象.都有自己对应的属性和方法
Document对象是DOM树的根部.是所有节点的根节点.可以通过Document访问网页里的所有内容
操作网页元素分为两步:
1.找出元素
2.对元素实施操作
DOM元素的选中方式
Element -- 元素
函数语法基本都是小驼峰(第一个单词不大写,第二个单词开始首字母大写)
1.通过id获取元素
document.getElementById() // 通过id名获取元素
2.通过class获取元素
document.getElementsByClassName() // 通过类名获取元素
3.通过标签名获取元素
document.getElementsByTagName() // 通过标签名获取元素
获取的元素默认值为HTMLCollection.类似于数组,但它不是数组
同: 数据都有下标的概念 / 数据可以被遍历
异: 它不可以使用数组的方法
基于这个原因,如果直接对伪数组进行dom操作是无效的. 我们要操作的不是这个伪数组,而是伪数组里的元素. 所以要添加下标,来访问对应的元素
DOM操作文本内容
innerText: 读取/修改元素里的文本内容(不识别标签语法)
innetHTML: 读取/修改元素里的文本内容(识别标签语法)
DOM操作元素属性/样式
操作元素属性 --> 获取到元素后, 通过元素名. 的方式进行操作
元素名.属性名 // 使用元素属性
元素名.属性名 = XXX /// 修改元素属性
元素名.title // 设置/获取元素的标题
元素名.src // 设置/获取元素的资源路径
元素名.className // 设置/获取元素的类名
操作元素样式(css) --> 获取元素后,通过元素名.style.样式名 的方式进行操作
元素名.style.样式名 // 访问该元素的css样式
元素名.style.width // 访问元素的宽度样式
如果css的样式有(-)减号作为连接符.在用js写的时候,不写连接符而是用小驼峰命名法
font-size --> fontSize
background-color --> backgroundColor
交互事件(event)
事件指的是用户跟网页内容产生交互时的操作:
按下键盘/单击鼠标/双击鼠标/输入文本
当这些事件触发时,就可以通过JavaScript的监听器.来获取到交互情况,并运行对应的功能
事件流程:
1.获取事件对象 --> 会基于什么进行交互
2.绑定监听事件 -->
事件对象.监听事件 = function(){} 当触发事件时,执行函数里的功能
box.onclick = function(){功能代码} --> 当点击box时,触发功能
在获取到元素之后.可以用this表示当前对象。
DOM复习
DOM -- Document Object Model --> 文档对象模型
一个网页可以称为文档.通过js代码实现找到/操作网页文档内容
document -- 文档
element -- 元素
node -- 节点
event -- 事件
Browser -- 浏览器
DOM操作流程:
1.获取目标元素
2.进行对应操作
document.getElementById() // 通过id获取元素
document.getElementsByClassName() // 通过类名获取元素
document.getElementsByTagName() // 通过标签名获取元素
获取到元素对象后.就可以使用/修改里面的属性/方法
获取到的元素对象表示形式类似于数组: 1.有下标 2.能遍历数据 3.不能使用数组的方法
用类名/标签名获取到的数据.哪怕只有一个对象.也是存在伪数组里的
DOM补充
可以通过dom对元素进行增删改查操作 --> 增删改查是基于Node节点来实现的
parent: 父级
child: 子级
初识BOM:
Browser Object Model --> 浏览器对象模型
dom简单来说就是通过js和网页内容进行交互
bom简单来说就是通过js和浏览器进行交互(弹窗,刷新,加载)
其实我们之前用的alert,prompt.都属于bom操作 --> 控制浏览器弹出一个窗口再进行操作 --> 他们都属于同一个对象.叫做window(当前页面窗口)
window.alert()
window.prompt()
但是一般不这么写.因为网页默认运行
定时器:
作用就是可以让网页里的一段程序.过一阵子再运行
setInterval() > 周期性定时器 > 隔一阵子就运行一次
setTimeOut() > 一次性定时器 > 执行一次就结束
代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
什么是dom操作？和html进行交互<br>
1、获取html标签，返回一个元素对象<br>
2、设置 值/改变 值<br>
</p>
<input id="inp1" type="text" value="aa">
<ul id="ul1">
<li>1-a-12</li>
<li>2-b-13</li>
<li>3-c-14</li>
</ul>
<button onclick="changeTest()">替换按钮</button>
<ul>
<li>onclick属性表示一个点击事件属性</li>
<li>onclick属性值是一个函数名称()</li>
<li>表示，一旦点击该按钮，就调用这个函数</li>
</ul>
</body>
<script>
//一、单个的设置
//1、获取
let inp1=document.getElementById('inp1')
//2、设置 值
inp1.value='曹操'
//二、批量的设置
let arr2=[
{id:1,name:'曹操',age:36},
{id:2,name:'刘备',age:34},
{id:3,name:'孙权',age:30},
]
//1、获取 ul
let ul1=document.getElementById('ul1')
function changeTest(){
//2、替换
let s=''
arr2.forEach((e)=>{
s+=`<li>${e.id}-${e.name}-${e.age}</li>`
})
ul1.innerHTML=s
}
</script>
</html>
强盛集团案例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
button{
width: 100px;
height: 40px;
/* 左外间距 */
margin-left: 40px;
/* 去掉边框 */
border: none;
/* 去掉轮廓 */
outline: none;
/* 圆角 */
border-radius: 8px;
color: white;
font-size: large;
cursor: pointer;
}
.fb>button:nth-child(1){
background-color: rebeccapurple;
}
.fb>button:nth-child(2){
background-color:red;
}
.fb>button:nth-child(3){
background-color: green;
}
.fb>button:nth-child(4){
background-color: blue;
}
/* tbody中的每个tr隔行变色 */
tbody>tr:nth-child(odd){
background-color: skyblue;
}
tbody>tr:nth-child(even){
background-color: rgb(227, 181, 62);
}
</style>
</head>
<body>
<h1 style="text-align: center;">强盛集团员工薪资表</h1>
<h3 style="text-align: center;">强盛集团经营理念：风浪越大，鱼越贵</h3>
<div class="fb" style="text-align: center;">
<button onclick="generateTab()">生成表格</button>
<button onclick="doubleSalary()">薪资翻倍</button>
<button onclick="restEmp()">退休人员</button>
<button onclick="sumSalary()">薪资总数</button>
</div>
<table style="margin-top: 30px;" align="center" border="1" cellpadding="18" cellspacing="0">
<thead>
<tr>
<th><a href="javascript:orderEmp('id')">序号</a></th>
<th>姓名</th>
<th><a href="javascript:orderEmp('age')">年龄</a></th>
<th><a href="javascript:orderEmp('salary')">薪资</a></th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>高启强</td>
<td>36</td>
<td>200</td>
</tr>
</tbody>
<tfoot id="tfoot">
<tr style="text-align: center;">
<td colspan="4">薪资总数：</td>
</tr>
</tfoot>
</table>
</body>
<script>
let emps=[
{
id:1,name:'高启强',age:36,salary:200},
{
id:2,name:'高启盛',age:30,salary:300},
{
id:3,name:'唐小龙',age:35,salary:100},
{
id:4,name:'唐小虎',age:35,salary:100},
{
id:5,name:'陈泰',age:66,salary:100},
]
//获取
let tbody=document.getElementById('tbody')
let tfoot=document.getElementById('tfoot')
function generateTab(){
//调用函数
createTab(emps)
}
//重复出现的代码，封装成一个函数
function createTab(arr){
let s=''
arr.forEach((e)=>{
s+=`<tr>
<td>${
e.id}</td>
<td>${
e.name}</td>
<td>${
e.age}</td>
<td>${
e.salary}</td>
</tr>`
})
tbody.innerHTML=s
}
let newEmps;
function doubleSalary(){
//薪资翻倍后，返回一个新的数组
newEmps=emps.map((e)=>{
e.salary*=2
return e
})
//调用函数
createTab(newEmps)
}
//退休功能
function restEmp(){
let newEmps=emps.filter((e)=>{
return e.age>65
})
//调用函数
createTab(newEmps)
}
//薪资求和
function sumSalary(){
let salarySum
if(newEmps){
salarySum=newEmps.reduce((sum,e)=>{
return sum+=e.salary
},0)
}else{
salarySum=emps.reduce((sum,e)=>{
return sum+=e.salary
},0)
}
console.log(salarySum)
tfoot.innerHTML=
`<tr style="text-align: center;">
<td colspan="4">薪资总数：${
salarySum}</td>
</tr>`
}
//排序
let a=true
function orderEmp(type){
a=!a //每调用一次，a取反
let newEmps2
switch(type){
case 'id':
console.log('根据id排序')
newEmps2=emps.sort((e1,e2)=>{
return a? e2.id-e1.id : e1.id-e2.id
})
break;
case 'age':
console.log('根据age排序')
newEmps2=emps.sort((e1,e2)=>{
return a? e2.age-e1.age : e1.age-e2.age
})
break;
case 'salary':
console.log('根据salary排序')
newEmps2=emps.sort((e1,e2)=>{
return a? e2.salary-e1.salary : e1.salary-e2.salary
})
break;
}
//调用生成tbody的函数
createTab(newEmps2)
}
</script>
</html>
效果图展示：
