BOM/DOM 新手必备知识（Java修仙体系结丹境）

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;
}

如果这篇文章对你有用的话，记得点个赞哦！

修仙永无止境。