马鞍山疫情最新情况_黄页88b2b网页害羞草_西地那非片_网推接单平台

前置知识

JavaScript = ECMAscript + BOM + DOM

ECMAscript：相当于JS的执行标准。
BOM：浏览器对象模型。BOM 提供了与浏览器窗口交互的接口，这些接口独立于网页内容。BOM的对象允许JavaScript访问和操作浏览器窗口，是所有JavaScript对象、方法和属性的根。BOM的核心对象有：

• window：表示浏览器的一个实例，是JavaScript中的全局对象，所有在全局作用域中声明的变量、函数都是window对象的成员。
• navigator：包含有关浏览器的信息。
• location：提供了当前URL的信息，并允许将浏览器重定向到新的URL。
• screen：提供关于用户屏幕的信息。
• history：允许操作浏览器的会话历史（即浏览器的前进、后退按钮）。

DOM：文档对象模型。DOM 是浏览器提供的一个接口，用于访问和操作网页的内容。当浏览器加载一个网页时，它会创建一个文档对象模型，即一个包含整个页面内容的结构化节点树。这允许开发者使用JavaScript动态访问和改变页面的结构、样式和内容。DOM定义了节点和对象的属性、方法，这些属性、方法可以动态地更新页面内容，响应用户的交互。

BOM (浏览器对象模型)

• BOM 是浏览器功能的接口：BOM 提供了一组与浏览器功能直接相关的对象，允许开发者控制和访问浏览器的窗口、标签、导航历史、位置、屏幕、定时器等功能。
  浏览器窗口的组件：BOM 的主要组成部分包括 window、location、history、navigator 等对象，这些都是用来与浏览器的窗口和其他非页面内容功能交互的工具。

DOM (文档对象模型)

• DOM 是操作 HTML（和XML）的接口：DOM 将 HTML 和 XML 文档呈现为一个树形结构，每个节点代表文档中的一个部分（如元素、属性、文本等）。DOM 允许通过 JavaScript 动态访问和修改这些节点，进而改变文档的结构、内容和样式。
  内容的动态访问和修改：DOM 提供了方法和属性来动态创建、删除、修改文档的节点，从而实现页面内容的动态更改。这是现代动态网页应用的基础。

基于 JavaScript

• JavaScript 作为编程语言：BOM 和 DOM 都可以通过 JavaScript 访问和操纵。事实上，JavaScript 是与这些对象模型交互的主要工具。通过 JavaScript，开发者可以写脚本来响应用户事件，如点击、滚动、键盘输入等，以及修改 DOM 或使用 BOM 提供的浏览器功能。

浏览器的角色

• 浏览器作为展示平台：浏览器的核心功能是解析 HTML 和 CSS，执行 JavaScript，渲染页面，展示给用户。浏览器通过实现 BOM 和 DOM 接口，使得网页不仅可以展示静态内容，还能进行丰富的交互和动态功能。

一、浏览器对象模型 BOM

浏览器对象模型，Browser Object Model（BOM），可以理解为封装浏览器功能的接口，它提供操作浏览器/使用浏览器功能的方法。BOM 是指所有与浏览器窗口相关的对象，除了文档对象模型（DOM），它还包括浏览器窗口和框架、导航器、位置和历史记录等一系列对象。BOM 提供了与浏览器交互的接口，为了能够让JavaScript能控制浏览器的行为，允许开发者控制浏览器的行为以及访问浏览器窗口之外的数据。

1.JS执行机制

总的来说：JS是单线程语言，一个任务结束才能执行下一个任务，因而会造成阻塞，所以提出同步异步解决方案。

事件循环 Event Loop：后面再学吧。。。。

2.BOM对象

BOM
└── Window├── History│   └── 历史记录列表├── Location│   └── 当前页面的URL信息├── Navigator│   └── 浏览器信息├── Screen│   └── 屏幕信息├── Document│   └── DOM│       ├── 元素节点│       ├── 属性节点│       └── 文本节点└── Console└── 日志输出

Window 对象
window 代表浏览器的一个窗口或标签页，提供了控制浏览器窗口的方法和属性，是浏览器中最顶层的对象，同时也是全局对象，所以在全局作用域中声明的所有变量和函数都成为了 window 对象的属性。window 对象包含了很多方法和属性，用来控制浏览器的行为：

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高；打开新的浏览器窗口 (window.open())、设置计时器 (setTimeout()、setInterval())、以及访问 console 用于日志输出。

window的所有属性和方法，都可以有两种表示方法：(1) window.属性 / window.方法()；(2) 直接属性 / 方法() 的方式调用。

• Navigator 对象
  navigator 对象包含有关浏览器的信息，允许脚本查询和注册自己以响应浏览器的特定条件或功能。包括浏览器的名称、版本、所用的网络连接、插件等信息。navigator.userAgent：浏览器的用户代理字符串，用于识别浏览器类型。navigator.language：返回浏览器的默认语言设置。navigator.geolocation：获取用户的地理位置（通过 GPS 等设备）。navigator.mediaDevices：访问摄像头和麦克风。
  

• Location 对象
  location 对象，是window对象的一个属性，提供了当前窗口的 URL 信息，并允许 JavaScript 重定向到不同的 URL。window.location = location = document.location 包含有关 URL 的属性，如 hostname、pathname、search 等，以及对 URL 进行操作的方法，如 reload()、replace()、assign()。location.href：当前页面的完整 URL。location.assign(url)：跳转到新页面。location.reload()：重新加载当前页面。location.replace(url)：跳转到新页面并且不会保留历史记录。
  

• History 对象
  history 对象提供了浏览器历史的访问能力，允许开发者控制浏览器的会话历史，例如页面的前进和后退。history.back()：回到上一个页面。history.forward()：前进到下一个页面。history.go()：通过传递数字来前进或后退指定的页面数。
  

• Screen 对象
  screen 对象包含关于用户屏幕的信息，如屏幕的高度和宽度。可以用于获取设备的显示属性，以适当调整网页或应用的布局。screen.width：屏幕的宽度（像素）。screen.height：屏幕的高度（像素）。screen.availWidth：屏幕的可用宽度（排除任务栏等占用的区域）。

• Document 对象
  尽管 document 对象实际上是 DOM 的一部分，但在 BOM 中也可以访问它。它代表加载在窗口中的网页，通过它可以访问和修改网页内容。document.getElementById()：获取指定 ID 的元素。document.querySelector()：通过 CSS 选择器获取元素。document.createElement()：创建新的 HTML 元素。document.body：访问页面的 元素。

• Console对象
  console 对象是用于调试的输出工具，提供了一些方法来在浏览器的开发者工具中输出信息。
  console.log()：输出普通信息。console.error()：输出错误信息。console.warn()：输出警告信息。
  console.table()：以表格形式输出数组或对象的内容。

除了上面的对象，还有：
Storage 对象：
包括 localStorage 和 sessionStorage，用于在客户端存储数据。
方法：setItem(), getItem(), removeItem(), clear()
用途：存储和访问数据，有助于创建无需每次会话都重新加载的用户体验

BOM 的重要性和功能
设备无关性：BOM 的 API 设计为设备无关的方式，允许开发者编写在多种浏览器和设备上运行的代码。
用户界面控制：通过 BOM，开发者可以控制浏览器的行为，例如打开新窗口，调整窗口大小，控制标签的打开和关闭等。
浏览器特性检测：BOM 允许开发者检测浏览器的特定特性和插件，确保功能在用户的浏览器上可以正常使用。

二、文档对象模型 DOM

DOM（Document Object Model ，文档对象模型）一种跨平台、独立于语言，JavaScript用于操作xml，html文档的应用编程接口。它允许程序和脚本动态地访问和更新文档的内容、结构以及样式。DOM 将 HTML、XML 或 SVG 文档表述为树形结构，每个节点都是文档中的一部分，比如文本、元素、注释和属性。

DOM 树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示。标签中的文本是文本节点（Text Node），而标签的属性则表示为属性节点（Attribute Node）。

• HTML DOM树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除

DOM 把以上内容都看做是对象。

1.访问节点（获取元素）

根据 ID 获取

• 使用 getElementById(ID) 方法可以获取带有 ID 的元素对象
• 使用 console.dir() / console.log(id)可以打印我们获取的元素对象，更好的查看对象里面的属性和方法

根据标签名获取

• 使用 getElementsByTagName(tagname) 方法可以返回带有指定标签名的对象的集合 。得到的是对象集合，动态的，元素变了，js对象也会变，获取不到就是空的伪数组。
• document.getElementByName(‘标签名’)：表单的Name

根据 类名 获取

• document.getElementsByClassName('类名') 根据类名返回元素对象集合

静态获取：使用 css 选择器 进行选择（.类名），只能获取页面中已经存在的元素，不能实时更新。

• document.querySelector('选择器') 根据指定选择器返回第一个元素对象
• document.querySelectorAll('选择器') 根据指定选择器返回

特殊元素获取

• 获取body元素 doucumnet.bodydoucumnet.head
• 获取html元素 document.documentElement

2.修改DOM结构

DOM 提供了方法来动态修改文档结构：

• createElement(tagName)：创建新的元素节点。
• createTextNode(text)：创建新的文本节点。这个方法接受一个字符串参数，表示文本节点的内容。
• appendChild(child)：将节点添加为最后一个子节点。
• insertBefore(newNode, referenceNode)：将节点插入到指定子节点之前。
• removeChild(node)：移除子节点。
• replaceChild(newChild, oldChild)：替换子节点
• element.classList.add(className)、element.classList.remove(className)： 添加或删除元素的类。
• element.innerHTML： 获取或设置元素的内部 HTML。这可以用来快速更新元素的内容

直接使用浏览器提供的API对DOM结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。
实际操作中，大多基于jQuery完成底层DOM操作。

三种动态创建元素区别

• document.write()
• element.innerHTML
• document.createElement()

区别:

• document.write() 是直接将内容写入页面的内容流，当文档流执行完毕，会导致页面全部重绘，原来就没有了
• innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘，innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
• createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

3.修改属性

其中 element.setAttribute(name, value);

4.修改样式

1. 使用 setAttribute()。
2. 直接使用 style 属性：CSS 属性以 kebab-case 编写，即小写单词用破折号分隔。要使用 JavaScript 的 style 属性中的 textAlign（第二个单词的首字母大写）。
3. 表现层CSS，直接把classname修改掉。

5.节点层面的修改

创建节点

• document.createElement(‘tagName’)
  创建由 tagName 指定的HTML元素。因为此元素原先不存在，是根据需求动态生成的，也称为动态创建元素节点

添加节点

• node.appendChild(child)将一个节点添加到指定父节点的子节点列表末尾，类似于 CSS 里的 :after

伪元素

• node.insertBefore(child, 指定元素)将一个节点添加到父节点的指定子节点前面，类似于 :before

删除节点

• node.removeChild(child)从DOM中删除一个子节点，返回删除的节点

复制节点

• node.cloneNode() 返回调用该方法的节点的一个副本，也成为克隆节点
• 括号里的参数为空或者为false，则是浅拷贝，只克隆复制节点本身，不克隆里面的子节点；括号里的参数为true，则是深拷贝，会复制节点本身及里面的子节点

6.事件处理

因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。事件是用户与页面交互的重要部分。

浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。
（由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码）

事件处理器是响应事件的函数。可以通过 HTML 属性、DOM 属性或使用 addEventListener() 方法绑定事件处理器。

DOM 允许注册事件处理程序来响应用户的行为，例如点击、滚动、按键等：

• addEventListener(type, listener)：为元素添加事件监听器。
• removeEventListener(type, listener)：移除事件监听器。

事件属性: 每个元素身上都有一批"on事件名"的属性。每当当前元素身上发生一个事件时，浏览器都会自动找到这个元素身上的对应的"on事件名"属性。自动触发该属性上提前保存的事件处理函数。

不好的是，这事件属性不能在一个属性上绑定多个事件处理，而是会覆盖前面，不如addEventListener。

const btn = document.querySelector("button");function random(number) {return Math.floor(Math.random() * (number + 1));
}btn.onclick = () => {const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;document.body.style.backgroundColor = rndCol;
};

内联事件处理器：
不推荐但好使，直接在html这里定义函数并绑定事件属性。

<button onclick="alert('你好，这是来自旧式事件处理器的一条消息');">按下我
</button>

阻止默认事件：preventDefault()

事件传播有三个阶段：

• 捕获阶段：事件从文档根节点向下传播到目标节点。
• 目标阶段：事件到达目标节点（触发事件的元素）。
• 冒泡阶段：事件从目标节点向上返回到文档的根节点。

默认情况下，事件处理器只在冒泡阶段执行。如果你想在捕获阶段处理事件，可以在 addEventListener() 的第三个参数传递 true。

btn.addEventListener('click', function() {alert('Clicked!');
}, true);

冒泡表示：你在父元素绑定事件，在子元素上交互触发，父元素的事件处理器也会响应。如果父-子-孙都有事件处理绑定，与孙交互，那么会先孙再子再父。或者说：事件不是先在最内层的目标元素上发生，然后在连续较少的嵌套元素上发生，而是先在最小嵌套元素上发生，然后在连续更多的嵌套元素上发生，直到达到目标。
Event 对象有一个可用的函数，叫做 stopPropagation() ，当在一个事件处理器中调用时，可以防止事件向任何其他元素传递。

上面有提到event 对象：代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。比如

• 谁绑定了这个事件
• 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
• 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键
  

e.target 和 this 的区别

• this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）
• e.target 是事件触发的元素，即点的是哪个元素

事件委托。在这种做法中，当我们想在用户与大量的子元素中的任何一个互动时运行一些代码时，我们在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。（不在自己元素上绑定事件，而是绑定到父元素上，然后利用冒泡原理影响设置每个子节点。）

参考

[1] JavaScript之彻底搞懂DOM与BOM及其区别与用法
[2] 如何修改 DOM 中的属性、类和样式
[3] BOM 浏览器对象模型