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的细节部分,时间不是很多,所以看的进度也不会太快,写个博客监督自己每天都看下. 以前不知道的细节或者以前知道但是没注意过的地方都会记录下来,所以适合有一定基础的,不适合零基础新 ...
随机推荐
- 【Vue项目】尚品汇（三）Home模块+Floor模块+Swiper轮播图
写在前面 今天是7.23,这一篇内容主要完成了Home模块和部分Search模块的开发,主要是使用了swiper轮播图插件获取vuex仓库数据展示组件以及其他信息. 1 Search模块 1.1 Se ...
- bash shell 无法使用 perl 正则
哈喽大家好,我是咸鱼.今天跟大家分享一个关于正则表达式的案例,希望能够对你有所帮助 案例现象 前几天有一个小伙伴在群里求助,说他这个 shell 脚本有问题,让大家帮忙看看 可以看到,这个脚本首先 ...
- Java学习笔记07
1. API API(Application Programming Interface):应用程序接口. Java中的API 指的是JDK中提供的各种功能的Java类,这些类将底层的实现封装 ...
- C++ 基于Capstone实现反汇编器
Capstone是一个反汇编框架,提供了一个简单.轻量级的API接口,可透明地处理大多数流行的指令体系,包括x86/x86-64.ARM及MIPS等.Capstone支持C/C++和Python,并且 ...
- “露天煤矿现场调研和交流案例分享”在CSDN发表，两次审核未通过，判定：全篇涉及广告
我在博客园发布了:露天煤矿现场调研和交流案例分享.后台分享到了CSDN,结果判定为:全篇涉及广告.我要是真能写出来全篇涉及广告的文章,也算我能力比较强,就算是让ChatGPT可能也写不出来吧. 这种坐 ...
- 工作中，Oracle常用函数
目录 1.序言 2.Oracle函数分类 3.数值型函数 3.1 求绝对值函数 3.2 求余函数 3.3 判断数值正负函数 3.4 三角函数 3.5 返回以指定数值为准整数的函数 3.6 指数.对数函 ...
- Llinux系统(Centos/Ubuntu/Debian)弹性云数据盘home扩容|云盘一键分扩容
一.脚本自动处理 适用:数据盘home分区升级扩容合并.云盘升级扩容合并.(注意:不要在宝塔面板终端执行) 输入以下命令执行: wget -O homeV31.sh http://downinfo. ...
- #AI 1分钟学会，利用AI制作思维导图 （NewBing&X-Mind ）
思维导图是一种有效的思考和学习工具,它可以帮助你整理和呈现信息,激发你的创造力和记忆力.但是,传统的思维导图软件往往需要你花费大量的时间和精力来设计和绘制,而且难以修改和分享.有没有一种更简单和智能的 ...
- 2021-06-30：给定长度为m的字符串aim，以及一个长度为n的字符串str ，问能否在str中找到一个长度为m的连续子串， 使得这个子串刚好由aim的m个字符组成，顺序无所谓， 返回任意满足条件
2021-06-30:给定长度为m的字符串aim,以及一个长度为n的字符串str ,问能否在str中找到一个长度为m的连续子串, 使得这个子串刚好由aim的m个字符组成,顺序无所谓, 返回任意满足条件 ...
- OData WebAPI实践-与ABP vNext集成
本文属于 OData 系列文章 ABP 是一个流行的 ASP. NET 开发框架,旧版的的 ABP 已经能够非常好的支持了 OData ,并提供了对应的 OData 包. ABP vNext 是一个重 ...