【java script】DOM & BOM & 事件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了【java script】DOM & BOM & 事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13171字，纯文字阅读大概需要19分钟。
内容图文
DOM(Document object Model 文档对象模型)：为了满足案例要求
-
概念： Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
-
功能：控制html文档的内容
-
获取页面标签(元素)对象：Element
- document.getElementById(“id值”):通过元素的id获取元素对象
-
操作Element对象：
- 修改属性值：
- 明确获取的对象是哪一个？
- 查看API文档，找其中有哪些属性可以设置
- 修改标签体内容：
- 属性：innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
- 属性：innerHTML
- 修改属性值：
<body>
<h1 id="title">script修改内容</h1>
<script>
//获取h1标签对象
var title = document.getElementById("title");
alert("我要换内容了。。。")
//修改内容
title.innerHTML = "script修改之后的内容";
</script>
</body>
- W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
-
Document：文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment:注释对象
-
Node：节点对象，其他5个的父对象
-
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 核心 DOM - 针对任何结构化文档的标准模型
核心DOM
- 核心DOM模型：
- Document：文档对象
- 创建(获取)：在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法：
-
获取Element对象：
- getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
-
创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
-
- 属性
- 创建(获取)：在html dom模型中可以使用window对象来获取
- Element：元素对象
- 获取/创建：通过document来获取和创建
- 方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性
- Node：节点对象，其他5个的父对象
- 特点：所有dom对象都可以被认为是一个节点
- 方法：
- CRUD dom树：
- appendChild()：向节点的子节点列表的结尾添加新的子节点。
- removeChild() ：删除（并返回）当前节点的指定子节点。
- replaceChild()：用新节点替换一个子节点。
- CRUD dom树：
- 属性：
- parentNode 返回节点的父节点。
- Document：文档对象
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class = "cls1">div4</div>
<div class = "cls1">div5</div>
<input type="text" name="username">
<script>
//根据元素名称获取元素对象们，返回值是一个数组
var divs = document.getElementsByTagName("div");
// alert(divs.length);
//根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
// alert(div_cls.length);
//根据name属性值获取元素对象们，返回值是一个数组
var div_name = document.getElementsByName("username");
alert(div_name.length);
//创建其他DOM对象
var creat = document.createElement("table");
alert(creat);
</script>
</body>
<body>
<a>点我试试</a>
<input type="button" id = "btn_set" value="设置属性">
<input type="button" id = "btn_remove" value="删除属性">
<script>
//获取btn(设置属性的过程)
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
//获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}
//获取btn(删除属性的过程)
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
}
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id = "div1">
<div id = "div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id = "del">删除子节点</a>
<a href="javascript:void(0);" id = "add">添加子节点</a>
<!--<input type="button" id = "del" value="删除子节点">-->
<script>
//获取超链接
var element_a = document.getElementById("del");
//绑定单击事件
element_a.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
//获取超链接
var element_add = document.getElementById("add");
//绑定单击事件
element_add.onclick = function () {
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
/**
* 超链接功能：
* 1、可以被点击:样式
* 2、点击后跳转到href指定的url
*
* 需求: 保留1功能，去掉2功能
* 实现: href = "javascript:void(0);"
*/
//获取返回节点的父节点
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
</script>
</body>
</html>
HTML DOM
html dom：定义了所有HTML元素的对象和属性，以及访问他们的方法。html dom是关于如何获取、修改、添加或删除HTML元素的标准
- HTML DOM
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”; - 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
- 使用元素的style属性来设置
事件
- 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
-
造句： xxx被xxx,我就xxx
- 我方水晶被摧毁后，我就责备对友。
- 敌方水晶被摧毁后，我就夸奖自己。
-
如何绑定事件
-
直接在html标签上，指定事件的属性(操作)，属性值就是js代码
- 事件：onclick— 单击事件
-
通过js获取元素对象，指定事件属性，设置一个函数
-
-
<body>
<img id = "light" src="表情包.png" onclick="fun();">
<img id = "light2" src="表情包.png">
<script>
function fun() {
alert("我被点了");
alert("我又被点了");
}
function fun2() {
alert("点我干嘛");
}
//获取light2对象
var light = document.getElementById("light2");
//绑定事件
light.onclick = fun2();
</script>
</body>
- 案例：设置一个表情包，单击就会发生变化。
<body>
<img id="face" src="表情包.png">
<script>
//单机表情包变换
var face = document.getElementById("face");
var flag = false;
face.onclick = function () {
if (flag){
face.src = "表情包.png";
flag = false;
}else{
face.src = "表情包1.png";
flag = true;
}
}
</script>
</body>
事件的监听机制
-
概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如： 按钮 文本输入框…
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
-
常见的事件：
-
点击事件：
- onclick：单击事件。
- ondblclick：双击事件。
-
焦点事件：
- onblur：失去焦点。(焦点：选择之后会有闪烁)
- 该功能一般用于表单验证
- onfocus：元素获得焦点。
- onblur：失去焦点。(焦点：选择之后会有闪烁)
-
加载事件：
- onload：一张页面或一幅图像完成加载。
-
鼠标事件：
- onmousedown：鼠标按钮被按下。
- 定义方法时，定义一个形参，接收event对象
- event对象的button属性可以获取鼠标按钮键被点击了(0,1,2)
- onmouseup：鼠标按键被松开。
- onmousemove：鼠标被移动。
- onmouseover：鼠标移到某元素之上。
- onmouseout：鼠标从某元素移开。
- onmousedown：鼠标按钮被按下。
-
键盘事件：
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
-
选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
-
表单事件：
- onsubmit 确认按钮被点击。
* 可以阻止表单提交(方法要返回false才可以阻止提交) - onreset 重置按钮被点击。
- onsubmit 确认按钮被点击。
-
BOM(Browser Object Model):
-
概念：Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
-
组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象 -
Window：窗口对象
- 创建
- 方法
-
与弹出框有关的方法：
alert()： 显示带有一段消息和一个确认按钮的警告框。
confirm()： 显示带有一段消息以及确认按钮和取消按钮的对话框。- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
prompt()： 显示可提示用户输入的对话框。
- 返回值：获取用户输入的值
-
<body>
<script>
//window对象的创建
alert("hello");
window.alert("hello window");
//进行确认和取消
var flag = confirm("确定要退出？");
if (flag){
//退出
alert("欢迎下次光临");
}else
alert("没有退出");
//显示输入框
var result = prompt("请输入用户名和密码：");
alert(result);
</script>
</body>
- window中与打开关闭有关的方法：
close()：关闭浏览器窗口。
* 谁调用我 ，我关谁
open()： 打开一个新的浏览器窗口
* 返回新的Window对象
<body>
<input id = "openBtn" type="button" value="打开窗口">
<input id = "closeBtn" type="button" value="关闭已经打开的窗口">
<script>
//打开新窗口
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function () {
newWindow = open("https://www.baidu.com");
}
//关闭新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
//关闭窗口
newWindow.close();
}
</script>
</body>
- 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。- 参数：
- js代码或者方法对象
- 毫秒值
- 返回值：唯一标识，用于取消定时器
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()： 取消由 setInterval() 设置的 timeout。
- 参数：
//一次性的定时器
// setTimeout("fun()",2000);
var id = setTimeout("fun",2000);
//取消定时器方法设置
clearTimeout(id);
function fun() {
alert('boom~~');
}
//循环定时器
var tim1 = setInterval(fun,3000);
//取消循环定时器方法
clearInterval(tim1);
- 属性：
-
获取其他BOM对象：
history
location
Navigator
Screen: -
获取DOM对象
document -
特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名(); -
Location：地址栏对象
-
创建(获取)：
- window.location
- location
-
方法：
- reload() 重新加载当前文档。刷新
-
属性
- href 设置或返回完整的 URL。
-
-
<body>
<input type="button" id = "btn" value="刷新">
<input type="button" id = "goBaidu" value="去百度">
<script>
//reload方法，定义一个按钮，点击按钮，刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2.绑定单击事件
btn.onclick = function () {
//3.刷新页面
location.reload();
}
//获取href
var href = location.href;
// alert(href);
//点击按钮跳转到百度的网页
//获取按钮
var goBaidu = document.getElementById("goBaidu");
//绑定单击事件
goBaidu.onclick = function () {
location.href = "https://www.baidu.com";
}
</script>
案例：设置一个倒计时的页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转案例</title>
<style>
p{
text-align: center;
}
span{
color: red;
}
</style>
</head>
<body>
<p>
<span id = "time">5</span>秒之后，跳转到百度首页...
</p>
<script>
//获取倒计时秒数
var time = document.getElementById("time");
var second = 5;
function showTime() {
second--;
if (second <= 0){
//时间到，跳转到百度首页
location.href = "https://www.baidu.com";
}
time.innerHTML = second;
}
//定义循环时间
setInterval(showTime,1000);
</script>
</body>
</html>
- History：历史记录对象
-
创建(获取)：
- window.history
- history
-
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
- 参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录
- 参数：
-
属性：
- length 返回当前窗口历史列表中的 URL 数量。
案例： 单击前进后退
- length 返回当前窗口历史列表中的 URL 数量。
-
<body>
<input type="button" id = "btn" value="获取历史记录个数">
<a href="history对象2.html">history对象2</a>
<input type="button" id = "forward" value="前进">
<script>
//获取按钮
var btn = document.getElementById("btn");
//绑定单击事件
btn.onclick = function () {
//获取当前窗口历史记录
var length = history.length;
alert(length);
}
//获取按钮
var forward = document.getElementById("forward");
//绑定单击事件
forward.onclick = function () {
//前进
history.forward();
// history.go(1);
}
</script>
</body>
案例：表格添加删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<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 id="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>
</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>
/*
分析：
1、添加
1、给添加按钮绑定单击事件
2、获取文本框的内容
3、创建td，设置td的文本为文本框的内容
4、创建tr
5、将td添加到tr中
6、获取table，将tr添加到table中
*/
//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;
var table = document.getElementById("table");
//4、创建tr
var tr = document.createElement("tr");
//3、创建td，赋值td的标签体
//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);
//5、添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
var td_option = document.createElement("td");
//a标签的td
var a = document.createElement("a");
a.setAttribute("href", "javascript:void(0);");
a.setAttribute("onclick", "delTr(this);");
var text_a = document.createTextNode("删除");
a.appendChild(text_a);
td_option.appendChild(a);
tr.appendChild(td_option);
table.appendChild(tr);
}
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
内容总结
以上是互联网集市为您收集整理的【java script】DOM & BOM & 事件全部内容，希望文章能够帮你解决【java script】DOM & BOM & 事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】