从零开始学习BOM&DOM

2023-02-20  本文已影响0人  虎妞先生

前言

ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

DOM/BOM架构

image

概述

JavaScript运行在浏览器

BOM就是连接JavaScript代码和浏览器的桥梁，而DOM就是用来操作各种标签元素的。

继承关系

我们可以在浏览器中打印它的原型属性

通过下图我们可以看出，window继承Window，Window继承自EventTarget

image

通过下图我们可以看出，document继承HtmlDocument，HtmlDocument继承自Document,Document继承自Node节点，Node节点继承自EventTarget

image

顺便说一句：EventTarget继承自Object,Object继承自null

EventTarget 接口

EventTarget 是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。

Element，document 和 window 是最常见的 event targets

EventTarget有三个原型方法，在window和DOM元素上都可以使用

BOM

认识BOM

Window全局对象

在浏览器中，window对象就是之前经常提到的全局对象

var message = 'hello'
function foo(){
    console.log("foo")
}
console.log(window.message)
window.foo()

 window.setTimeout(()=>{
     console.log('setTimout')
 })
 
 const obj = new window.Object()
 console.log(obj)

Window窗口对象

window是一个复杂的大对象，包含了大量的对象和方法

参考地址：MDN文档:developer.mozilla.org/zh-CN/docs/…

[图片上传失败...(image-bb8cd9-1676958099638)]

常见的属性

// screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。
console.log(window.screenX)
console.log(window.screenY)

// 监听滚动
window.addEventListener("scroll", () => {
   console.log(window.scrollX, window.scrollY)
})
// 获取窗口的宽度与高度：
console.log(window.outerHeight)
console.log(window.innerHeight)

常见的方法

const scrollBtn = document.querySelector("#scroll")
scrollBtn.onclick = function() {
    //1.scrollTo
    window.scrollTo({ top: 2000 })

    //2.close
    window.close()

    // 3.open
    window.open("http://www.baidu.com", "_self")
}

常见的事件

// 整个页面以及所有资源加载完成
window.onload = function() {
  console.log("window窗口加载完毕~")
}

window.onfocus = function() {
  console.log("window窗口获取焦点~")
}

window.onblur = function() {
  console.log("window窗口失去焦点~")
}

//hash 改变
const hashChangeBtn = document.querySelector("#hashchange")
hashChangeBtn.onclick = function() {
  location.hash = "aaaa"
}
window.onhashchange = function() {
  console.log("hash发生了改变")
}

Navigator 对象

Navigator 对象包含有关浏览器的信息。到底提供哪些信息很大程度取决于用户的浏览器，但是也有一些公共的属性，如userAgent 存在所有的浏览器中

Navigator 对象常见的属性

window.navigator.appCodeName
//返回浏览器的代码名   'Mozilla'
window.navigator.appName
//返回浏览器的名称 'Netscape'
window.navigator.appVersion
//返回浏览器的平台和版本信息
//'5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
window.navigator.cookieEnabled
//返回指明浏览器中是否启用 cookie 的布尔值 true
window.navigator.platform
//返回运行浏览器的操作系统平台 'MacIntel'
window.navigator.userAgent
//返回由客户机发送服务器的user-agent 头部的值
//'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36'

使用场景

检测插件

可以检测浏览器内是否安装了特定的插件

navigator.plugins

判断系统类型，版本信息

location对象

location 对象 是最有用的BOM对象之一

它既是window对象的属性，也是document对象的属性，window.location 和document.location引用的是同一个对象。

常见属性

常用方法

location.assign("http://www.baidu.com")
location.href = "http://www.baidu.com"

location.replace("http://www.baidu.com")
location.reload(false)

Screen对象

在编程中使用不多，只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素的宽度和高度，每个浏览器的screen对象都包含着不同的属性。根据具体业务场景去查询就好。

history 对象

history对象允许我们访问浏览器曾经的会话历史记录。

history对象有两个属性

history对象有五个方法:

总结

BOM 以window对象为依托，表示浏览器窗口以及页面可见区域

DOM

document Object Model 文档对象模型

节点层次

DOM可以把任何HTML和XML文档描绘成一个由多层节点构成的树形结构。

<html>
  <head>
    <meta charset="UTF-8">
    <title>测试</title>
  </head>
  <body>
    <h1>标题</h1>
    <ul>
      <1i>
        <a href="#">链接</a>
      </1i>
    </ul>
  </body>
</html>
image

上图中就包括DOM的主要节点

Document文档节点

表示整个 HTML 页面(相当于 document 对象)

当需要访问任何标签、属性或文本时，都可以通过文档节点进行导航

Element元素节点 ul h1 li

表示 HTML 页面中的标签(即 HTML 页面的结构)

当访问 DOM 树时，需要从查找元素节点开始

Attr 属性节点 href

表示 HTML 页面中的开始标签包含的属性

Text 文本节点 比如title的内容

Node 类型

所有的DOM节点类型都继承自Node接口，每个节点都有一个nodeType属性，用于表明节点的类型。

对于HTML文档，节点主要有以下六种类型：Document节点、DocumentType节点、Element节点、Attribute节点、Text节点和DocumentFragment节点。

分类

节点 名称 含义
Document 文档节点 整个文档（window.document）
DocumentType 文档类型节点 文档的类型（比如 'DOCTYPE html'）
Element 元素节点 HTML元素（比如body、a等）
Attribute 属性节点 HTML元素的属性（比如class="right"）
Text 文本节点 HTML文档中出现的文本
DocumentFragment 文档碎片节点 文档的片段

常用属性

Node 有几个非常用且重要的属性

Document 类型

JavaScript 通过Document 类型表示整个文档。

Document 类型可以表示 HTML 页面或者 其他基于 XML 的文档。不过最常用的应用还是作为HTMLDocument实例的document 对象。

在浏览器中 document 对象是 HTMLDocument的一个实例，表示整个HTML页面。而且，document对象也是window对象的一个属性，因此可以作为全局对象来访问。

常见属性

常见方法

// 创建元素
const imageEl = document.createElement("img")
const imageEl2 = new HTMLImageElement()

// 获取元素
const divEl1 = document.getElementById("box")
const divEl2 = document.getElementsByTagName("div")
const divEl3 = document.getElementsByName("title")

将输出流写入到网页的能力。

document.write()
document.writeln()
document.open()
document.close()

Element 类型

Element 类型用于表现XML和HTML元素，提供了对元素标签名，子节点及特性的访问

我们平时创建的div、p、span等元素在DOM中表示为Element元素

常见属性

常见方法

获取特性 getAttribute 修改某个特性 setAttribute

创建元素 document.createElement()

Text 类型

文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容

Comment 类型

注释

DocumentFragment 类型

DOM规定文档片段是一种轻量级的文档，不会像完整的文档那样占有额外的资源

可以在里面保存将来会添加到文档的节点。要创建文档片段，可以使用document.createDocumentFragment()

文档片段本身永远不会成为文档树的一部分

Attr类型

元素的特性在DOM中用Attr类型来表示。很少使用。

总结

DOM1级将HTML和XML文档看作一个层次化的节点树，方便js来直接操作。

DOM 是由各种节点构成的

DOM扩展

对DOM的扩展主要包括 选择符API 和 HTML5

选择符API

选择符，最核心的两个API 就是 querySelector() 和 querySelectorAll()

可以通过Document 和 Element 类型的实例调用

const divEl1 = document.querySelector(".content")
const divEl2 = document.querySelectorAll(".content")

HTML5

html5涉及的面非常广，我们这里这讨论与DOM 节点相关的内容

获取dom元素

自定义数据属性

可以为元素添加非标准的属性，但是要添加前缀 data-

通过元素的 dataset 属性来访问自定义的属性的值

<div id ="myDiv" data-appId = "12345" data-name="yz"></div>

var div = document.getElementById('myDiv')

var appId = div.dataset.appId
var name = div.dataset.name

插入标记

innerHTML属性

一般我们插入大量新HTML标记时，使用innerHTML 与通过多次DOM操作先创建节点再指定它们之间的关系相比，效率更高，因为在设置innerHTML 时就会先创建一个HTML解析器，这个解析是在浏览器级别的基础上代码（c++）运行的，因此比执行js 快得多，当然也会带来 创建销毁 html 解析器也有性能消耗。所以控制次数。

DOM2和DOM3

DOM1级主要定义的是HTML和XML文档的底层结构

DOM2级和DOM3级是在这个结构基础上引入了更多的交互能力和特性。扩展了DOM API,以满足操作DOM的所有需求，同时提供更好的错误处理和特性监测能力

DOM变化

-   一个判断相同 两个节点引用的是同一个对象
-   一个判断相等 两个节点是同类型的对象，具有相等的属性（nodeName,nodeValue等等），而且他们的attributes和 childNodes属性也相等（相同位置包含相同的）

var div1 = document.createElement("div")
div1.setAttribute("class","box")

var div1 = document.createElement("div")
div1.setAttribute("class","box")

alert(div1.isSameNode(div1)) // true
alert(div1.isEqualNode(div1)) // true
alert(div1.isSameNode(div2)) // false

var iframe = document.getElementById("myIframe")
var iframe = iframe.contentDocuemnt || iframe.contentWindow.document

样式变化

访问元素的样式

操作样式表

元素大小

image image

范围

为了让开发人员更方便得控制页面，dom2 定义了范围 range接口。

document.createRange()

var range1 = document.createRange()
var p1 = document.getElementById('p1')

range1.selcetNode(p1)

小结

dom2 级主要新增了操作样式的能力和操作范围内dom的能力

总结

对于dom和bom的学习，我所秉持的观点依然是，抓大放小，建立知识体系，常用的api可以了解，不常用的api知道去哪里查就好，因为平常业务开发也接触不到太底层的代码。

框架发展到今天，对我们前端开发来说，已经很少去操作Dom了，但框架已经帮助我们做了，对于Bom的交互也有很多封装成熟的函数库，但是如果要对前端深入学习，我觉得这些知识还是必须掌握的，前端学习js 永远是基础，框架函数库，都是锦上添花的东西。

我们要知其然，更要知其所以然。

上一篇下一篇

猜你喜欢

热点阅读