JavaScript进阶指南： DOM与BOM操作，从初学者到专家，一步也能登天一篇文章就足够了
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>
效果图展示：
JavaScript进阶指南： DOM与BOM操作，从初学者到专家，一步也能登天一篇文章就足够了的更多相关文章
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
- JavaScript中的DOM及相关操作
一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
- BOM与DOM之BOM操作
目录 一:BOM与DOM操作 1.BOM与DOM操作 二:BOM操作 1.常用的Window方法: 2.案例实操 3.打开新窗口 4.关闭当前页面 三:window的子对象 1.navigator对象 ...
- JavaScript进阶之DOM
文档对象模型DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最 ...
- 理清javascript的相关概念 DOM和BOM
javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异.JavaScript=语法+BOM(含DOM) ...
- javascript进阶——分离式DOM脚本编程
编写分离式(unobstrusive)代码意味着对HTML内容的完全分离:数据来自服务器端,javascript代码用来动态化和交互.这种分离的好处是在不同浏览器之间使用是可以完全降级或升级运行,对于 ...
- 【Java EE】Day10 JavaScript高级、DOM、BOM、事件
一.简单入门 1.DOM 功能:获取html文档内容 代码:document.getElementById("id值") 功能: 设置属性值 修改标签体内容:xx.innerHtm ...
- DOM、BOM 操作超级集合
本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...
- Javascript学习二---DOM元素操作
Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...
- javascript权威指南笔记
最近每天工作之余看下js的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...
随机推荐
- FreeSWITCH添加iLBC编码及转码
操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 一.安装ilbc库 从第三方库里下载指定版本: git clone https://freeswitch.org/s ...
- 谁想和我一起做低代码平台！一个可以提升技术，让简历装x的项目
序言 正如文章标题所述,最近一段时间低代码这个概念非常的火,但其实在不了解这个东西的时候觉得它真的很炫酷,从那时就萌生了做一个低代码平台的想法. 但随着时间的变化,现在市面上低代码各个业务方向的平台都 ...
- OpenResty学习笔记03：再探WAF
一. 再谈WAF 我们上一篇安装的WAF来自另一位技术大神 赵舜东,花名 赵班长,一直从事自动化运维方面的架构设计工作.阿里云MVP.华为云MVP.中国SaltStack用户组发起人 .新运维社区发起 ...
- 2022-10-06：以下go语言代码输出什么？A：[1 2 3] [1 2 3] ；B：[1 2 3] [3 4 5]； C：[1 2 3] [3 4 5 6 7 8 9]；D：[1 2 3] [3
2022-10-06:以下go语言代码输出什么?A:[1 2 3] [1 2 3] :B:[1 2 3] [3 4 5]: C:[1 2 3] [3 4 5 6 7 8 9]:D:[1 2 3] [3 ...
- 2022-07-26：以下go语言代码输出什么？A：5；B：hello；C：编译错误；D：运行错误。 package main import ( “fmt“ ) type integer in
2022-07-26:以下go语言代码输出什么?A:5:B:hello:C:编译错误:D:运行错误. package main import ( "fmt" ) type inte ...
- 2021-09-21：给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target，返回 [-1, -1]。要
2021-09-21:给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置.如果数组中不存在目标值 target,返回 [-1, -1].要 ...
- vue全家桶进阶之路49：Vue3 环境变量
vue3 环境变量 在Vue3中,可以通过环境变量来管理应用程序中的配置.这些配置可以包括后端API的URL.API key.跟踪ID等等.在不同的开发.测试.生产环境中使用不同的配置是非常有用的.V ...
- Django 14天从小白到进阶- Day1 Django 初识
来自作者:金角大王 本节内容 Http原理介绍 自行开发一个Web框架 WSGI介绍 Django介绍 MVC/MTV Django安装 创建项目与APP 开发第一个页面 为什么学Django? Go ...
- dnu
背景 作为一个喜欢搬运 YouTube 视频的网友,我发现将视频下载下来再上传到 B 站十分繁琐,因此我决定开发一个小工具,能够方便快捷地将 YouTube 视频下载并上传至 B 站,以节省我的时间和 ...
- phpstudy-sqlilabs-less-3
题目:GET - Error based - Single quotes with twist 基于错误的单引号GET型变形注入 ?id=1 )and 1=2--+ ?id=1 "and 1 ...