BOM与DOM在现代开发的应用

// 1. 通过 var 声明的全局变量，会被添加到全局对象 window 上
var myVar = "Hello World";
console.log(window.myVar); // 输出：Hello World

// 2. 通过 window 可以访问全局对象默认提供的函数和类
// setTimeout 是 window 对象上全局可用的方法
window.setTimeout(() => {
  console.log("This message is delayed by 1 second");
}, 1000);

// 3. Math 是 window 对象上默认提供的全局类
console.log(window.Math.sqrt(16)); // 输出：4

// 4. Date 是 window 对象上默认提供的全局类
const currentDate = new window.Date();
console.log(currentDate); // 输出：当前日期和时间

// 5. Object 是全局对象提供的全局类，可以直接使用
const person = new window.Object({ name: "coderwhy", age: 25 });
console.log(person.name); // 输出：coderwhy

//来自window的console属性
window.console.log('Hello World!');
console.log('Hello World!');

//Window继承自EventTarget
class Window extends EventTarget{...}
//window实例对象继承自Window类
const window = new Window()

// 常见的 window 对象属性

// 1. window.location - 当前页面的 URL 信息
console.log(window.location.href); // 当前页面的完整 URL

// 2. window.document - 当前页面的文档对象
console.log(window.document.title); // 当前页面的标题

// 3. window.navigator - 浏览器的用户代理信息
console.log(window.navigator.userAgent); // 浏览器的用户代理字符串

// 4. window.innerWidth - 浏览器窗口的视口宽度
console.log(window.innerWidth); // 当前视口的宽度

// 5. window.innerHeight - 浏览器窗口的视口高度
console.log(window.innerHeight); // 当前视口的高度

// 6. window.history - 浏览器历史记录对象
console.log(window.history.length); // 当前会话中的历史记录条数

// 7. window.screen - 用户屏幕的信息
console.log(window.screen.width); // 用户屏幕的宽度
console.log(window.screen.height); // 用户屏幕的高度

// 8. window.localStorage - 本地存储对象
window.localStorage.setItem("username", "Alice"); // 本地存储数据
console.log(window.localStorage.getItem("username")); // 获取本地存储的数据

// 9. window.sessionStorage - 会话存储对象
window.sessionStorage.setItem("sessionId", "12345"); // 会话存储数据
console.log(window.sessionStorage.getItem("sessionId")); // 获取会话存储的数据

// 10. window.console - 控制台对象，用于调试
console.log("This is a log message"); // 输出日志信息到控制台

// 11. window.name - 当前窗口的名称
window.name = "myWindow";
console.log(window.name); // 输出窗口的名称

// 12. window.parent - 获取父窗口的引用（如果存在嵌套框架）
console.log(window.parent === window); // 在顶层窗口中，window.parent 等于 window 本身

// 13. window.top - 获取最顶层窗口的引用
console.log(window.top === window); // 在顶层窗口中，window.top 等于 window 本身

// 14. window.frames - 包含当前窗口中所有框架的集合
console.log(window.frames.length); // 当前窗口中的框架数量

// 15. window.screenX / window.screenY - 当前窗口相对于屏幕的 X 和 Y 坐标
console.log(window.screenX); // 输出窗口的 X 坐标
console.log(window.screenY); // 输出窗口的 Y 坐标

// 常见的 window 对象方法

// 1. window.alert() - 弹出一个警告对话框
window.alert("Hello, World!"); // 显示一个提示框

// 2. window.confirm() - 弹出一个确认对话框
const result = window.confirm("Are you sure?"); // 返回 true 或 false，用户点击 "确认" 或 "取消"

// 3. window.prompt() - 弹出一个输入对话框
const userInput = window.prompt("Enter your name:"); // 返回用户输入的字符串

// 4. window.open() - 打开一个新窗口或新标签页
window.open("https://www.juejin.cn"); // 打开指定 URL 的新页面

// 5. window.close() - 关闭当前窗口
window.close(); // 关闭当前窗口（需要由脚本打开的窗口才有效）

// 6. window.setTimeout() - 设置一个定时器，在指定的时间后执行代码
window.setTimeout(() => {
  console.log("This message is delayed by 2 seconds");
}, 2000); // 延迟 2 秒后输出信息

// 7. window.setInterval() - 设置一个定时器，每隔一定时间重复执行代码
const intervalId = window.setInterval(() => {
  console.log("This message repeats every 1 second");
}, 1000); // 每隔 1 秒输出信息

// 8. window.clearInterval() - 清除通过 setInterval 创建的定时器
window.clearInterval(intervalId); // 停止上面创建的定时器

// 9. window.addEventListener() - 为窗口添加事件监听器
window.addEventListener("resize", () => {
  console.log("Window resized!");
}); // 监听窗口大小变化事件

// 10. window.removeEventListener() - 移除事件监听器
const resizeHandler = () => console.log("Window resized!");
window.addEventListener("resize", resizeHandler);
window.removeEventListener("resize", resizeHandler); // 移除窗口大小变化的监听器

// 11. window.scrollTo() - 滚动到指定位置
window.scrollTo(0, 100); // 滚动到页面的顶部 100 像素处

// 12. window.focus() - 使当前窗口获得焦点
window.focus(); // 使窗口获得焦点

// 13. window.print() - 打印当前页面
window.print(); // 打开打印对话框，用于打印当前页面内容

// 常见的 window 对象事件

// 1. load - 页面加载完成事件
window.addEventListener("load", () => {
  console.log("页面加载完成");
});

// 2. unload - 页面卸载事件
window.addEventListener("unload", () => {
  console.log("页面即将卸载");
});

// 3. resize - 窗口大小改变事件
window.addEventListener("resize", () => {
  console.log("窗口大小改变了");
});

// 4. scroll - 窗口滚动事件
window.addEventListener("scroll", () => {
  console.log("页面滚动了");
});

// 5. beforeunload - 页面即将被关闭或刷新前的事件
window.addEventListener("beforeunload", (event) => {
  event.preventDefault(); // 防止页面关闭或刷新
  event.returnValue = ""; // 显示提示信息
});

// 6. focus - 窗口获得焦点事件
window.addEventListener("focus", () => {
  console.log("窗口获得了焦点");
});

// 7. blur - 窗口失去焦点事件
window.addEventListener("blur", () => {
  console.log("窗口失去了焦点");
});

// 8. error - JavaScript 运行错误事件
window.addEventListener("error", (event) => {
  console.error("发生错误：", event.message);
});

// 9. online - 网络连接恢复事件
window.addEventListener("online", () => {
  console.log("网络连接恢复");
});

// 10. offline - 网络连接断开事件
window.addEventListener("offline", () => {
  console.log("网络连接断开");
});

// 假设当前页面 URL 为：https://juejin.cn/user/251124329220663

// 1. href - 完整的 URL
console.log(window.location.href); 
// 输出: "https://juejin.cn/user/251124329220663"

// 2. protocol - URL 的协议
console.log(window.location.protocol); 
// 输出: "https:"

// 3. host - 主机名和端口号（没有指定端口时只有主机名）
console.log(window.location.host); 
// 输出: "juejin.cn"

// 4. hostname - 仅主机名，不包含端口号
console.log(window.location.hostname); 
// 输出: "juejin.cn"

// 5. port - 端口号（如果有的话），如果没有设置则输出空字符串
console.log(window.location.port); 
// 输出: ""

// 6. pathname - URL 的路径部分
console.log(window.location.pathname); 
// 输出: "/user/251124329220663"

// 7. search - 查询字符串（以 `?` 开头），如果没有查询参数则输出空字符串
console.log(window.location.search); 
// 输出: ""

// 8. hash - URL 中的哈希部分（以 `#` 开头），如果没有哈希则输出空字符串
console.log(window.location.hash); 
// 输出: ""

// 常见的 window.location 对象方法

// 1. location.assign() - 导航到新的 URL，并保存当前页面到历史记录
window.location.assign("https://www.juejin.cn");
// 跳转到指定 URL，并在浏览器历史中记录（可以通过 "后退" 按钮返回）

// 2. location.replace() - 导航到新的 URL，但不保存当前页面
window.location.replace("https://www.baidu.com");
// 跳转到指定 URL，不保留当前页面（无法通过 "后退" 按钮返回）

// 3. location.reload() - 重新加载当前页面
window.location.reload();
// 重新加载当前页面，类似于刷新浏览器

// 1. history.length - 获取会话历史中的记录条数
console.log(window.history.length); 
// 输出当前浏览器会话的历史记录条数，例如 5

// 2. history.state - 获取当前保留的状态值
console.log(window.history.state); 
// 输出当前状态对象的值，初始值通常为 null

// 3. history.back() - 返回上一页，等价于 history.go(-1)
window.history.back();
// 返回到上一页，等价于点击浏览器的 "后退" 按钮

// 4. history.forward() - 前进到下一页，等价于 history.go(1)
window.history.forward();
// 前进到下一页，等价于点击浏览器的 "前进" 按钮

// 5. history.go() - 加载历史中的某一页，参数是相对于当前页的偏移量
window.history.go(-2);
// 加载历史记录中的某一页，例如 -2 表示向前两页，正数表示向后

// 6. history.pushState() - 添加新的历史记录条目
window.history.pushState({ page: 1 }, "Title 1", "/page1");
// 添加一条新的历史记录条目，并改变 URL 为 "/page1"，状态对象为 { page: 1 }

// 7. history.replaceState() - 替换当前历史记录条目
window.history.replaceState({ page: 2 }, "Title 2", "/page2");
// 替换当前历史记录条目，改变 URL 为 "/page2"，状态对象为 { page: 2 }

// 创建一个简单的 HTML 结构
const divElement = document.createElement("div");
divElement.id = "box";
divElement.innerHTML = `
  <span class="content">Hello World!</span>
  <p>Paragraph content.</p>
`;
document.body.appendChild(divElement);

// 获取 div 节点
const node = document.querySelector("#box");

// 1. 使用 nodeName 获取节点的名称
console.log(node.nodeName); // 输出: "DIV" (元素节点返回标签名称，大写)

// 2. 使用 nodeType 获取节点的类型
console.log(node.nodeType); // 输出: 1 (元素节点)

// 3. 使用 nodeValue 获取节点的值
// 对于元素节点，nodeValue 通常为 null
console.log(node.nodeValue); // 输出: null

// 对于文本节点，nodeValue 返回文本内容
const textNode = document.createTextNode("This is a text node.");
console.log(textNode.nodeValue); // 输出: "This is a text node."

// 4. 使用 childNodes 获取所有子节点
// childNodes 返回当前节点的所有直接子节点（包括文本节点和元素节点）
const children = node.childNodes;
children.forEach((child) => {
  console.log(child.nodeName); // 可能输出: "#text" (文本节点), "SPAN", "P"
  console.log(child.nodeType); // 输出: 3 (文本节点) 或 1 (元素节点)
});

<!-- HTML 文档的开始 -->
<!DOCTYPE html> <!-- 文档类型声明节点 -->

<html>
  <head>
    <title>Node Types Example</title>
  </head>
  <body>
    <!-- 元素节点（Element Node） -->
    <div id="container">
      
      <!-- 属性节点（Attribute Node） -->
      <!-- 这个 `id="container"` 就是一个属性节点，指定了元素的属性信息 -->

      <!-- 文本节点（Text Node） -->
      <p>Hello, World!</p>
      <!-- `Hello, World!` 就是一个文本节点，表示元素中的文本内容 -->
      
      <!-- 注释节点（Comment Node） -->
      <!-- This is a comment -->
      <!-- 这个就是一个注释节点，提供对代码的描述或注释 -->

      <!-- 文本节点与元素节点的结合 -->
      <span>This is a <strong>bold</strong> text.</span>
      <!-- `This is a` 是一个文本节点 -->
      <!-- `<strong>bold</strong>` 是一个元素节点 -->

    </div>
  </body>
</html>

//使用addEventListener监听整个页面的点击操作，一点击则触发回调函数
document.addEventListener("click", () => {
  console.log("document被点击")
})

//ID选择器box(单选)和类选择器content(多选)
//来自：<div id="box"></div>
const divEl = document.querySelector("#box")
//来自：<span class="content"></span>
const spanEl = document.querySelector(".content")

divEl.addEventListener("click", () => {
  console.log("div元素被点击")
})

spanEl.addEventListener("click", () => {
  console.log("span元素被点击")
})

// 1. 页面结构相关内容
console.log(document.documentElement);  // 返回 <html> 根元素
console.log(document.head);             // 返回 <head> 元素
console.log(document.body);             // 返回 <body> 元素
document.title = "New Title";           // 获取或设置文档的标题

// 2. 节点查询方法
let byId = document.getElementById("myId");              // 通过 ID 获取元素
let byClass = document.getElementsByClassName("myClass");// 通过类名获取元素集合
let byTag = document.getElementsByTagName("div");        // 通过标签名获取元素集合
let byQuery = document.querySelector(".myClass");        // 返回匹配选择器的第一个元素
let byQueryAll = document.querySelectorAll("div");       // 返回匹配选择器的所有元素

// 3. 创建和操作节点的方法
let newDiv = document.createElement("div");              // 创建一个 <div> 元素
let textNode = document.createTextNode("Hello World");   // 创建文本节点
let fragment = document.createDocumentFragment();        // 创建文档片段

// 4. 与浏览器交互相关内容
console.log(document.URL);               // 返回当前页面的 URL
console.log(document.referrer);          // 返回来源 URL
document.cookie = "name=value";          // 获取或设置 cookie 信息
console.log(document.domain);            // 获取文档域名
console.log(document.location.href);     // 获取或设置当前 URL

// 5. 文档元数据
console.log(document.characterSet);      // 返回文档字符编码
console.log(document.lastModified);      // 返回文档上次修改日期
console.log(document.doctype);           // 返回文档类型声明

// 6. 文档节点访问与集合
console.log(document.childNodes);        // 返回所有子节点
console.log(document.firstChild);        // 返回第一个子节点
console.log(document.lastChild);         // 返回最后一个子节点
console.log(document.children);          // 返回直接子元素集合
console.log(document.forms);             // 返回所有表单
console.log(document.images);            // 返回所有图像
console.log(document.links);             // 返回所有超链接

// 7. 事件处理
document.addEventListener("DOMContentLoaded", () => {
  console.log("Document is ready!");     // 添加事件监听器
});
document.removeEventListener("DOMContentLoaded", () => {}); // 移除事件监听器
console.log(document.readyState);        // 返回文档加载状态

// 8. 文档导航
console.log(document.anchors);           // 返回所有具有 name 属性的 <a> 标签
console.log(document.scripts);           // 返回所有 <script> 标签
console.log(document.links);             // 返回所有包含 href 的链接

// -------------------- Element 常见属性 --------------------

// 获取或设置元素的 `id` 属性
let elementId = element.id; // 获取元素 ID
element.id = "newId"; // 设置元素 ID

// 获取或设置元素的 `class` 属性
let elementClass = element.className; // 获取元素类名
element.className = "newClass"; // 设置元素类名

// 获取或设置元素的文本内容
let textContent = element.textContent; // 获取文本内容
element.textContent = "New Text"; // 设置文本内容

// 获取或设置元素的 HTML 内容
let innerHtml = element.innerHTML; // 获取 HTML 内容
element.innerHTML = "<p>New Paragraph</p>"; // 设置 HTML 内容

// 获取或设置元素的外部 HTML 包含元素自身
let outerHtml = element.outerHTML; // 获取外部 HTML
element.outerHTML = "<div>New Div</div>"; // 替换整个元素

// 获取元素的子元素集合
let childElements = element.children; // 返回元素的直接子元素 (HTMLCollection)

// 获取元素的直接父元素
let parentElement = element.parentElement; // 返回直接父元素 (如果存在)

// -------------------- Element 常见方法 --------------------

// 设置元素的属性
element.setAttribute("data-info", "someValue"); // 设置自定义属性

// 获取元素的属性值
let attributeValue = element.getAttribute("data-info"); // 获取自定义属性值

// 移除元素的属性
element.removeAttribute("data-info"); // 移除属性

// 检查元素是否具有指定的属性
let hasAttribute = element.hasAttribute("data-info"); // 返回 true 或 false

// 添加 CSS 类
element.classList.add("newClass"); // 添加一个类

// 移除 CSS 类
element.classList.remove("oldClass"); // 移除一个类

// 切换 CSS 类
element.classList.toggle("active"); // 如果类存在则移除，否则添加

// 检查元素是否包含某个 CSS 类
let containsClass = element.classList.contains("active"); // 返回 true 或 false

// 获取元素的相对窗口的位置和大小
let rect = element.getBoundingClientRect(); // 返回元素的边界信息 (如宽度、高度、位置等)

// 插入一个子元素
let newChild = document.createElement("span");
element.appendChild(newChild); // 在元素末尾插入子元素

// 在特定位置插入一个新元素
let anotherChild = document.createElement("div");
element.insertBefore(anotherChild, element.firstChild); // 插入为第一个子元素

// 删除某个子元素
element.removeChild(newChild); // 从父元素中移除一个子元素

//事件监听方式一：在script中直接监听
<div class="box" onclick="console.log('div元素被点击')"></div>

//事件监听方式二：通过元素的on来监听事件
<div class="box" onclick="divClick()"></div>
//JS中实现函数方法
const divEl = document.querySelector(".box")
divEl.onclick = function() {
  console.log("div元素被点击3")
}

divEl.onclick = function() {
  console.log("div元素被点击1")
}
//divEl第二个onclick会覆盖第一个onclick
divEl.onclick = function() {
  console.log("div元素被点击2")
}
//divEl第三个onclick会覆盖第二个onclick
divEl.onclick = function() {
  console.log("div元素被点击3")
}

const divEl = document.querySelector(".box")
divEl.addEventListener("click", () => {
  console.log("div元素被点击4")
})
divEl.addEventListener("click", () => {
  console.log("div元素被点击5")
})
divEl.addEventListener("click", () => {
  console.log("div元素被点击6")
})

<html>
  <body>
    <div>
      <span id="mySpan">Click Me!</span>
    </div>
  </body>
</html>

const div = document.querySelector("div");
const span = document.querySelector("#mySpan");

// 捕获阶段监听
document.body.addEventListener("click", () => {
  console.log("Body capturing phase");
}, true); // `true` 表示在捕获阶段处理

// 冒泡阶段监听
div.addEventListener("click", () => {
  console.log("Div bubbling phase");
}, false); // `false` 表示在冒泡阶段处理

span.addEventListener("click", () => {
  console.log("Span bubbling phase");
}, false); // `false` 表示在冒泡阶段处理

const spanEl = document.querySelector(".span")

spanEl.addEventListener("click", (event) => {
  // ---------- 1. 事件类型和目标元素 ----------
  // 事件的类型，例如 "click"、"keydown"
  console.log("事件类型:", event.type); // 输出事件类型

  // 触发事件的目标元素
  console.log("触发事件的元素:", event.target); // 输出触发事件的元素，例如 <button>

  // 当前绑定事件处理程序的元素
  console.log("绑定事件的元素:", event.currentTarget); // 输出当前绑定事件的元素，例如 <button>

  // ---------- 2. 鼠标事件相关属性 ----------
  // 鼠标事件的坐标位置 (相对于视口)
  console.log("鼠标位置 - 相对于视口 (clientX, clientY):", event.clientX, event.clientY); // 输出鼠标点击的 X、Y 坐标

  // 页面滚动后的鼠标位置 (相对于整个页面)
  console.log("鼠标位置 - 相对于整个页面 (pageX, pageY):", event.pageX, event.pageY); // 输出鼠标点击的 X、Y 坐标（包括页面滚动偏移）

  // ---------- 3. 键盘事件相关属性 ----------
  // 按下的键 (对于键盘事件)
  // 需要事件类型为键盘事件 (如 'keydown', 'keyup')，在此处以例子展示
  console.log("按下的键:", event.key); // 输出按下的键，例如 "Enter"

  // ---------- 4. 修饰键状态 ----------
  // 是否按住了 "Alt" 键
  console.log("Alt 键是否被按下:", event.altKey); // 返回 true 或 false

  // 是否按住了 "Shift" 键
  console.log("Shift 键是否被按下:", event.shiftKey); // 返回 true 或 false

  // 是否按住了 "Ctrl" 键
  console.log("Ctrl 键是否被按下:", event.ctrlKey); // 返回 true 或 false

  // 鼠标或键盘是否按下了 "Meta" 键 (Windows 键或 Command 键)
  console.log("Meta 键是否被按下:", event.metaKey); // 返回 true 或 false
})

document.getElementById("exampleButton").addEventListener("click", function(event) {
  // ---------- 1. 阻止事件的默认行为 ----------
  // 阻止事件的默认行为，例如阻止链接跳转或表单提交
  event.preventDefault();
  console.log("默认行为已阻止");

  // ---------- 2. 事件传播控制 ----------
  // 阻止事件冒泡，使事件不会继续传递到父元素
  event.stopPropagation();
  console.log("事件冒泡已停止");

  // 阻止事件在当前元素上的其他监听器触发，并停止事件冒泡
  event.stopImmediatePropagation();
  console.log("事件立即停止传播，其他监听器不会触发");
});