标签：浏览器 前端 元素 JavaScriptDOM BOM var document 节点 属性

一、JavaScript的组成

JavaScript的实现包括以下3个部分：

ECMAScript(核心)	描述了JS的语法和基本对象
文档对象模型 （DOM）	处理网页内容的方法和接口
浏览器对象模型（BOM）	与浏览器交互的方法和接口

1. 核心（Core）：

   • 核心部分包括语言的基本语法、数据类型、控制结构等。这些是构成 JavaScript 语言的基本要素，如变量、函数、条件语句、循环等。

2. 文档对象模型（DOM，Document Object Model）：

   • DOM 是用于访问和操作网页内容的 API。它将网页表示为一个由节点组成的树形结构，开发人员可以使用 JavaScript 来操作这些节点，实现对网页的动态修改和交互。

3. 浏览器对象模型（BOM，Browser Object Model）：

   • BOM 是用于与浏览器交互的 API 集合。它提供了访问和控制浏览器窗口、历史记录、定时器、对话框等功能，使开发人员能够实现更复杂的交互体验。

JavaScript 的这三个部分共同构成了完整的 JavaScript 环境，使开发人员能够编写交互性强、动态性高的网页应用程序。通过核心部分，开发人员可以处理数据和逻辑；通过 DOM，可以操作网页元素；通过 BOM，可以控制浏览器行为。这使得 JavaScript 成为一种强大的客户端脚本语言，被广泛应用于网页开发中。

了解：

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)

二、BOM

1、BOM介绍

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。

那浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要

location.href = "http://www.xxxx.com";

这个 location 就是 BOM 里的一个对象。

由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

2、BOM对象

• window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；

• document 对象，文档对象；

• location 对象，浏览器当前URL信息；

• navigator 对象，浏览器本身信息；

• screen 对象，客户端屏幕信息；

• history 对象，浏览器访问历史信息；

（1）Window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

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

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

// 弹框类的方法,前面省略window,不用写window
alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")

// 定时器相关
setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行
clearTimeout/clearInterval(定时器名称) 清除定时器

// 正常使用
window.close()    // 关闭当前页面
window.open("url地址"，“打开的方式（可以是_self或_blank）”，“新窗口的大小”）
window.innerHeight;     // 浏览器窗口的高度
window.innerWidth;      // 浏览器窗口的宽度
window.moveTo(x, y);    // 移动当前窗口
window.resizeTo(width, height);     // 调整当前窗口的尺寸

部分方法详细说明：

① window.open（）

window.open() 是 Window 对象提供的一个方法，用于在浏览器中打开一个新的窗口或标签页。这个方法可以接受四个参数，分别是要加载的 URL、窗口的名称、特性字符串和一个布尔值指示是否在新窗口中打开链接。

下面是 window.open() 方法的基本语法：

window.open(url, name, specs, replace);

• url：要在新窗口中加载的 URL。可以是一个绝对 URL，也可以是一个相对 URL。
• name：新窗口的名称。如果指定了相同名称的窗口，那么会在该窗口中加载新的内容。
• specs：一个包含各种特性设置的字符串，比如窗口的大小、位置等。这个参数是可选的。
• replace：一个布尔值，指示是否在新窗口中替换历史记录。如果设置为 true，则在新窗口中加载页面时会替换浏览器历史记录中的当前页面。

示例：

// 打开一个新窗口加载指定 URL
window.open('https://www.example.com', '_blank');

// 打开一个新窗口，指定大小和位置
window.open('https://www.example.com', 'newWindow', 'width=500,height=400,left=100,top=100');

// 打开一个新窗口并替换历史记录
window.open('https://www.example.com', 'newWindow', '', true);

需要注意的是，使用 window.open() 方法打开新窗口时，浏览器通常会阻止弹出窗口，除非是在用户交互（比如点击按钮）的情况下。因此，建议在用户操作触发的事件中使用 window.open() 方法，以避免被浏览器拦截。

② setTimeout（）

setTimeout() 是 JavaScript 中的一个函数，用于在指定的延迟时间后执行一次指定的函数或指定的代码。

基本语法如下：

setTimeout(function, delay, param1, param2, ...);

• function：要执行的函数或要执行的代码块。
• delay：延迟的时间，以毫秒为单位。
• param1, param2, ...：可选参数，传递给函数的参数（如果有的话）。

示例：

// 在延迟 2000 毫秒（即 2 秒）后执行一个函数
setTimeout(function() {
    console.log('这是一个延迟执行的函数。');
}, 2000);

在上面的示例中，setTimeout() 函数会在 2 秒后执行一个匿名函数，该函数会在控制台打印出一条消息。

需要注意的是，setTimeout() 方法并不是精确的定时器，它只能保证在指定的延迟时间后尽快执行指定的函数或代码块。如果在延迟时间到达前 JavaScript 线程被占用，那么函数执行可能会延迟。

如果需要重复执行一个函数，可以使用 setInterval() 方法，它和 setTimeout() 类似，但会在每个指定的时间间隔重复执行函数。

（2）location对象

location 对象用于获取或设置窗口的URL，并且提供了与URL相关的信息。

在浏览器的 JavaScript 环境中，location 对象是 Window 对象的一个属性，可以通过 window.location 或者直接使用 location 访问。

location对象包含了很多属性，其中一些常用的属性包括：

• location.href: 返回当前页面的完整 URL。
• location.href = url : 跳转到指定的url。
• location.reload: 刷新页面，浏览器左上方那个的小圆圈.
• location.protocol: 返回页面使用的协议（如 "http:" 或 "https:"）。
• location.host: 返回服务器名称和端口号。
• location.hostname: 返回服务器名称。
• location.port: 返回端口号，如URL中不包含端口号返回空字符串。
• location.pathname: 返回 URL 的路径部分。 /project/test.html
• location.search: 返回 URL 的查询部分（即问号后面的部分）。
• location.hash: 返回 URL 的片段标识符（即#号后面的部分）不包含散列，则返回空字符串。。

通过 location 对象，你可以读取当前页面的 URL 信息，也可以通过修改 location 对象的属性来改变当前页面的 URL，实现页面的重定向或刷新等操作。但需要注意的是，直接修改 location 对象可能会导致页面的跳转，因此在使用时需要谨慎操作。

（3）navigator对象

navigator 对象提供了关于浏览器的信息，可以用来检测浏览器的类型、版本、操作系统等信息。

在浏览器环境中，navigator 对象是 Window 对象的一个属性，可以通过 window.navigator 或者直接使用 navigator 访问。

navigator对象包含了很多属性，其中一些常用的属性包括：

• navigator.userAgent: 返回包含用户代理字符串的完整信息，可以用来识别浏览器和操作系统===浏览器设定的User-Agent字符串。
• navigator.platform: 返回浏览器所在的操作系统类型。
• navigator.language: 返回浏览器当前使用的语言。
• navigator.cookieEnabled: 返回浏览器是否启用了 cookie。
• navigator.onLine: 返回浏览器是否处于在线状态。
• navigator.appName: 返回浏览器名称；
• navigator.appVersion: 返回浏览器版本;
• userAgent是最常用的属性，用来表示当前是否是个浏览器。

通过 navigator 对象，你可以根据浏览器的信息来进行相应的操作，比如根据用户代理字符串来做浏览器兼容性处理，或者根据语言设置来展示不同的内容。

需要注意的是，由于用户代理字符串可以被修改，因此在使用 navigator.userAgent 时要谨慎处理，以确保信息的准确性。

（4）screen对象

screen 对象提供了关于用户屏幕的信息，可以用来获取屏幕的尺寸、颜色深度等相关信息。在浏览器环境中，screen 对象是 Window 对象的一个属性，可以通过 window.screen 或者直接使用 screen 访问。

screen 对象包含了一些常用的属性，其中一些包括：

• screen.width: 返回屏幕的宽度（以像素为单位）。
• screen.height: 返回屏幕的高度（以像素为单位）。
• screen.availWidth: 返回屏幕可用的宽度，即去除操作系统任务栏等占用的部分后的宽度。
• screen.availHeight: 返回屏幕可用的高度，即去除操作系统任务栏等占用的部分后的高度。
• screen.colorDepth: 返回屏幕的颜色深度，即每个像素的位数。
• screen.pixelDepth: 返回屏幕的像素深度，通常与 screen.colorDepth 相同。

通过 screen 对象，你可以根据用户的屏幕信息来进行相应的显示优化，比如根据屏幕尺寸调整页面布局，或者根据颜色深度选择合适的图片格式以提高性能。这些信息可以帮助你设计响应式的网页，以适应不同屏幕尺寸和设备。

（5）history对象

history 对象在浏览器的 JavaScript 环境中提供了访问浏览器历史记录的能力。通过 history 对象，你可以在浏览器的历史记录中向前或向后导航，以及获取当前浏览历史记录的状态信息。

history 对象包含了一些常用的方法和属性，其中一些包括：

• history.length: 返回浏览器历史记录中的页面数量。
• history.back(): 与用户点击浏览器的后退按钮效果相同，导航到浏览器历史记录中的前一个页面。
• history.forward(): 与用户点击浏览器的前进按钮效果相同，导航到浏览器历史记录中的下一个页面。
• history.go(i): 导航到浏览器历史记录中的指定页面，可以接受一个整数参数i，i>0向前进,i<0往后退。

通过 history 对象，你可以实现一些浏览器历史记录相关的功能，比如创建自定义的导航按钮，实现页面间的跳转，或者根据用户的操作记录实现特定的功能。请注意，由于安全原因，浏览器限制了对浏览历史记录的访问，使得在某些情况下，部分方法可能无法正常工作。

（6）计时器相关

既可以放在 body 内 又可以放在 head 内

毫秒为单位

• 计时器在网页开发中经常用于实现定时触发某些操作的功能。
• 根据需求，可以使用不同的方法来触发定时器。

① 过一段时间触发(setTimeout)：

• 如果需要在经过一定的时间后触发某个操作
  • 可以使用setTimeout函数来设置定时器。
• 示例代码：

setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

function foo() {
  // 在延迟后执行的操作
}

setTimeout(foo, 5000); // 延迟5秒后执行

• 上述代码将在5秒钟后执行指定的函数。可以根据实际需要调整延迟的时间。

② 每隔一段时间触发一次(setInterval)

• 如果需要每隔一定的时间重复触发某个操作
  • 可以使用setInterval函数来设置定时器。
• 示例代码：

setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

function bar() {
  // 每隔一段时间执行的操作
}

setInterval(bar, 2000); // 每2秒钟执行一次

• 上述代码将每隔2秒钟执行一次指定的函数。同样，可以根据实际需要调整时间间隔。

③ 清除定时器(clearTimeout/clearInterval)

clearTimeout：

• clearTimeout函数用于取消使用setTimeout函数设置的定时器。
  • 通过传递setTimeout函数返回的计时器标识符作为参数，可以停止相应的定时器。
  • 如果没有及时调用clearTimeout取消定时器，定时器会按照预定的时间触发，造成不必要的操作。
• 示例代码：

var timer = setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

// 如果需要取消定时器
clearTimeout(timer);

clearInterval

• clearInterval函数用于取消使用setInterval函数设置的定时器。
  • 通过传递setInterval函数返回的计时器标识符作为参数，可以停止相应的定时器。
  • 类似地，未及时调用clearInterval会导致定时器一直重复执行。
• 示例代码：

var timer = setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

// 如果需要取消定时器
clearInterval(timer);

注意，在调用clearTimeout或clearInterval函数时

需要将原先保存的计时器标识符作为参数传递给这两个函数，以确保取消正确的定时器。

案例

function func2() {
        alert("123")
    }

    function show() {
        let t = setInterval(func2, 3000); // 每隔3s触发一次

        function inner() {
            clearInterval(t) // 清除定时器
        }
        
        setTimeout(inner, 9000) // 9s后触发
    }

    show()

• 给定的代码是用JavaScript编写的，定义了两个函数：

  • func2 和 show。

• func2 函数简单地显示一个带有消息 "123" 的弹窗。

• show 函数稍微复杂一些。

  • 它首先定义一个变量 t，并将其赋值为 setInterval 函数的返回值。
  • setInterval 函数设置了一个每300毫秒（或3秒）调用一次 func2 函数的定时器。

• 接下来，show 函数定义了一个名为 inner 的内部函数。

  • 这个内部函数用于使用 clearInterval 函数清除之前定义的定时器。
  • clearInterval 函数停止了 func2 函数的重复调用。

• 最后，show 函数使用 setTimeout 函数计划在900毫秒（或9秒）之后执行 inner 函数。

  • 这意味着，在9秒后，inner 函数将被调用，并通过清除定时器来停止 func2 函数的重复执行。

• 总结一下，show 函数设置了一个定时器，每3秒调用一次 func2 函数，但在9秒后，该定时器被清除，阻止了 func2 函数的进一步执行。

④ 注意：

• 确保清除定时器

  • 如果不再需要定时器，应当及时清除，以避免资源浪费。

  • 可以使用clearTimeout或clearInterval函数来取消定时器。

• 考虑浏览器兼容性

  • 在使用定时器时，应注意不同浏览器对定时器的支持可能存在差异，可以使用各种前端框架或库提供的方法来处理兼容性问题。

• 注意定时器的性能影响

  • 频繁的定时器操作可能会对网页性能产生一定影响，特别是在移动设备上，所以应慎重使用大量的定时器。

三、DOM

1、DOM介绍

DOM（Document Object Model），也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。

这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如<div></div>这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。

DOM模型将整个文档（XML文档和HTML文档）看成一个树形结构，

在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。

每个载入浏览器的 HTML 文档都会成为 Document 对象，Document是探索DOM的入口，利用全局变量document可以访问Document对象。

ps： DOM 有什么用？

就是为了操作 HTML 中的元素，比如说我们要通过 JS 把这个网页的标题改了，直接这样就可以了：

document.title = 'how to make cakes';

这个 API 使得在网页被下载到浏览器之后改变网页的内容成为可能。

• DOM操作需要用关键字document起手

2、DOM操作

（1）查找标签

在 JavaScript 中，通过 DOM（文档对象模型）可以对网页上的元素进行访问和操作。查找标签是 DOM 操作中常见的任务之一，常用的方法可以分为三种：

• 直接查找
• 半间接查找
• 间接查找

① 直接查找

1. getElementById():
   • 通过元素的 id 属性来获取元素。每个页面中的元素 id 应该是唯一的。
   • 示例：document.getElementById('myElementId')

// 使用元素的唯一ID来获取元素
HTML: 
	<div id="myDiv">Hello World</div>
var divEle = document.getElementById('myDiv');

2. getElementsByClassName():

   • 通过元素的类名来获取元素。返回一个包含所有指定类名的元素列表。

   • 示例：document.getElementsByClassName('myClassName')

// 通过类名获取元素
HTML: 
	<p class="myClass">Paragraph 1</p>
	<p class="myClass">Paragraph 2</p>
var pEle = document.getElementsByClassName('myClass');

3. getElementsByTagName():

   • 通过元素的标签名来获取元素。返回一个包含所有指定标签名的元素列表。

   • 示例：document.getElementsByTagName('div')

// 通过标签名获取元素
HTML:
	<ul>
    	<li>Item 1</li>
		<li>Item 2</li>
	</ul>
var liEle = document.getElementsByTagName('li');

当我们在用变量名指代标签对象时，一般都建议写成

xxxEle

​ divEle

​ aEle

​ pEle

• 这些方法可以根据不同的需求和条件进行标签查找。

  • 使用getElementById适合于查找单个具有唯一ID的元素

  • getElementsByTagName和getElementsByClassName适合于查找多个相同标签名称或类名的元素。

需要注意的是，以上方法返回的是一个HTML元素或HTML元素列表（NodeList）

② 半间接查找

1. querySelector():

• 使用 CSS 选择器来查找匹配的第一个元素。
• 示例：document.querySelector('#myElementId .myClassName')

// 使用 CSS 选择器查找匹配的第一个元素
HTML: 
	<div id="container">
    	<p class="text">Some text</p>
	</div>
var element = document.querySelector('#container .text');

2. querySelectorAll():

• 使用 CSS 选择器来查找匹配的所有元素，返回一个 NodeList 对象。
• 示例：document.querySelectorAll('.myClassName')

// 使用 CSS 选择器查找匹配的所有元素
HTML:
	<ul>
    	<li>Item 1</li>
		<li>Item 2</li>
	</ul>
var listItems = document.querySelectorAll('ul li');

选择器可以是标签名称、类名、ID、属性等，更复杂的选择器甚至可以选择嵌套结构。

通过选择器查询，您可以更灵活地查找和操作HTML元素。

③ 间接查找

1. parentNode:
   • 通过父节点来查找子节点。
   • 示例：myElement.parentNode

// 通过父节点查找子节点
HTML: 
	<div id="parent">
    	<p>Child element</p>
	</div>
var parentElement = document.getElementById('parent');
var childElement = parentElement.children[0];

2. children:

   • 获取元素的所有子元素。

   • 示例：myElement.children

// 获取所有子元素
HTML: 
	<ul>
        <li>Item 1</li>
		<li>Item 2</li>
	</ul>
var list = document.getElementsByTagName('ul')[0];
var childElements = list.children;

3. nextSibling 和 previousSibling:

   • 获取相邻的下一个兄弟节点和上一个兄弟节点。

   • 示例：myElement.nextSibling 和 myElement.previousSibling

// 获取相邻的下一个兄弟节点和上一个兄弟节点
HTML: 
	<ul>
    	<li>Item 1</li>
		<li>Item 2</li>
	</ul>
var firstItem = document.getElementsByTagName('li')[0];
var nextItem = firstItem.nextSibling;
var prevItem = nextItem.previousSibling;

4. firstElementChild:
   • firstElementChild属性指向指定元素的第一个子元素。
   • 它类似于children属性，但它只返回第一个子元素，忽略在它之前存在的任何非元素节点。
   • 例如，element.firstElementChild将返回指定元素的第一个子元素。

// 取第一个子标签
divEle.firstElementChild
// <div>​ 第一个div 内的 第一个 div [div>div]​</div>​

5. lastElementChild:

   • 类似于firstElementChild，lastElementChild属性指向指定元素的最后一个子元素。

   • 它仅包括最后一个元素作为其子节点，忽略在它之后的任何非元素节点。

   • 例如，element.lastElementChild将返回指定元素的最后一个子元素。

// 取最后一个子标签
divEle.lastElementChild
// <p>​ 第一个div 内的 第二个 p [div>p] ​</p>​

这些方法和属性可以帮助你在 DOM 中查找特定的元素，从而进行进一步的操作和处理。在实际开发中，根据具体的需求和场景选择合适的方法来查找和操作元素是非常重要的。

（2）节点操作

在DOM操作中，节点操作是非常常见和重要的部分。DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。

类型	描述
元素节点（Element）	上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点（Text）	向用户展示的内容，如<li>...</li>中的 JavaScript、DOM、CSS等文本。
属性节点（Attr）	元素属性，元素才有属性,如<a>标签的链接属性href="http://www.baidu.com"。

以下是一些常用的节点操作以及相应的代码解释：

1. 创建新节点：
   • 通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。

// 创建一个新的 <div> 元素
var newDiv = document.createElement('div');
// 创建一个新的文本节点
var newText = document.createTextNode("New Text Created!");

2. 插入节点：

   • 两个重要的方法：appendChild() 和 insertBefore()，具体见Node接口中的方法。

   • 扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode) 和 x.appendChild(newNode) 都可以向 x 后追加一个新的子节点。

// 将新创建的 <div> 元素插入到 id 为 "container" 的元素中
var container = document.getElementById('container');
container.appendChild(newDiv);

// 获取要操作的元素
var myDiv = document.getElementById("myDiv");
// 创建一个新的段落元素
var newParagraph = document.createElement("p");
newParagraph.textContent = "New Paragraph Inserted!";
// 获取参考节点（第一个段落）
var referenceNode = myDiv.getElementsByTagName("p")[0];
// 在参考节点前插入新段落
myDiv.insertBefore(newParagraph, referenceNode);

3. 删除节点：
   • 删除元素节点: 使用 parentNode.removeChild() 删除一个子节点。
   • 删除属性节点：可通过属性节点所属的元素节点的removeAttribute(attrName)或removeAttributeNode(node)删除。
   • 清空文本节点：最简单也是最常用的方法就是直接设置文本节点的nameNode属性为空串：textNode.nodeValue = ””。

// 删除 id 为 "myDiv" 的元素
var elementToRemove = document.getElementById('myDiv');
elementToRemove.parentNode.removeChild(elementToRemove);

 var myDiv = document.getElementById("myDiv");
// 移除 class 属性
myDiv.removeAttribute("class");

// 创建一个新的属性节点
var customAttr = document.createAttribute("data-custom");
customAttr.value = "example";
// 移除自定义属性节点
myDiv.removeAttributeNode(customAttr);

4. 替换节点：
   • 使用 parentNode.replaceChild() 替换一个子节点。

// 替换 id 为 "oldDiv" 的元素为新创建的 <div> 元素
var oldDiv = document.getElementById('oldDiv');
oldDiv.parentNode.replaceChild(newDiv, oldDiv);

5. 复制节点：
   • 使用 node.cloneNode() 复制一个节点。

// 复制 id 为 "myDiv" 的元素
var originalElement = document.getElementById('myDiv');
var clonedElement = originalElement.cloneNode(true); // 参数为 true 表示深度复制

6. 设置/获取节点的属性：

   • 使用 element.setAttribute() 设置节点的属性，

   • 使用 element.getAttribute() 获取节点的属性。

// 设置 id 为 "myElement" 的元素的 class 属性为 "newClass"
var element = document.getElementById('myElement');
element.setAttribute('class', 'newClass');

// 获取 id 为 "myElement" 的元素的 class 属性值
var elementClass = element.getAttribute('class');

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

7. 修改节点内容（文本操作）：

   • 使用 element.innerHTML 修改节点的 HTML 内容，

   • 使用 element.textContent 修改节点的文本内容。

// 修改 id 为 "myElement" 的元素的 HTML 内容
var element = document.getElementById('myElement');
element.innerHTML = '<p>New content</p>';

// 修改 id 为 "myElement" 的元素的文本内容
element.textContent = 'New text content';

这些节点操作方法可以帮助您在JavaScript中对DOM进行更灵活的操作，从而实现动态的页面交互和内容更新。

案例使用：

• 通过DOM操作动态的创建img标签
• 并且给标签加属性
• 最后将标签添加到文本中

这个操作只是作用域当前页面，并没有对原始文件生效

刷新后就会消失相关的效果

let imgEle = document.createElement('img')  #创建标签
imgEle.src = '1.png'  # 给标签设置默认的属性
// '1.png'
imgEle.username = 'xiao'  # 自定义的属性没办法点的方式直接设置
// 'xiao'
imgEle.setAttribute('username','xiao') # 既可以设置自定义的属性也可以设置默认的书写
imgEle
// <img src=​"1.png" username=​"xiao">​
imgEle.setAttribute('title','一张图片')
imgEle
// <img src=​"1.png" username=​"xiao" title=​"一张图片">​
let divEle = document.getElementById('d1')
divEle.appendChild(imgEle)  # 标签内部添加元素(尾部添加)
// <img src=​"1.png" username=​"xiao" title=​"一张图片">​

• 创建a标签
• 设置属性，设置文本
• 添加到标签内部并添加到指定的标签上面

let aEle = document.createElement('a')
aEle
// <a>​</a>​
aEle.href = 'https://www.baidu.com/'
// 'https://www.baidu.com/'
aEle
// <a href=​"https:​/​/​www.baidu.com/​">​</a>​
aEle.innerText = '大爷快来玩啊'  # 给标签设置文本内容
// '大爷快来玩啊'
aEle
// <a href=​"https:​/​/​www.baidu.com/​">​大爷快来玩啊​</a>​
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加
// <a href=​"https:​/​/​www.baidu.com/​">​大爷快来玩啊​</a>​

（3）补充：innerText/innerHTML

// 只拿标签内的文本 -- 不识别 html标签
divEle.innerText
// 'div 点我有你好看\n\ndiv > p\n\ndiv > span'

// 拿标签内的全部内容和标签 -- 识别 html标签
divEle.innerHTML
/* ' div\n    <a href="https://www.mzitu.com/">点我有你好看</a><p id="p1"> div &gt; p</p>\n    <span> div &gt; span </span>\n' */ 

innerText和innerHTML是用于在网页中更新文本内容的两种方法。

它们都可以用于修改HTML元素中的文本，但有一些关键的区别。

① innerText

• innerText属性用于设置或返回指定元素中的文本内容，不包括HTML标记。

• 当使用innerText属性时，所有HTML标记都将被视为纯文本并被直接显示在页面上。

• 这意味着如果在innerText中包含HTML标记，那么标记将被作为普通文本显示而不会被解析。

• 此外，innerText属性是只读的，即使尝试修改该属性的值也不会有任何效果。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerText); // 输出："This is bold text."
   element.innerText = "Updated text"; // 尝试修改innerText但不会生效
</script>

② innerHTML

• innerHTML属性用于设置或返回指定元素的HTML内容，可以包含HTML标记和文本。
• 与innerText不同，使用innerHTML属性时，所有HTML标记都会被解析并在页面上正确渲染。
  • 这意味着可以通过innerHTML属性来添加、修改或删除HTML元素及其属性。
• 需要注意的是，innerHTML属性可以导致代码注入攻击，因此使用时需谨慎验证并过滤用户输入。

使用示例：

<div id="myElement">This is <strong>bold</strong> text.</div>
<script>
   var element = document.getElementById("myElement");
   console.log(element.innerHTML); // 输出："This is <strong>bold</strong> text."
   element.innerHTML = "Updated <em>text</em>"; // 修改innerHTML会动态更新页面中的内容
</script>

③ 总结

• innerText用于操作元素中的纯文本内容，不解析HTML标记，且是只读属性。
• innerHTML用于操作元素中的HTML内容，可以包含HTML标记

（4）获取值操作

① 获取属性值

• 可以使用getAttribute()方法来获取HTML元素的属性值。
• 该方法需要传入属性名作为参数，并返回属性对应的值。

<div id="myDiv" class="myClass" data-custom="example">Hello, World!</div>
<button onclick="getAttributeValue()">Get Attribute Value</button>

<script>
function getAttributeValue() {
    var divElement = document.getElementById("myDiv");
    
    var classValue = divElement.getAttribute("class");
    console.log("Class Attribute Value: " + classValue);
    
    var customValue = divElement.getAttribute("data-custom");
    console.log("Custom Attribute Value: " + customValue);
}
</script>

在这个示例中，我们有一个 <div> 元素，具有 class 属性和自定义属性 data-custom。点击按钮时，getAttributeValue() 函数会获取这个元素的 class 和 data-custom 属性值，并将它们打印到控制台。

② 获取元素的文本内容

• 可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。

• 这些属性会返回元素内包含的文本，但存在一些差异：

• innerText：返回元素的纯文本内容，不包括HTML标记。

• innerHTML：返回元素的HTML内容，包括HTML标记。

• textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

<div id="myDiv">Hello, World!</div>
<button onclick="getTextContent()">Get Text Content</button>

<script>
function getTextContent() {
    var divElement = document.getElementById("myDiv");
    var textContent = divElement.textContent;
    console.log("Text Content: " + textContent);
}
</script>

在这个示例中，我们有一个 <div> 元素包含文本内容 "Hello, World!"。点击按钮时，getTextContent() 函数会获取这个 <div> 元素的文本内容，并将其打印到控制台。

③ 获取表单元素的值

• 对于表单元素（如input、select、textarea等）
• 可以通过获取其value属性来获取用户输入的值。

<form id="myForm">
    <input type="text" id="myInput" value="Hello, World!">
    <button onclick="getValue()">Get Value</button>
</form>

<script>
function getValue() {
    var inputElement = document.getElementById("myInput");
    var value = inputElement.value;
    console.log("Input Value: " + value);
}
</script>

在这个示例中，我们有一个包含一个文本输入框和一个按钮的表单。当点击按钮时，getValue() 函数会获取文本输入框的值，并将其打印到控制台。

④ 获取文件

• 当用户选择一个或多个文件后
  • 可以通过访问.files属性来获取这些文件的信息。
• .files属性返回一个FileList对象
  • 其中包含了所选文件的列表。
  • 可以通过遍历该列表来处理每个文件。
• 以下是一个简单的示例，演示如何使用.files属性获取用户选择的文件：

// 获取文件选择框的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);
  }
});

• 在以上示例中，我们首先获取具有id="fileInput"的文件选择框的DOM元素，并为其添加了一个change事件监听器。
  • 当用户选择文件后，change事件将被触发。
• 在事件处理程序中，我们使用.files属性获取选择的文件列表，并遍历该列表。
  • 对于每个文件，我们输出了一些基本信息，如文件名、文件类型、文件大小和最后修改时间。

需要注意的是，.files属性在非IE浏览器中提供了广泛的支持

但在IE浏览器中需要使用.value属性来获取文件路径并进行相关处理。

（5） class属性操作

在JavaScript中，您可以使用DOM操作来管理元素的class属性，这些方法既适用于类名，也适用于类属性。

let divEle = document.getElementById('d1')
divEle.classList  // 获取标签所有的类属性

以下是一些常见的方法和示例代码：

① 添加类名（classList.add()）:

您可以使用classList.add()方法向元素添加一个类名。

// 获取元素
var element = document.getElementById('myElement');

// 添加类名
element.classList.add('newClass');

② 移除类名（classList.remove()）:

您可以使用classList.remove()方法从元素中移除一个类名。

// 获取元素
var element = document.getElementById('myElement');

// 移除类名
element.classList.remove('oldClass');

③ 切换类名（classList.toggle()）:

您可以使用classList.toggle()方法来切换一个类名的存在状态。如果类名存在，则移除它；如果不存在，则添加它。

// 获取元素
var element = document.getElementById('myElement');

// 切换类名
element.classList.toggle('active');

④ 检查是否包含某个类名（classList.contains()）:

您可以使用classList.contains()方法检查一个元素是否包含特定的类名。

// 获取元素
var element = document.getElementById('myElement');

// 检查是否包含类名
if (element.classList.contains('myClass')) {
    // 包含类名的操作
}

⑤ 替换类名（classList.replace()）:

您可以使用classList.replace()方法替换元素的一个类名。

// 获取元素
var element = document.getElementById('myElement');

// 替换类名
element.classList.replace('oldClass', 'newClass');

这些方法可以帮助您在JavaScript中操作DOM元素的类名，从而实现动态样式变化和交互效果。

（6）标签样式

在JavaScript中，您可以通过DOM操作来改变元素的样式。

DOM操作操作标签样式，统一先用style起手，没有下划线，全由驼峰体替代。

以下是一些常见的方法和示例代码：

① 直接修改样式属性（直接设置元素的样式属性）:

您可以直接访问元素的style属性，并设置其中的样式属性。

// 获取元素
var element = document.getElementById('myElement');

// 修改样式属性
element.style.color = 'red';
element.style.fontSize = '20px';

② 使用类名（通过添加/移除类名来改变样式）:

您可以通过添加或移除类名，间接改变元素的样式。

// 获取元素
var element = document.getElementById('myElement');

// 添加类名
element.classList.add('newStyle');

// 移除类名
element.classList.remove('oldStyle');

③ 使用CSS类库（例如jQuery）:

如果您使用jQuery等类库，可以更方便地操作元素的样式。

// 使用jQuery来改变样式
$('#myElement').css('color', 'blue');

④ 动态计算样式（计算样式值并应用）:

您可以通过计算样式值来动态改变元素的样式。

// 获取元素
var element = document.getElementById('myElement');

// 计算样式值
var newWidth = 100; // 例如，计算得到的新宽度

// 应用新样式
element.style.width = newWidth + 'px';

这些方法可以帮助您在JavaScript中操作DOM元素的样式，实现动态样式变化和交互效果。根据您的需求和项目的复杂度，选择最适合的方法来操作元素的样式。

（7）事件

在JavaScript中，DOM（文档对象模型）提供了许多不同类型的事件，可以用于与用户交互、操作文档内容和响应浏览器状态的变化。

事件就是到达某个实现设定的条件，自动触发的动作。

以下是一些常见的DOM事件类型及其详细介绍：

① 鼠标事件

1. click：当用户单击元素时触发。
2. mouseover：当鼠标移动到元素上方时触发。
3. mouseout：当鼠标移出元素时触发。
4. mousedown：当鼠标按下时触发。
5. mouseup：当鼠标释放时触发。
6. mousemove：当鼠标在元素上移动时触发。

② 键盘事件

1. keydown：当用户按下键盘上的任意键时触发。
2. keyup：当用户释放键盘上的键时触发。
3. keypress：当用户按下键盘上的字符键时触发。

③ 表单事件

1. submit：当表单提交时触发。
2. change：当表单元素的值发生改变时触发。
3. input：当输入框的值发生改变时触发。
4. focus：当元素获得焦点时触发。
5. blur：当元素失去焦点时触发。

④ 文档加载事件

1. DOMContentLoaded：当初始 HTML 文档被完全加载和解析完成时触发，不包括样式表、图片和子框架的加载。
2. load：当整个页面（包括样式表、图片等）被完全加载时触发。

⑤ 定时器事件

• setTimeout：在指定的延迟时间后触发事件。
• setInterval：每隔一定时间触发事件。

⑥ 自定义事件：

• 开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

⑦ 其他常见事件

1. resize：当窗口或框架被调整大小时触发。
2. scroll：当元素的滚动条被滚动时触发。
3. error：当文档或元素发生错误时触发。

⑧示例代码

var button = document.getElementById("myButton");

button.addEventListener("click", function(event) {
  alert("按钮被点击了！");
});

• 以上示例代码中，当id为"myButton"的按钮被点击时，会触发点击事件，并弹出一个提示框。

这些是常见的DOM事件类型，您可以通过添加事件处理程序来捕获这些事件，并对其做出相应处理。在开发网页应用程序时，了解和使用这些事件将有助于实现更好的用户交互和体验。

（8）如何添加事件处理程序

您可以通过以下几种方式向元素添加事件处理程序：

1. HTML属性：直接在HTML元素上使用事件属性。例如：<button onclick="myFunction()">Click me</button>

2. DOM属性：通过JavaScript代码直接将事件处理程序添加到元素的事件属性上。例如：

   var element = document.getElementById('myElement');
   element.onclick = function() {
       // 处理点击事件的代码
   };
   

3. addEventListener方法：使用addEventListener方法向元素添加事件处理程序。这种方式可以添加多个事件处理程序。例如：

   element.addEventListener('click', function() {
       // 处理点击事件的代码
   });
   

补充：事件对象

当事件发生时，会创建一个事件对象，其中包含有关事件的信息。您可以访问事件对象的属性和方法来获取更多信息，例如事件类型、目标元素等。

element.addEventListener('click', function(event) {
    console.log('事件类型：', event.type);
    console.log('目标元素：', event.target);
});

补充：阻止事件默认行为和事件传播

在事件处理程序中，

• 可以使用event.preventDefault()来阻止事件的默认行为，

• 以及event.stopPropagation()来停止事件传播。

element.addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为
    event.stopPropagation(); // 停止事件传播
});

通过了解DOM事件以及如何添加事件处理程序，您可以更好地实现交互式的网页应用程序，并对用户的操作做出响应。

了解：事件监听器

以下是一个简单的 JavaScript DOM 事件处理的代码示例，演示了如何使用事件监听器来响应用户的点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 事件示例</title>
</head>
<body>
<button id="myButton">点击我</button>

<script>
// 获取按钮元素
const button = document.getElementById('myButton');

// 添加点击事件监听器
button.addEventListener('click', function(event) {
    alert('按钮被点击了！');
    console.log(event); // 打印事件对象到控制台
});
</script>
</body>
</html>

在这个示例中，页面上有一个按钮元素，当用户点击按钮时，会触发一个点击事件。通过使用addEventListener方法，我们为按钮元素添加了一个点击事件监听器。当按钮被点击时，会弹出一个警告框显示"按钮被点击了！"，同时在控制台打印出事件对象event，以便开发者查看事件的相关信息。

您可以根据需要修改和扩展这个示例，以实现不同类型的交互和功能。通过使用事件处理程序，您可以在网页中实现各种用户交互，例如表单验证、动态内容更新、动画效果等。

思考题：

首先我们知道script标签既可以放在head内，也可以放在body内，但是通常情况下都是放在body内的最底部，因为代码是从上往下加载的，需要先等待标签结束再执行绑定事件的。

然后我如果非要放在head标签内可以怎么办：

// 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
	 // 第一种绑定事件的方式
    function func1(){
        alert(111)
    }
    // 第二种绑定事件的方式
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
}

四、BOM和DOM总结

DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。

归DOM管的：

• E区（就是document了）由web开发人员呕心沥血写出来的一个文件夹，里面有index.html，CSS 和 JS 等等的，部署在服务器上，我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地，浏览，右键查看源代码等。

归BOM管的：

• A区（浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等）

• B区（浏览器的右键菜单）

• C区（document加载时的状态栏，显示http状态码等）

• D区（滚动条scroll bar）

标签：浏览器,前端,元素,JavaScriptDOM,BOM,var,document,节点,属性
From： https://www.cnblogs.com/xiao01/p/18088380