14DOM和BOM

最新推荐文章于 2024-09-30 15:42:36 发布

乐安lan

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量186

点赞数 9

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/ahuaaaaa/article/details/140260380

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

【一】DOM和BOM

1.文档对象模型（Document Object Model, 简称 DOM）操作页面标签
通过JavaScript可以创建、查询、修改和删除这些对象。
"""● document.getElementById(id): 通过元素ID获取DOM元素对象。
● element.querySelector/pseudo-class: 根据CSS选择器或伪类选择DOM元素对象。
● element.appendChild(newElement): 向指定元素添加子元素。
● element.setAttribute(name, value): 设置元素属性值。
● element.innerText/innerHTML: 获取或设置元素内的文本内容或HTML内容。"""

2.浏览器对象模型（Browser Object Model, 简称 BOM）操作浏览器
用于处理与浏览器环境相关的任务，如窗口管理、导航、cookie、location等。
"""
window.open(url[, name[, features]]): 打开新的浏览器窗口或tab访问指定URL。
window.location.href: 获取当前页面的URL地址，并可用于更改页面位置。
window.history.back(): 返回历史记录中的上一页。
navigator.userAgent: 获取浏览器的信息，例如类型、版本等。
"""

【二】Window对象

Window对象是JavaScript中表示浏览器窗口的全局对象，它提供了一系列方法来操作和管理窗口。

(1)方法

1.open()打开新窗口或者获取对一个已经存在的窗口的引用
第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口的大小
 _blank 打开新窗口(默认) _self 原地打开
    let newWindow = window.open("https://www.example.com", "_blank");
    let newWindow = window.open("https://pic.netbian.com/", "_blank",'height=400px,width=400px');
2.close()关闭当前窗口。
    window.close();
3.setTimeout(函数，延时)在指定的时间延迟后执行一次指定的函数或者一段代码。
    setTimeout(function(){
      // 执行代码
    }, 100); // 1秒后执行   
4.setInterval(函数，延时)以固定的时间间隔重复执行指定的函数或者一段代码。
    setInterval(function(){
  // 执行代码
}, 200); // 每2秒执行一次
5.alert()显示一个带有指定消息和一个确认按钮的警告框。
    window.alert("Hello, World!");
6.confirm()显示一个带有指定消息和两个按钮（确认和取消）的对话框。
window.confirm()返回值是一个布尔值
    if (window.confirm("Are you sure?")) {
  // 用户点击了确认按钮
} else {
  // 用户点击了取消按钮
}
7.prompt()显示一个带有指定消息和一个文本输入框的对话框。
    let name = window.prompt("Please enter your name:");
8.innerHeight 属性-->返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。
    let windowHeight = window.innerHeight;
console.log(windowHeight); // 输出当前窗口的视口高度
9.innerWidth 属性-->与上一致
10.监听 resize 事件--》上面这两个属性返回的值会随着窗口的大小调整而改变，因此如果需要监控窗口大小的改变，可以通过监听 resize 事件来实现  window.addEventListener("resize", function() {
  let windowHeight = window.innerHeight;
  let windowWidth = window.innerWidth;
  console.log("Window Height:", windowHeight);
  console.log("Window Width:", windowWidth);
});

11.window.opener是指打开当前窗口的那个窗口对象。它是 Window 对象的一个属性，用于在当前窗口中引用到打开它的父窗口或者来源窗口。
    使用场景：
    1.当前窗口是通过使用 JavaScript 的 window.open() 方法打开的弹出窗口时，可以使用 window.opener 来引用打开它的父窗口。
    let popup = window.open("popup.html"); // 打开一个弹出窗口
    let parentWindow = window.opener;
    console.log(parentWindow); // 输出父窗口对象
    
    2.postMessage() 方法
    当前窗口是通过其他窗口向其发送消息（使用 postMessage() 方法）时，可以使用 event.source 属性来获取消息来源窗口，并通过 window.opener 来引用该来源窗口。
    在当前窗口 current.html 中的 JavaScript 代码中，通过监听 message 事件接收来自来源窗口的消息，并使用 event.source 和 window.opener 引用到来源窗口
    let currentWindow = window.open("current.html"); // 打开目标窗口

    // 原窗口向目标窗口发送消息
  currentWindow.postMessage("Hello", "http://example.com");
在目标窗口：
window.addEventListener("message", function(event) {
  let message = event.data;
  let sourceWindow = event.source;
  let openerWindow = window.opener;

  console.log("Message:", message);
  console.log("Source Window:", sourceWindow);
  console.log("Opener Window:", openerWindow);
});

【三】Window子对象

1.window.document
    此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
    通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。
    let pageTitle = window.document.title;//获取页面标题
2.window.location控制地址
    包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
    通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。
    window.location.href = 'https://example.com';

(1)window.location控制地址

1.window.location.href*
获取当前页面的完整 URL（包括协议、域名、路径等）。
    let currentURL = window.location.href;
    console.log(currentURL);

    window.location.href = url // 跳转到目标地址
2.window.location.protocol
获取当前页面的协议部分（例如 'http:' 或 'https:'）。
    let protocol = window.location.protocol;
    console.log(protocol);
3.window.location.host
获取当前页面的主机（域名和端口号）部分。
    let host = window.location.host;
    console.log(host);
4.window.location.hostname
获取当前页面的主机名部分。
    let hostname = window.location.hostname;
    console.log(hostname);
5.window.location.port
获取当前页面的端口号部分。
    let port = window.location.port;
    console.log(port);
6.window.location.pathname
获取当前页面的路径部分。
    let pathname = window.location.pathname;
    console.log(pathname);
7.window.location.search
获取当前页面的查询参数部分（即 URL 中问号后面的内容）
    let searchParams = window.location.search;
    console.log(searchParams);
8.window.location.hash
获取当前页面的片段标识部分
    let hash = window.location.hash;
console.log(hash);
9.window.location.assign()
将当前页面重定向到指定的 URL。
    // 将当前页面重定向到 example.com
    window.location.assign("http://example.com");
10.window.location.reload()*
    // 重新加载当前页面
window.location.reload();

(2)window.history

用于操作浏览器的历史记录，包括向前和向后导航
1.window.history.length
    返回当前会话的历史记录条目数
2.window.history.back()
    加载上一个历史记录
3.window.history.forward()
    加载下一个历史记录
4.window.history.go()
    根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页。
5.window.history.pushState()
    向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
6.window.history.replaceState()
    替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL。

(3)window.navigator提供有关浏览器环境和设备的信息

1.window.navigator.userAgent
    返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息。
2.window.navigator.platform
//'Win32'
    返回操作系统平台
3.window.navigator.vendor
    返回浏览器的厂商或供应商名称
4.window.navigator.language
    返回浏览器的首选语言，通常是用户操作系统的默认语言。
5.window.navigator.cookieEnabled
    返回一个布尔值，表示浏览器是否启用了 cookie
6.window.navigator.plugins
    返回一个包含浏览器插件列表的 PluginArray 对象

【四】弹出框

1.警告框(alert)
2.确认框(confirm)
3.提示框(prompt)

【五】计时器相关

1.过一段时间触发一次(setTimeout)
2.每隔一段时间触发一次(setInterval)
3.清除定时器
4.使用clearTimeout函数。当你调用setTimeout时，它会返回一个ID，你可以使用这个ID来清除定时器。

(clearTimeout/clearInterval)
	clearTimeout：用于取消使用setTimeout函数设置的定时器
	eg：
	var timer = setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

    // 如果需要取消定时器
    clearTimeout(timer);
    
	clearInterval：用于取消使用setInterval函数设置的定时器

【六】查找标签

(1)直接查找标签getElement

1.getElementById根据元素的ID属性直接获取到对应的HTML元素。
	var element = document.getElementById("big");
	
	2.getElementsByTagName根据标签名称获取匹配的所有元素。
	var elements = document.getElementsByTagName("div");
	
	3.getElementsByClassName根据类名获取匹配的所有元素
	var elements = document.getElementsByClassName("up");
	//HTMLCollection [div.up]

(2)半间接查找标签query

选择器方法#id，.class等
1.querySelector,
    document.querySelector方法返回第一个匹配选择器的元素
    // 使用querySelector查询单个元素
console.log(document.querySelector(".big"))//得到的是html一整个class=big包起来的代码

2.querySelectorAll
document.querySelectorAll方法返回所有匹配选择器的元素列表
// 使用querySelectorAll查询多个元素
console.log(document.querySelectorAll(".big"))
//元素列表 [div.big]

(3)间接查找标签

首先肯定是要先基于某个元素，第一步是要先获取某元素，用直接查找，然后该元素.以下的方法
1.parentElement返回指定元素的父元素
console.log(elements.parentElement)得到的是html一整个父元素包起来的代码

2.children返回指定元素的所有子元素组成的集合
divEleOne.children
//[p.img, p.xm, p.zw]

3.firstElementChild指向指定元素的第一个子元素//得到的是html一整个子元素包起来的代码

4.lastElementChild指向指定元素的最后一个子元素。

5.nextElementSibling指定元素后面的下一个兄弟元素

6.previousElementSibling返回在指定元素之前出现的前一个兄弟元素

【七】节点操作

节点操作是指在文档对象模型（DOM）中对节点进行创建、获取、修改、删除等操作。

(1)创建节点

1.createElement(tagName): 创建一个具有指定标签名的元素节点。
newDiv=document.createElement("div")执行了这段代码，那么新创建的 div 元素在页面的任何地方都不会显示或存在，它仅仅作为一个内存中的对象。
document.body.appendChild(newDiv);才会添加进文档树

2.createTextNode(text): 创建一个包含指定文本内容的文本节点。
// 将文本节点添加到div元素中  
newDiv.appendChild(newText);

3.createDocumentFragment(): 创建一个空的文档片段节点，可用于高效地插入多个节点。

(2)获取节点

1.getElementById(id): 根据元素的id属性获取对应的元素节点。
2.getElementsByTagName(tagName): 根据元素的标签名获取一组元素节点。
3.getElementsByClassName(className): 根据元素的类名获取一组元素节点。
4.querySelector(selector): 使用CSS选择器获取匹配的第一个元素节点。
5.querySelectorAll(selector): 使用CSS选择器获取匹配的所有元素节点。

(3)修改节点

1.父node.appendChild(childNode): 将一个节点作为父节点的最后一个子节点添加到指定节点。
2.parent.removeChild(childNode): 从父节点中移除指定子节点。
3.父node.replaceChild(newNode, oldNode): 使用新节点替换旧节点。
4.父node.insertBefore(newNode, referenceNode): 在参考节点之前插入新节点。

(4)属性操作

"""只能用在HTML 元素上直接设置的属性值，这些属性是 HTML 标签的一部分，而不是 CSS 样式。这些属性可以包括 id、class、data-* 自定义属性、src（对于图片）、href（对于链接）等。"""

1.element.getAttribute(attribute): 获取指定属性的值。
    imga=document.getElementsByTagName("img");
    //HTMLCollection [img]
    imga[0].getAttribute("src")
    //'夏目头像.jpeg'
2.element.setAttribute(attribute, value): 设置指定属性的值。
3.element.removeAttribute(attribute): 移除指定属性。

(5)文本操作

1.node.textContent: 获取或设置节点的文本内容。
2.node.innerHTML: 获取或设置节点的HTML内容。

案例1图片

let imgEle = document.createElement("img");
// undefined
imgEle
// <img>

// 向标签内添加图片链接
imgEle.src="111.jpg";
// '111.jpg'
imgEle
// <img src="111.jpg">

// 向图片内设置自定义属性
imgEle.setAttribute("name","dream");
// undefined
imgEle
// <img src="111.jpg" name="dream">

// 向图片内设置默认属性
imgEle.setAttribute("title","一张图片");
// undefined
imgEle
// <img src="111.jpg" name="dream" title="一张图片">

// 向div标签下面塞入img标签
let divEle = document.getElementById("d1");
// undefined
divEle.appendChild(imgEle)
// undefined

案例2a标签

let aEle = document.createElement("a");
// undefined

aEle
// <a></a>

// 设置默认属性：链接地址
aEle.href = "https://www.mzitu.com/"
// 'https://www.mzitu.com/'

aEle
// <a href="https://www.mzitu.com/"></a>

// 设置文本内容
aEle.innerText = "点我有你好看"
// '点我有你好看'

aEle
// <a href="https://www.mzitu.com/">点我有你好看</a>

// 将a标签插入到指定位置
let divEle = document.getElementById("d1");
// undefined
let pEle = document.getElementById("p1")
// undefined
divEle.insertBefore(aEle,pEle)
// <a href="https://www.mzitu.com/">点我有你好看</a>

(6)innerText和innerHTML

1.innerText用于操作元素中的纯文本内容，不解析HTML标记，且是只读属性。
console.log(el.innerText)//文字内容
2.innerHTML用于操作元素中的HTML内容，可以包含HTML标记
	console.log(el.innerHTML)//获取到所有html代码

【八】获取值操作

1.获取属性值--》先用getElementById查找到元素，然后用getAttribute查找到属性值

2.获取文本内容---》先用getElementById查找到元素，使用innerText、innerHTML或textContent属性来获取一个元素的文本内容
    ● innerText：返回元素的纯文本内容，不包括HTML标记。
    ● innerHTML：返回元素的HTML内容，包括HTML标记。
    ● textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。
    
3.获取用户输入值--》先用getElementById查找到元素，使用input.value
● 对于表单元素（如input、select、textarea等）
● 可以通过获取其value属性来获取用户输入的值。

4.获取文件
	"""
	// 获取文件选择框的DOM元素
var fileInput = document.getElementById("fileInput");

// 添加change事件监听器，以便在用户选择文件后执行操作
fileInput.addEventListener("change", function() {
  // 获取选择的所有文件
  var files = fileInput.files;

  // 遍历文件列表，并处理每个文件
  for (var i = ; i < files.length; i++) {
    var file = files[i];
    console.log("文件名：" + file.name);
    console.log("文件类型：" + file.type);
    console.log("文件大小（字节）：" + file.size);
    console.log("最后修改时间：" + file.lastModified);
  }
});
	"""

【九】属性操作

1.class属性操作
	.classList() 是JavaScript中用于获取HTML元素的类名列表的方法
	var element = document.getElementById("myElement");
	var classList = element.classList;
	// （1） 查看当前类标签下的所有属性
console.log(el.classList)
//DOMTokenList ['big', value: 'big']

// 移除当前类标签下的某个属性
你要移除的节点.classList.remove("big")
// undefined

// 添加当前类标签下的某个属性
你要增加的节点.classList.add("big")
// undefined

// 校验当前标签下是否包含某个属性
你要判断的节点.classList.contains("big")
true
你要判断的节点.classList.contains("xxx")
false

// 当前标签下有这个属性则移除，没有这个属性则添加
divEle.classList.toggle("bg_red");
// false
divEle.classList.toggle("bg_red");
// true

2.标签样式
由于同一标签可能有多个所以是一个数组，所以要用索引
let pEle = document.getElementsByTagName("p")[0]
pEle.style.color = "red";

【十】事件

事件（Event）是指在程序执行期间发生的特定操作或状态变化
1.鼠标事件
	● click：鼠标点击事件。
    ● mouseover：鼠标悬停在元素上的事件。
    ● mouseout：鼠标离开元素的事件。
    ● mousedown：鼠标按下事件。
    ● mouseup：鼠标松开事件。
    ● mousemove：鼠标移动事件。
2.键盘事件
	● keydown：键盘按下事件。
    ● keyup：键盘松开事件。
    ● keypress：键盘按键被按下并松开事件。
3.表单事件
	● submit：表单提交事件。
    ● change：表单值改变事件。
    ● focus：表单元素获取焦点事件。
    ● blur：表单元素失去焦点事件。
4.文档加载事件
	● load：页面完全加载完成事件。
	● unload：页面关闭或离开事件。
5.定时器事件
	● setTimeout：在指定的延迟时间后触发事件。
	● setInterval：每隔一定时间触发事件。
6.自定义事件：
	● 开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【十一】绑定事件的两种方式

(1)传统的事件属性绑定

通过在HTML标签中直接添加事件属性来实现事件绑定。 
<button onclick="myFunction()">点击我</button>

<script>
  function myFunction() {
    alert("按钮被点击了！");
  }
</script>

(2)现代的事件监听绑定

通过JavaScript代码动态地选择元素，并以编程方式绑定事件监听器。 
<button id="myButton">点击我</button>

<script>
  var button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("按钮被点击了！");
  });
</script>

【十二】apply和call

(1)call

1.语法：
function 自己对象(自己的参数){
    要继承的对象.call(本函数, 你自己的参数, arg2, arg...);
}
在call哪里没写自己的参数的就继承父亲的

(2)apply

● 和call()的区别在于传递的参数不同
● call()传递的参数是一个个的参数
apply是一个数组
1.语法：
    Function.apply(obj,args)方法能接收两个参数：
    // obj：这个对象将代替Function类里this对象
    // args：这个是数组或类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数。