DOM 对象和 BOM 对象

文章目录

• DOM对象
• • 1. DOM 简介
  • 2. HTML DOM 树
  • 3. DOM 节点
  • 4. DOM 查找
  • 5. DOM 操作
  • 6. DOM 事件
  • 7. DOM 优化
• BOM 对象
• • 1. window 对象
  • 2. Navigator 对象
  • 3. Screen 对象
  • 4. Location 对象
  • 5. History 对象

---

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()  // 后退一页