day09 --> 【JavaScript（BOM、DOM事件）】
DOM简单学习：为了满足案例要求
功能：控制HTML文档的内容
代码：获取页面标签（/亦叫元素）对象 Element
document.getElementById("id值"); 通过元素的id值获取元素对象
操作Element对象：
1、修改属性值：
1.明确获取的对象是哪一个？
2.查看API文档，找到其中有那些属性可以设置
2、修改标签体内容：
属性：innerHTML
1.获取元素对象
2.使用innerHTML属性修改标签体内容
事件简单学习：
功能：某些组件被执行了某些操作后，触发执行某些代码
造句：xxx被xxx,我就xxx
如何绑定事件：
1.直接在HTML标签上，指定事件的属性（操作），属性值即使JS代码
事件：onclick (单击)
2.通过js获取元素对象，指定事件属性，设置一个函数
案例：电灯点击开关【开 --> 关，关 --> 开】
<body>
<img id="light" src="img/off.gif" onclick="turn()">
<script type="text/javascript">
var light = document.getElementById('light');
var flag = false;
function turn(){
if(flag) {
light.src = "img/off.gif";
flag = false;
}else {
light.src = "img/on.gif";
flag = true;
}
}
</script>
</body>
BOM ：
1.概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
2.组成：
1、Window：窗口对象：
特点：
1、特点：Window对象不需要创建可以直接使用，window使用，window.方法名
window引用可以省略
2、方法：
1.与弹出框有关的方法：
1.alert() : 弹出一个警告框
2.confirm()：确认取消对话框 【确认、取消】
如果用户点击的是【确认】按钮，该方法返回true
如果用户点击的是【取消】按钮，该方法返回false
3.prompt()：显示用户输入框
返回输入框中的内容
2.与打开、关闭有关的方法：
1.close()：关闭浏览器窗口
谁调用该方法，就关闭谁
2.open()：打开新的浏览器窗口
返回新的window对象
3.与定时器有关的方法
1.setTimeout() : 在指定的毫秒值后待用函数或者计算表达式
参数1：js代码或者方法对象
参数2：毫秒值
返回值：唯一标识id，用于取消定时器
2.clearTimeout() : 取消由setTimeout()方法设置的timeout
3.setInterval() : 按照指定的周期（毫秒）来调用函数或者表达式
4.clearInterval() : 取消 setInterval() 设置的timeout
小案例：使用定时器实现轮播图效果：
<body>
<img id="img" src="img/banner_1.jpg" width="100%">
<script type="text/javascript">
var img = document.getElementById("img");
var number = 1;
function fun(){
number++;
if (number == 4) {
number = 1;
}
img.src = "img/banner_" + number + ".jpg";
}
setInterval(fun,2000);
</script>
</body>
3.属性：获取其它BOM对象：
history：
location：
Navigation：
Screen：
2、Navigator：浏览器对象
3、Screen ：显示器屏幕对象
4、History ：历史记录对象
5、Location：地址栏对象
1.创建（获取）：
1、window.location
2、location
2.方法：
reload()：重新加载当前文档。【刷新】
3.属性：
href：URL地址
小案例：页面倒计时自动跳转：
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
<body>
<p><span id="time">5</span>秒后将自动跳转到百度......</p>
<script type="text/javascript">
var time = document.getElementById("time");
var second = 5;
function fun(){
second --;
if(second == 0){
location.href = "https://www.baidu.com/";
}
time.innerHTML = second + "";
}
setInterval(fun,1000);
</script>
</body>
History : 历史记录对象（当前window窗口所访问过的历史记录，并非浏览器的历史记录）
1.创建（获取）：
1.window.history
2.history
2.方法：
back()： 加载history列表中的前一个URL
forward：加载history列表中的下一个URL
go(参数n) : 加载history列表中的某个具体页面
n为正数，前进几个历史记录
n为负数，后退几个历史纪录被
3.属性：
length : 返回的是当前窗口历史列表中的 URL 记录
DOM :
概念：Document Object Model 文档对象模型，将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作
DOM 标准被分为 3 个不同的部分：
1、核心 DOM - 针对任何结构化文档的标准模型：
Document：文档对象
1.创建（获取）：在HTML中可以使用window对象来获取
1.window.document
2.document
2.方法：
方法1.获取Element对象：
1.getElementById() : 根据id属性值获取元素对象，id属性值一般唯一
2.getElementsByTagName() : 根据元素名称获取元素对象们，返回值是一个数组
3.getElemnetsByClassName() : 根据Class属性值获取元素对象们，返回值是一个数组
4.getElementsByName() : 根据name属性值获取元素属性们
方法2：创建其它DOM对象
1.createComment()
2.createElement()
3.createTextNode()
3.属性:
Element : 元素对象
1、获取/创建 ：通过document来获取和创建
2、方法：
1.removeAttribute(参数) : 删除属性；参数:要删除的属性
2.setAttribute(参数1，参数2) : 设置属性；参数1：要设置的属性，参数2：属性值
Node : 节点对象，其它5个的父对象
特点：所有dom对象都可以被认为是一个节点
方法：
CRUD dom树：
1.appendChild(p) : 向节点的子节点列表的结尾添加新的子节点p
2.removeChild(p) : 删除（并返回）当前节点的指定子节点p
3.replaceChild(p1,p2) : 节点p1(新的)替换节点p2(旧的)
<style>
#div1{
border: 1px solid red;
width: 400px;
height: 400px;
background-color: green;
}
#div2{
border: 1px solid red;
width: 100px;
height: 100px;
background-color: yellow;
}
#div3{
border: 1px solid red;
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div id="div1">
div1<br>
<!--让超链接具有样式而不进行真正的跳转 href="javascript:void(0)" -->
<a href="javascript:void(0)" id="del">删除子节点</a><br>
<a href="javascript:void(0)" id="add">添加子节点</a>
<div id="div2">
div2
</div>
</div>
<script>
var ele_div1 = document.getElementById("div1");
var ele_div2 = document.getElementById("div2");
var del = document.getElementById("del");
del.onclick = function(){
ele_div1.removeChild(ele_div2);
}
var add = document.getElementById("add");
add.onclick = function(){
var div3 = document.createElement("div");
div3.setAttribute("id", "div3");
div1.appendChild(div3);
}
alert(ele_div2.parentNode);
</script>
</body>
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node : 节点对象，其它五个节点的父对象
2、XML DOM － 针对 XML 文档的标准模型
3、HTML DOM － 针对 HTML 文档的标准模型
案例：动态表格添加、删除
分析：
添加-->
1、给添加按钮绑定单击事件
2、根据元素的id值获取文本框的内容
3、创建td、td的文本内容为获取到的文本框的内容
4、创建tr
5、tr作为父节点，添加子节点td
6、获取table，将tr加入到table中
删除 -->
1、通过当前节点找到父节点
2、使用父节点的removecChild方法移除选中的行
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> <!-- this表示当前超链接对象-->
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
</table>
<script type="text/javascript">
//1.给按钮绑定单击事件
document.getElementById("btn_add").onclick=function(){
//2.获取文本框
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//删除的td
td_del = document.createElement("td");
ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_del.appendChild(ele_a);
//4.创建tr
tr = document.createElement("tr");
//将td添加进tr
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_del);
//5.定位到table表格，将tr添加进table中
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function delTr(thisTr){
var table = thisTr.parentNode.parentNode.parentNode; //定位到table
var tr = thisTr.parentNode.parentNode; //定位到改行
table.removeChild(tr);
}
</script>
</body>
通过innerHTML添加可以写为：
HTML DOM：
1、标签体的设置和获取：innerHTML
2、使用html元素对象的属性
3、控制样式：
1.修改样式
div1.style.border = "1px solid red";
div1.style.width = "100px";
div1.style.fontSize = "20px";
2.提前定义好类选择器，通过元素的className属性来设置其class属性值【常用，为css】
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？