DOM 对象和 BOM 对象


DOM对象

1. DOM 简介

DOM (Document Object Model)是 W3C 的标准,是指文档对象模型(树结构)。

DOM 定义了访问和操作 HTML 文档的标准方法。通过它,可以访问HTML文档的所有元素。

2. HTML DOM 树

在这里插入图片描述

3. DOM 节点

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点(NODE):

  • 文档节点:整个文档(document对象)
  • 元素节点:每个 HTML 元素(element 对象)
  • 文本节点:HTML 元素内的文本(text对象)
  • 属性节点:每个 HTML 属性(attribute对象)
  • 注释节点:注释(comment对象)

画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。这里只需要记住 Document 对象和 Element 对象即可。

在这里插入图片描述

4. DOM 查找

直接查找

// 根据标签名获取标签合集
const div1 = document.getElementsByTagName("div"); // div1 div2 div3 div4 div5 (元素集合 HTMLCollection)
const div2 = document.querySelectorAll("div"); // div1 div2 div3 div4 div5 (节点集合 NodeList)

// 根据class属性获取
const div3 = document.getElementsByClassName("div"); // div1 div2 (元素集合 HTMLCollection)
const div4 = document.querySelectorAll(".div"); // div1 div2 (节点集合 NodeList)

// 根据id属性值获取
const div5 = document.getElementById("div"); // div3 (一个标签)
const div6 = document.querySelectorAll("#div"); // div3 (节点集合 NodeList)

// 根据name属性值获取
const div7 = document.getElementsByName("div"); // div4 div5 (节点集合 NodeList)

// 根据标签名获取标第一个
const div8 = document.querySelector("div"); // div1 (一个标签)

间接查找

parentElement       //父节点标签元素
children           //所有子标签
firstElementChild     //第一个子标签元素
lastElementChild      //最后一个子标签元素
nextElementtSibling    //下一个兄弟标签元素
previousElementSibling  //上一个兄弟标签元素

// 示例:
var ele1=document.getElementsByTagName("a")[0];
var ele2=ele1.parentElement;
console.log(ele2);

5. DOM 操作

// 创建节点
var divEle = document.createElement("div");
var pEle = document.createElement("p");
var aEle = document.createElement("a");

// 添加节点
document.body.appendChild(divEle);  // 将上面创建的div元素加入到body的尾部
document.body.insertBefore(pEle, divEle);  // 在body下,将p元素添加到div元素前面

//替换节点
document.body.replaceChild(aEle, pEle);  // 在body下,用a元素替换p元素

//设置文本节点
aEle.innerText = "在干嘛"
divEle .innerHTML = "<p>在干嘛<p/>"

//设置属性
divEle .setAttribute("class","list"); // 给div元素加上class='list'属性

//获取class值
divEle.className // 获取div元素上的class

// 设置style样式
divEle.style.color = "red"; // 把div元素的color样式设置成red
divEle.style.margin = "10px"
divEle.style.width = "10px"
divEle.style.left = "10px"
divEle.style.position = "relative"

6. DOM 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

常用事件:

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。  //练习:输入框
onblur         元素失去焦点。  //应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证。
onchange       域的内容被改变。//应用场景:通常用于表单元素,当元素内容被改变时触发,(三级联动)

onkeydown      某个键盘按键被按下。//应用场景: 当用户在最后一个输入框按下回车按键时,表单提交。
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

7. DOM 优化

DOM 操作都是代价昂贵的操作,它会导致 WEB 应用程序的 UI 反应迟钝。所以,应当尽可能减少这类过程的发生。

// 不缓存 DOM 查询结果
for (let i = 0; i < document.getElementsByTagName("div").length; i++) {
    // 每次循环,都会计算length,频繁进行 DOM 查询
}

// 缓存 DOM 查询结果
const div = document.getElementsByTagName("div");
const length = div.length;
for (let i = 0; i < length; i++) {
    // 只进行一次 DOM 查询
}

将频繁的 DOM 操作改成一次性操作:

var el = document.getElementById('mydiv');

// 未优化前的DOM操作,会导致三次重排
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
el.style.padding = '5px';

// 优化后的DOM操作,只会一次重排
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

BOM 对象

BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。
使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
使 JavaScript 有能力与浏览器"对话"。

1. window 对象

window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()

  • 所有浏览器都支持 window 对象。它表示浏览器窗口;
  • 概念上讲:一个html文档对应一个window对象;
  • 功能上讲:控制浏览器窗口的;
  • 使用上讲:window对象不需要创建对象,直接使用即可;
  • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员;
  • 全局变量是 window 对象的属性。全局函数是 window 对象的方法。

window对象方法:

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。

2. Navigator 对象

Navigator 对象包含有关浏览器的信息。

const ua = navigator.userAgent;
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

3. Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

console.log(screen); // Screen {availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}
console.log(screen.width); // 1920
console.log(screen.height); //1080

4. Location 对象

Location 对象包含有关当前 URL 的信息。

Location 属性:

// 获取完整的url
location.href;   // "https://www.baidu.com/?id=123&num=456"

// 跳转到指定页面(可以返回上一个页面)
location.href="https://www.baidu.com/";

// 获取url的协议部分
location.protocol;  // "https:"

// 获取url的主机名和端口
location.host; // "www.baidu.com"

// 获取url的查询部分(问号 ? 之后的部分)
location.search; // "?id=123&num=456"

Location 方法:

// 重新加载页面,即刷新
location.reload();  

// 载入一个新的文档,跳转到指定页面(可以返回上一个页面)
location.assign("https://www.baidu.com/");

// 跳转到指定页面(不可以返回上一个页面)
location.replace("https://www.baidu.com/");

5. History 对象

History 对象包含用户(在浏览器窗口中)访问过的 URL。

History 对象方法:

history.forward()  // 前进一页
history.back()  // 后退一页
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猫老板的豆

你的鼓励将是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值