DOM模型+BOM模型，常见Web API简单介绍

1.BOM模型

BOM（Browser Object Model）是指浏览器对象模型。BOM提供了与浏览器交互的对象和方法，使得开发者能够控制浏览器窗口和框架，以及执行一些与浏览器相关的任务。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性。

1. window 对象：
   • 作用：window对象代表浏览器窗口或标签页，并作为全局作用域存在。
   • 常用方法：open()（打开新窗口或标签页）、close()（关闭当前窗口）、resizeTo()和resizeBy()（调整窗口大小）、alert()（显示警告框）、confirm()（显示确认框）等。
   • 属性：如innerWidth和innerHeight（窗口的视口宽度和高度）等。var newWindow = window.open('https://www.example.com', '_blank');

2. navigator 对象：
   • 作用：navigator对象包含有关浏览器的信息。
   • 属性：如appName（浏览器名称）、appVersion（浏览器版本）、userAgent（用户代理字符串，包含了浏览器类型、版本、操作系统等信息）等。
   • 用途：常用于检测用户使用的浏览器类型，以便进行特定的浏览器兼容处理。
3. screen 对象：
   • 作用：screen对象提供有关客户端屏幕的信息。
   • 属性：如width和height（屏幕的宽度和高度，以像素为单位）、availWidth和availHeight（屏幕可用于显示内容的区域的宽度和高度）等。
   • 用途：可用于确定页面的布局是否适合当前屏幕大小，或者调整元素的大小和位置以适应屏幕。
4. history 对象：
   • 作用：history对象提供了与浏览器历史记录交互的方法。
   • 方法：如back()（后退到历史列表中的上一个页面）、forward()（前进到历史列表中的下一个页面）、go()（加载历史列表中的某个具体页面）等。
   • 用途：常用于实现浏览器的后退和前进功能，或者根据历史记录进行页面跳转。
5. location 对象：
   • 作用：location对象包含了当前URL的信息，并允许你获取或设置窗口的URL。
   • 属性：如href（完整的URL）、protocol（协议）、hostname（主机名）、port（端口号）、pathname（路径名）等。
   • 方法：如reload()（重新加载当前页面）、replace()（用新的URL替换当前页面）等。
   • 用途：常用于获取当前页面的URL信息，或者进行页面跳转和刷新。

2.DOM模型

DOM模型，即文档对象模型（Document Object Model），是一种用来呈现以及与任意HTML或XML文档交互的API（应用程序接口）。DOM将载入到浏览器中的文档以节点树的形式表现，每个节点代表文档的构成部分，如页面元素、字符串或注释等。通过这种方式，DOM允许运行在浏览器中的代码访问并交互文档中的节点，这些节点可以被创建、移动或修改。

DOM模型是万维网上使用最为广泛的API之一，它提供了一种表述形式，将文档作为一个结构化的节点组以及包含属性和方法的对象，从而实现了web页面和脚本或编程语言之间的连接。通过使用DOM，开发者可以动态地访问程序和脚本，更新其内容、结构和www文档的风格。

​

DOM中所有的成分都是一个节点，节点类型共有三类，一类就是元素节点，一类节点就是文本节点，一类节点就是属性节点。首先我们简单介绍元素节点，元素节点就是html中的标签，文本节点就是标签里面的内容，对用户展示的内容，还有一类就是属性节点，属性节点就是在元素里面的属性，简单举个例子就是<a>里面的herf属性。

在接下来我们说一下就是节点的属性，

1. nodeName：这个属性表示节点的名称。对于元素节点，其nodeName与标签名相同；对于属性节点，nodeName是属性的名称；对于文本节点，nodeName永远是“#text”；而对于文档节点，nodeName永远是“#document”。这个属性是只读的。
2. nodeValue：这个属性表示节点的值。对于元素节点，其nodeValue通常是undefined或null；对于文本节点，nodeValue是文本自身；对于属性节点，nodeValue则是属性的值。这个属性不仅可以读取，也可以设置。
3. nodeType：这个属性表示节点的类型，也是只读的。DOM共有12种节点类型，每种类型表示文档中不同的信息及标记。不同类型的节点对应不同的常数值，从1到12。例如，元素节点的nodeType值为1，属性节点的nodeType值为2，文本节点的nodeType值为3等。

               我们再来说一下DOM方法，DOM（文档对象模型）提供了一系列方法，用于操作HTML和XML文档的结构和内容。这些方法主要可以分为三类：节点操作、属性操作以及节点遍历。

1. 节点操作：
   • createElement(tagName)：创建由指定标签名定义的元素节点。
   • createTextNode(data)：创建一个包含给定数据的文本节点。
   • appendChild(node)：将一个节点添加到指定父节点的子节点列表的末尾。
   • removeChild(node)：从父节点中移除一个子节点。
   • replaceChild(newNode, oldNode)：用新的节点替换一个已有的子节点。
   • insertBefore(newNode, referenceNode)：在参考节点之前插入一个新的子节点。
2. 属性操作：
   • getAttribute(name)：获取指定属性的值。
   • setAttribute(name, value)：设置指定属性的值。
   • removeAttribute(name)：移除指定属性。
   • hasAttribute(name)：返回一个布尔值，表示元素是否包含指定的属性。
3. 节点遍历：
   • firstChild 和 lastChild：分别获取节点的第一个和最后一个子节点。
   • nextSibling 和 previousSibling：分别获取节点的下一个和上一个同级节点。
   • childNodes：返回一个包含指定节点的所有子节点的集合（NodeList对象）。
   • parentNode：获取节点的父节点。

此外，DOM还提供了许多用于选择节点的方法，如：

• getElementById(id)：根据元素的ID属性值获取元素节点。
• getElementsByClassName(className)：根据元素的类名获取元素节点集合。
• getElementsByTagName(tagName)：根据元素的标签名获取元素节点集合。
• querySelector(selector)：根据CSS选择器选择第一个匹配的元素节点。
• querySelectorAll(selector)：根据CSS选择器选择所有匹配的元素节点。

接下来我们再说一下就是怎么获取元素，首先直接获取元素

1. getElementById()：
   • 通过元素的ID获取元素。每个元素的ID应该是唯一的，所以这个方法通常返回单个元素。
2. getElementsByClassName()：
   • 通过元素的类名获取元素集合。这个方法返回一个包含所有具有指定类名的元素的NodeList。
3. getElementsByTagName()：
   • 通过元素的标签名获取元素集合。例如，document.getElementsByTagName('p')会返回所有<p>标签的元素的NodeList。
4. querySelector()：
   • 通过CSS选择器获取第一个匹配的元素。这个方法非常灵活，可以使用各种CSS选择器来选择元素。

当我们要获取元素里面的内容的时候，我们有三种方法可以实现：

1. 获取元素的文本内容：
   • 使用textContent属性：这个属性可以获取或设置指定元素的文本内容及其所有后代元素的文本内容。例如，element.textContent将返回元素及其子元素的文本内容。
   • 使用innerText属性：与textContent类似，但innerText会考虑元素的样式，不会返回隐藏元素的文本。
2. 获取元素的属性值：
   • 使用getAttribute(attributeName)方法：这个方法返回指定元素的属性值。你需要将你想要获取的属性的名称作为参数传递给这个方法。例如，element.getAttribute('class')将返回元素的class属性值。
3. 获取元素内部HTML内容：
   • 使用innerHTML属性：这个属性可以获取或设置指定元素内部的HTML内容。例如，element.innerHTML将返回元素内部的HTML代码。

        DOM修改主要包括4部分内容的修改：

                结构修改：这包括添加、删除或移动DOM元素。

                内容修改：你可以修改DOM元素的内容，如文本节点或HTML内容。

                属性修改：DOM元素通常具有各种属性，如class、id、style等。

                样式修改：通过修改元素的style属性或直接操作元素的类名，可以更改元素的CSS样式

var newElement = document.createElement('div');  
newElement.textContent = '这是一个新元素';  
  
  
document.body.appendChild(newElement);

// 获取一个元素  
var element = document.getElementById('myElement');  
  
// 修改元素的文本内容  
element.textContent = '新的文本内容';  
  
// 或者修改元素的HTML内容  
element.innerHTML = '<p>新的段落内容</p>';

 
var element = document.getElementById('myElement');  
  
 
element.setAttribute('class', 'newClass');  
element.setAttribute('data-custom', 'customValue');  
  
var className = element.getAttribute('class');  
var customValue = element.getAttribute('data-custom');

 
var element = document.getElementById('myElement');  
    
element.style.color = 'blue';  
element.style.fontSize = '16px';  
  
  
element.classList.add('newStyle');//css中定义了一个叫.newstyle的类

DOM事件

事件流描述了页面接收事件的顺序。

事件冒泡和事件捕获是JavaScript中处理事件流的两种主要机制。它们在处理用户交互（如点击、触摸、键盘输入等）时起着关键作用。

事件冒泡：当在一个元素上触发某个事件（如点击事件）时，这个事件首先会在该元素上被处理，然后它会逐级向上传播到父元素，一直传播到最顶层的父元素（通常是window对象）。这种传播过程被称为事件冒泡。形象地说，就像水泡从水底逐渐冒到水面的过程。在冒泡过程中，每一级的元素都有机会响应和处理这个事件。

事件捕获：与事件冒泡相反，事件捕获是从最顶层的父元素（通常是document对象）开始，逐级向下传播到目标元素。在捕获阶段，事件会经过目标元素的所有祖先元素，但在这个阶段通常不会触发事件处理函数。捕获阶段的主要目的是为事件处理函数提供一个在事件到达目标元素之前拦截或修改事件的机会。一旦事件到达目标元素，就进入了目标阶段，此时会在目标元素上触发事件处理函数。

在JavaScript中，你可以通过addEventListener方法的第三个参数来指定事件是在冒泡阶段还是捕获阶段被处理。如果设置为true，则事件处理函数会在捕获阶段被调用；如果设置为false或省略，则会在冒泡阶段被调用。

事件监听器

事件监听器通常包含以下几个关键部分：

1. 事件源：触发事件的组件或对象，例如一个按钮、输入框或窗口。
2. 事件类型：描述具体发生了哪种事件，如“点击”、“鼠标移动”或“数据加载”。
3. 事件处理器：一段代码或方法，用于处理事件。当事件发生时，这段代码会被执行。 

 在JavaScript中，事件监听器通常使用addEventListener方法来添加。addEventListener方法允许你为指定的元素绑定一个或多个事件，并指定当这些事件发生时应该调用的函数。

var button = document.getElementById('myButton');  
  
 
function handleClick(event) {  
  alert('按钮被点击了！');  
  console.log(event); 
}  
button.addEventListener('click', handleClick);

常见Web API简单介绍

Web API是网络应用程序接口，主要用于Web开发中，使网络应用能够通过API接口实现存储服务、消息服务、计算服务等能力。这些API通过浏览器访问，也可以通过其他应用程序通过HTTP请求访问。

1. Fetch API：用于发送网络请求并处理响应。Fetch API提供了一种更现代的方式来替代传统的XMLHttpRequest方法，它基于Promise设计，使得异步请求的处理更加简洁和直观。

fetch('https://api.example.com/data')  
  .then(response => response.json())  
  .then(data => console.log(data))  
  .catch(error => console.error('Error:', error));

1. XMLHttpRequest：这是一个较早的用于发送HTTP请求并与服务器进行通信的API。虽然Fetch API在现代开发中更为流行，但XMLHttpRequest仍然在一些老旧的应用或特定场景下被使用。

var xhr = new XMLHttpRequest();  
xhr.open('GET', 'https://api.example.com/data', true);  
xhr.onreadystatechange = function() {  
  if (xhr.readyState == 4 && xhr.status == 200)  
    console.log(xhr.responseText);  
};  
xhr.send();

1. Web Storage API：这个API提供了在浏览器中存储数据的功能，包括localStorage和sessionStorage。localStorage用于持久化存储数据，而sessionStorage则只在当前会话期间存储数据。

localStorage.setItem('key', 'value');  
  

var data = localStorage.getItem('key');  
console.log(data); 

1. Blob API：用于处理二进制数据，可以方便地将数据转换为Blob对象或从Blob对象读取数据。在Web应用中，可能需要上传或下载二进制文件，使用Blob API可以方便地处理这些数据。

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});  
var url = URL.createObjectURL(blob);  
var link = document.createElement('a');  
link.href = url;  
link.download = 'hello.txt';  
link.click();  
URL.revokeObjectURL(url);

1. FileReader API：用于在浏览器中读取文件内容的一组接口。例如，当用户选择一个文件输入到网页时，可以使用FileReader API读取该文件的内容。

var input = document.querySelector('input[type="file"]');  
input.addEventListener('change', function(e) {  
  var file = e.target.files[0];  
  var reader = new FileReader();  
  reader.onload = function(event) {  
    console.log(event.target.result); 
  };  
  reader.readAsText(file);  
});

1. DOM API：用于操作和操纵网页的文档对象模型。DOM API允许开发者通过编程方式修改网页的内容、结构和样式。

var element = document.getElementById('myElement');  
element.innerHTML = 'New content';   
element.style.color = 'red'; 

1. Canvas API：提供了通过JavaScript在网页上绘制图形和动画的能力。Canvas API通常与2D或3D图形渲染相关。

var canvas = document.getElementById('myCanvas');  
var ctx = canvas.getContext('2d');  
ctx.fillStyle = 'blue';  
ctx.fillRect(10, 10, 100, 100); 

1. Geolocation API：用于获取用户的地理位置信息。通过该API，网站可以请求用户的许可来获取其地理位置，进而提供基于位置的服务或内容。

if (navigator.geolocation) {  
  navigator.geolocation.getCurrentPosition(function(position) {  
    console.log('Latitude: ' + position.coords.latitude +   
                'Longitude: ' + position.coords.longitude);  
  }, function(error) {  
    console.error('Error occurred. Error code: ' + error.code);  
   
  });  
} else {  
  console.log('Geolocation is not supported by this browser.');  
}

1. Notifications API：允许网页向用户显示通知，即使浏览器不在前台运行时也能如此。这对于提醒用户注意网站更新或活动非常有用。

if (!("Notification" in window)) {  
  console.log("This browser does not support desktop notification");  
} else if (Notification.permission === "granted") {   
  var notification = new Notification("Hi there!");  
} else if (Notification.permission !== 'denied') {  
  Notification.requestPermission(function (permission) {  
    if (permission === "granted") {   
      var notification = new Notification("Hi there!");  
    }  
  });  
}