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项目】商品汇前台（一）组件拆分+请求封装
写在最前面 之前学完vue基础之后,一直想做一下前端的项目,但是自己写了一点前后端分离的项目发现自己前端写的是真的乱,所以趁着假期的空闲做一下尚硅谷商品汇的前后台项目,争取这周写完前台,然后这个月再写 ...
- react中受控组件与非受控组件--
非受控组件:随用随取 1 render() { 2 return ( 3 <div> 4 <h1>非受控组件</h1> 5 <form action=&quo ...
- Jmeter小白使用攻略
<Jmeter小白使用攻略> 一.主界面 二.如何测试一个接口
- 2023-05-03：给你一棵 二叉树 的根节点 root ，树中有 n 个节点 每个节点都可以被分配一个从 1 到 n 且互不相同的值 另给你一个长度为 m 的数组 queries 你必须在树上执行
2023-05-03:给你一棵 二叉树 的根节点 root ,树中有 n 个节点 每个节点都可以被分配一个从 1 到 n 且互不相同的值 另给你一个长度为 m 的数组 queries 你必须在树上执行 ...
- #PowerBi 1分钟学会，powerbi中行列值拼接（COMBINEVALUES与CONCATENATEX）
在日常的工作中,我们往往需要对表格数据的拼接,用来生成一些复合数据列,如下图类似场景. 其实,在powerbi中,我们同样也可以对表格文本进行拼接.今天我们就介绍两个DAX函数,COMBINEVALU ...
- #PowerBI 1分钟学会，利用format函数，自定义格式显示
PowerBI是一款强大的数据分析和可视化工具,它可以帮助我们快速地创建各种报表和仪表盘,展示数据的洞察和价值. 在PowerBI中,有许多内置的函数可以帮助我们处理和转换数据,其中一个常用的函数就是 ...
- 2021-09-08：每一个项目都有三个数，[a,b,c]表示这个项目a和b乐队参演，花费为c。每一个乐队可能在多个项目里都出现了，但是只能被挑一次。nums是可以挑选的项目数量，所以一定会有nums
2021-09-08:每一个项目都有三个数,[a,b,c]表示这个项目a和b乐队参演,花费为c.每一个乐队可能在多个项目里都出现了,但是只能被挑一次.nums是可以挑选的项目数量,所以一定会有nums ...
- 【GiraKoo】面向对象开发系列之【封装】
[技术分享]面向对象开发系列之[封装] 理解 封装是面向对象程序开发的基石. 程序开发,最核心价值,是数据. 程序其实是读取数据,操作数据,保存数据等一系列操作. 那么经过良好组织过的数据,将使编程事 ...
- Pose泰裤辣! 一键提取姿态生成新图像
摘要:从图像提取人体姿态,用姿态信息控制生成具有相同姿态的新图像. 本文分享自华为云社区<Pose泰裤辣! 一键提取姿态生成新图像>,作者: Emma_Liu . 人体姿态骨架生成图像 C ...
- springsecurity 认证，授权，注销，动态菜单,记住我和首页定制
搭建环境: 1.在创建springboot时选择组件web,thymeleaf,spring-security 2.导入静态资源,导入后测试一下环境 认证和授权: 继承类WebSecurityCon ...