BOM,&histoy,&DOM

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

js 专栏收录该内容

18 篇文章

订阅专栏

本文深入讲解了JavaScript中的BOM（浏览器对象模型）与DOM（文档对象模型），涵盖了alert/prompt确认框、定时器（setInterval和setTimeout）、延迟加载以及window.onload事件。同时，剖析了document对象的使用，包括getElementById、getElementsByTagName等方法，以及节点操作如innerHTML和事件处理。

BOM

window：js所有属性和方法都必须通过前缀对象调用，所有能够省略前缀的属性或者方法对象都是window

三个弹出框：

alert（参数）：通过弹出框显示数据

alert("文本")警示效果

promp（【提示信息】，默认值）：返回字符串

confirm（【提示信息】：返回布尔值）

定时器

setInterval（回调函数，时间间隔）：返回值：关闭定时器的钥匙（clearInterval）；

setTimeout（回调函数，间隔）：返回关闭定时器的钥匙（clearTimeout）

延迟加载

延迟加载:当代码执行到onload的时候，会越过onload事件体的所有代码

直至整个页面其他代码运行完成，在回来运行onload事件体的代码

window.onload = function(){
				var oT = document.getElementById("test");

location：地址对象

herf：读写读获取当前页面地址

写

var oBtn = document.getElementById("btn");
	oBtn.onclick = function(){
		location.href = "http://www.4399.com";

document（文档对象）

write：拥有字符串解析功能

字符串解析：能转换为HTML标签的字符串，会直接当做html元素显示

当write方法与事件连用时,会直接覆盖原页面。

document：找对象

docunment.getElementById（“id”）通过id获取单个对象

doucument.getElementsByTagName(“标签”)：返回的是一个数组

document.getElementsByName("name名称")；通过name名批量获取对象，返回一个数组

document.getElementsByClassName("")；通过class名批量获取对象名，返回一个数组

document.querySelector(选择器)：通过类名，id名，标签名，获取单个元素

document.querySelectorAll(选择器);通过类名，标签名批量获取多个元素

节点遍历：

innerHTML:代表某个标签间的内容

nodeType获取，元素，文本

（firstElementchid，lastElementchid）父（nextElementSidling，PreviousElementSidling）兄弟

增：先创建在追加

1.创建节点 document.createElement("p");

2.追加父节点.appendChild(子节点)

删：Dom.remove():删除该Dom节点

var oP = document.createElement("p");
	 oP.innerHTML = "一道残阳铺水中";
	 document.body.appendChild(oP);

var oBtn = document.querySelector("button");
	var oUl = document.querySelector("ul");
	
	oBtn.onclick = function(){
		oUl.lastElementChild.remove();
	}