BOM/DOM 新手必备知识
BOM:Browser Object Model 浏览器对象模型
就是将浏览器窗口的各个部分封装为对象,并且可以通过脚本语言进行控制。
里面有很多的对象
windows:窗口对象
Navigator:浏览器对象,不讲解
Screen:显示器屏幕对象,不讲解
History:历史记录对象
Location:地址栏对象
下面我们进行一一讲解
⭐Windows 对象⭐
注意,所有的 JS 代码,最好在下面这个方法的方法体中写,这个代表等当前元素加载完后在进行脚本操作,不然有些图片还未加载成功,就进行操作显然是不合理的
windows.onload() = function(){}
方法:
alert(value); // 在浏览器窗口中弹出一个对象框,显示 value 的值,里面可以是任意的值
confrim(value); // 在浏览器弹出一个对话框,并且显示有 是/否两个选项,会在 JS 中返回 boolean 类型的值
prompt(value); // 弹出一个输入框,在JS中返回的值是这个输入框中的值
open(URL); // 打开一个新的窗口,并且跳转到URL中,可以返回接收一个值,可以用下面的close方法
close(open方法返回的值); // 关闭打开的窗口。
setTimeOut("参数1",参数2);
/*参数1:需要用 "" ,里面必须是JS代码或代码对象,等计时之后执行
参数2:计时的时间,单位为 秒
这个方法就是,等 参数2 的时间结束后,执行 参数1 的代码,但只执行一次。*/
setInterval("参数1",参数2); // 里面的参数定义和上面的方法,它的作用是当计时结束后,循环执行里面的 参数1。
clearTimeout(方法名称)/clearInterval(方法名称); // 清除计时器
属性:
获取其他的BOM对象,其实没必要获取,因为每一个BOM对象都能直接使用
关于获取 document DOM 对象,后面会讲的。
特点:BOM对象不需要获取对象,可以直接使用 window.方法名();
⭐History 对象⭐
方法:
go(int i):浏览器地址栏中会存储历史记录,我们可以调用这个方法进行跳转。i > 0 为前进 i = 0 原地刷新 i < 1 后退
back():后退
forward():前进
属性:
Length:获取历史记录的个数
注意:使用历史记录时,页面通常从浏览器缓存之中加载,而不是重新要求服务器发送新的网页
⭐Location 对象⭐
方法:
reload(); 刷新当前页面
属性:
href:设置或返回完整的URL对象,可以用来进行页面的跳转
DOM:Document Object Model 文档对象模型
将页面中HTML标签封装为对象,我们可以调用这些对象进行CRUD的动态操作
核心DOM:
document:文档对象
element:元素对象
attribute:属性对象
test:文本对象
comment:注释对象
node:节点对象
下面我们一一进行讲解
⭐document 对象⭐
我们可以用 windows BOM 对象来获取,或者直接用也可以。
注意事项
document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询
如果没有id属性,则优先使用getElementsByName方法来进行查询
如果id属性和name属性都没有,最后在按标签名查getElementsByTagName
以上三个方法,都要在页面加载完成之后执行,才能查询到标签对象
获取 element 对象,常用
getElementById("id"); // 根据 ID 获取元素对象,注意 ID 值是唯一的
getElementByName("name"); // 根据 Name 获取元素对象,返回值是数组
getElementByTagName("元素名称"); // 根据元素名获取元素对象,返回值是数组
getElementByClassName("class名称"); // 根据 class 名称获取元素对象,返回数组
创建其他DOM对象,不常用
createAttribute(name);
createComment();
createElement();
createTextNode();
⭐element 元素对象⭐
就是上面 documnet 获取 element 方法返回的对象,我们可以用于操作里面的属性
就像 <h1>
元素标签,我们可以操作它的单击事件啊什么的,里面的值甚至都可以修改
里面有许多的属性,我们可以自己去探索,反正只要标签体中能定义的属性,都可以进行操作
或者我们也可以删除标签中的默写属性或者添加默写属性
removetAttribute(); //删除属性
setAttribute(); // 添加属性
⭐NODE 节点对象⭐
特点:
所有dom对象都可以被认为是一个节点
属性:
parentNode 返回节点的父节点。
方法(CRUD 树):
appendChild(); // 向节点的子节点列表的结尾添加新的子节点。
removeChild(); // 删除(并返回)当前节点的指定子节点。
replaceChild(); // 用新节点替换一个子节点。
⭐HTML DOM⭐
这个可以用来操作标签体中的内容,和上面的 element 元素不重复,element可以获取到HTML DOM
获取方式:
element元素对象.innerHTML("标签体要设置修改的内容"); // 这个就可以用来设置标签体的内容了
或者我们还可以设置其元素样式,看 例1 例2
// 例1
let id = document.getElementById("h1"); // 先获取元素对象
id.style.color="red"; // 设置其 style 的样式
// 例2
let id = document.getElementById("h1"); // 先获取元素对象
id.className="h1"; // 设置它的 className ,相当于激活操作
最后我们就要来讲一下 事件 的操作
概念:当 某个东西触发了一个东西之后产生的结果,这个过程就叫事件。
比如:我 按下了 灯 的开关按钮。这就是一个事件。
事件这个东西分为四部分:
事件:某些操作。如:单机,双击,键盘按下,鼠标移动等
事件源:组件。如:按钮,文本输入框
监听器:代码
注册监听:将事件、事件源、监听器组合在一起。当事件源发生了某些事件时,则触发相应的监听器代码
// 事件的创建方法,当用户点击了 input 输入框后,会弹出一个输入框。
<input type="text" id="id>
<script>
document.getElementById("id").onclick = function (){
alert("点击了input标签")
}
</script>
// 常见的事件 点击事件
onclick(); // 单击事件
onfocus(); // 元素获得焦点,一般用于表单验证
onblur(); // 元素失去焦点
// 加载事件
onload(); // 需要在body标签加载完之后才生效的处理方式,上面有提到过
// 鼠标事件 定义方法时:定义一个形参,接受event值,event对象的button属性可以获取鼠标按钮被点击了
onmousedown(); // 当鼠标点击时
onmousemove(); // 当鼠标移出时
onmouseout(); // 当鼠标移入时
// 键盘事件 还是顶一个 event 形参,里面的 keycode 属性可以获取哪个键被点击了
onkeydown(); // 某个键盘被按下
onkeyup(); // 某个键盘被松开
onkeypress(); // 某个键盘被按下松开
// 选择和改变
onchange(); // 域的内容被改变
onselect(); // 文本被选中
// 表单事件
onsubmit(); // 当表单的 submit 按钮被按下,可以阻止表单的提交
onreset(); // 重置按钮被点击
关于阻止表单提交的方式
onsubmit() 方法的底层源码
<!--在JS底层代码中,会将 onsubmit 属性的值放入一个方法中,当这个方法返回false时,表单会阻止提交-->
function(){
//onsubmit中的属性值
return checkForm();
}
<!--第一种方式,直接return即可-->
<form action="#" onsubmit="return checkForm()"><form>
<!--第二种方式-->
直接通过获取元素的单击事件,参数为 event,然后直接 event.preventDefault(); 即可
或者如下代码:
document.getElementById("sub").onsubmit = function (){
return false;
}
如果这篇文章对你有用的话,记得点个赞哦!
修仙永无止境。