JavaScript--Unfollow

《JavaScript宝典(第7版)》.( (美)Danny Goodman).[PDF

js的模型层次结构

在第25章的基本文档对象模型图(见图25-1)中, window对象是所有文档相关对象最外层的全局容器,这些文档对象可以用JavaScript编写。所有HTML和JavaScript活动都在一个窗口中进行,该窗口可以是标准的Windows、 Mac或者XWindows应用程序窗口，具有滚动条、工具栏和其他窗框控件,也可以生成只包含某些典型窗框控件的窗口。框架也是一个窗口，但框架除了滚动条以外没有其他窗框控件。JavaScript总是从window对象开始引用对象。现代浏览器将框架集处理为一个特殊类型的window对象,因此本章也会介绍框架集。

理解文档对象模型（DOM）中的window对象和相关术语：
在Web浏览器中，window对象代表了一个浏览器窗口或一个框架（frame）。它是DOM层次结构中的顶级对象，提供了许多方法和属性来操作和控制窗口或框架。
window对象有几个同义词，这是为了方便开发人员使用不同的术语来引用同一个对象：
window：它是最常用的术语，表示当前窗口或框架的全局对象。您可以使用window来访问窗口的各种属性和方法。
self：它也是window对象的一个引用，用于表示当前窗口或框架。self和window可以互换使用，它们指向同一个对象。
top：它指的是最顶层的窗口或框架，无论是否嵌套在其他框架中。在单个窗口中，top和window是相同的。但在包含多个框架的情况下，top指向最顶层的窗口，而window指向当前窗口或框架。
parent：它指的是包含当前窗口或框架的父窗口或父框架。在没有嵌套框架的情况下，parent和top是相同的。但在多个嵌套框架的情况下，parent指向父框架，而top指向最顶层的窗口。
这些同义词的存在是为了提供更灵活的编程方式，以适应不同的上下文和层次结构。

当存在多个嵌套框架时，确实可能会产生一些混淆。在这种情况下，要理解当前窗口或框架的父对象，可以使用parent属性。而要引用最顶层的窗口，可以使用top属性。

document对象

用户交互是客户端 JavaScript 脚本编程中一个至关重要的方面，脚本和用户之间的大多数交流都是通过document对象及其组件进行的。
为成功地实现跨浏览器应用程序,就必须理解document对象在每种支持的对象模型中的作用域。回顾一下 document对象在原对象层次结构中的位置。
如图 29-1 所示, document对象是大部分对象的中枢点。在W3C DOM中,作为页面中所有元素对象的容器, document对象具有更为重要的作用:document对象是整个文档树的根。
实际上，document对象及其包含的全部内容非常广泛，所以对它的讨论分散在许多章节中，每一章都重点介绍相关的对象组。本章介绍document对象和body对象(它们有概念上的联系),而本部分的后续章节则详述document对象包含的对象.

body对象

在表示 HTML 元素对象的对象模型中，body 元素对象是页面内容的主要容器，body 包含要显示的所有HTML。
在节点层次结构中,这个特殊位置给body对象提供了一些特别的功能,在 IE 对象模型中尤其如此。
为了说明其特殊关系，IE 和 W3C 对象模型都给 body 元素提供了同样的快捷引用：document.body. body 是最重要的 HTML 元素对象(第 26 章中属性、方法和事件处理程序的长列表可以证明这一点)，也可以使用其他语法来得到它。
几个熟悉的body元素特性控制着整个主体内容的外观，例如链接颜色(有三种状态)和背景(颜色或者图像)。但 IE、NN/Mozilla和 W3C 对 body元素在脚本文档中的作用有许多不同的解释。NN/Mozilla 认为，许多属性和方法都属于窗口(例如，窗口内的滚动等)，而 IE 认为它们属于 body元素对象。
因此， NN/Mozilla 滚动的是窗口(及其包含的内容)，而 IE 滚动的是body(在其所在的窗口中)。而且因为body元素填满了浏览器窗口或者框架的整个可见区域,所以这个可见矩形的大小在 IE 中由 body 的 scrollHeight 和 scrollWidth 属性确定，而 NN4+/Moz 提供了 window.innerHeight和window.innerWidth属性。用脚本编写整个窗口或者文档的外观时,这个区别十分重要,因为根据目标浏览器的不同，必须使用 window或者 body元素对象的属性和方法。

link和achor对象

Web 的目标是世界上的信息可以通过超链接(hyperlink)连接到一起,超链接是可单击的文本块或图像,好奇的读者可以利用它们导航到详细的解释或相关材料。在 JavaScript 使用的所有文档对象中, link(链接)就是进行这种连接的对象, anchor(锚)也提供了到文档中特定位置的路径。在第一代支持脚本编程的浏览器中,链接和锚是较为简单的对象，但这种简单掩盖了它们在整个Web 方案中的重要性。在脚本的控制下，链接的功能远不止是连接到 Web 上。

history/location对象

并不是文档对象模型(DOM)中的所有对象都在浏览器窗口的内容区域中可见。每个浏览器窗口或者框架都包含一些信息，包括当前访问的页面和访问者所在的位置。窗口中页面的 URL 称为地址，这个信息存储在浏览器的location对象中。浏览网页时,浏览器把浏览过的网页的 URL 保存在 history 对象中。在浏览器菜单中，可以手动查看 history 对象包含的内容(以便跳到以前访问的页面中)。

控制台

浏览器的控制台是什么
使用控制台与 DOM 交互
浏览器的控制台是浏览器提供的一个开发者工具，用于在浏览器中执行JavaScript代码、显示调试信息和提供与页面交互的环境。它提供了一个命令行界面，可以输入和执行JavaScript代码，并显示代码执行的结果和任何错误信息。
控制台通常用于以下用途：
调试：开发人员可以使用控制台来检查JavaScript代码中的错误、调试和跟踪代码的执行过程。它提供了一组调试工具，如断点、监视表达式、堆栈跟踪等。
日志记录：开发人员可以使用控制台在代码中插入日志语句，以便在代码执行时输出特定信息，以便了解代码的执行路径和变量的值。
执行代码片段：开发人员可以直接在控制台中输入和执行JavaScript代码，以进行快速的代码验证、实验和原型开发。
操作页面：控制台还提供了一些命令和API，允许开发人员与页面进行交互，修改DOM元素、样式和事件，以便进行实时的页面修改和调试。
控制台通常可以通过在浏览器的开发者工具中打开，常见的快捷键是F12或Ctrl+Shift+I（Windows）或Command+Option+I（Mac）。在控制台中，可以看到日志消息、网络请求、DOM树、CSS样式等相关的调试和开发信息。

日志信息

日志消息（Log Messages）：在浏览器的控制台中，开发人员可以使用console.log()等函数在JavaScript代码中插入日志语句。这些日志语句可以输出特定的信息，如变量的值、函数的执行路径、调试信息等。日志消息在代码执行过程中提供了调试和跟踪的功能，帮助开发人员理解代码的执行流程和定位问题所在。

网络请求

网络请求（Network Requests）：控制台中的网络请求面板提供了对页面中发起的网络请求的监视和分析。它显示了浏览器发出的HTTP请求的详细信息，包括请求的URL、请求方法（GET、POST等）、请求头、请求体等。开发人员可以查看请求的状态、响应的状态码、响应头、响应体等，以便调试和分析与后端服务器之间的通信过程。

DOM树

DOM树（Document Object Model Tree）：DOM树是由浏览器解析HTML文档生成的一个树形结构，用于表示HTML文档的结构和层次关系。在控制台中，可以通过DOM面板查看和分析当前页面的DOM树。DOM面板显示了HTML文档中的各个元素（如标签、文本节点等）以及它们之间的父子关系。开发人员可以通过DOM树来了解页面的结构、操作和修改DOM元素的属性和内容，以及调试与页面布局和渲染相关的问题。

综上所述，日志消息用于输出调试信息和跟踪代码执行过程，网络请求面板用于监视和分析页面发起的网络请求，DOM树则表示页面的结构和层次关系，可以用于操作和调试页面的DOM元素。这些功能在浏览器的控制台中提供了丰富的开发和调试工具，帮助开发人员进行前端开发和故障排除。

JS

JavaScript 教程
JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都可以使用 JavaScript。
JavaScript 非常容易学。
本教程将教你学习从初级到高级 JavaScript 知识。

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。

不完全正确。CSS（层叠样式表）是一种用于描述网页的外观和样式的语言，而不是布局。网页的布局是通过HTML（超文本标记语言）来实现的。HTML定义了网页的结构和内容，包括标题、段落、链接、图像等。CSS则用于控制这些HTML元素的外观和样式，如字体、颜色、边距、背景等。
尽管CSS可以对网页元素进行定位和布局，但它的主要目的是处理样式和外观方面的任务。布局的主要责任落在HTML和CSS布局模块之间的CSS盒模型上，其中包括盒子的大小、位置、浮动和定位等属性。此外，CSS的某些布局特性，如Flexbox和Grid，提供了更灵活和强大的布局选项。
综上所述，HTML用于定义网页的结构，而CSS用于定义网页的外观和样式。布局则是HTML和CSS之间的协同工作，其中CSS在网页元素的排列和位置方面起到重要作用。

在计算机领域中，“kernel”（内核）是操作系统的核心组件之一。内核是操作系统的底层软件，负责管理计算机硬件和软件资源，提供了与硬件交互的接口，并协调和分配系统资源给其他应用程序。
内核的主要功能包括：
进程管理：内核负责创建、终止和调度进程，以及处理进程间的通信和同步。
内存管理：内核管理计算机的物理内存，分配和释放内存资源，并管理虚拟内存系统。
文件系统管理：内核负责管理文件和目录的创建、读取、写入和删除，以及文件访问权限和存储管理。
设备驱动程序：内核提供了与硬件设备的通信接口，包括处理器、内存、硬盘、网络接口卡等。
系统调用：内核提供了系统调用接口，允许应用程序请求操作系统提供的服务，如文件访问、进程管理等。
网络管理：内核管理计算机的网络连接和通信，包括协议栈、套接字接口等。
内核是操作系统的核心部分，其设计和实现对于操作系统的性能、安全性和稳定性至关重要。不同的操作系统有不同的内核类型，如Linux内核、Windows内核和macOS内核等。

在计算机领域中，“shell”（壳）是指操作系统提供的用户界面和命令解释器。它是用户与操作系统内核之间的接口，允许用户通过命令行或图形界面与操作系统进行交互。

Shell可以理解为用户与操作系统之间的翻译器，它接收用户输入的命令并将其转换为操作系统可以理解和执行的指令。用户可以通过Shell执行各种操作系统提供的命令、运行程序、管理文件和目录等。
在类Unix系统中，常见的Shell包括：
Bourne Shell (sh)：最早的Unix Shell，是其他Shell的基础。
C Shell (csh)：在Bourne Shell基础上增加了更多的命令和语法，提供了更友好的用户界面。
Korn Shell (ksh)：结合了Bourne Shell和C Shell的特点，增加了更多的功能和命令。
Bourne Again Shell (bash)：基于Bourne Shell，是Unix和Linux系统中最常用的Shell。
Z Shell (zsh)：在Bash的基础上进行了扩展，提供了更多的特性和功能。
Shell还支持脚本编程，允许用户编写一系列的命令和控制结构来自动化任务和批处理操作。脚本通常以文本文件形式保存，并由Shell解释器执行。
总而言之，Shell是操作系统提供的用户界面和命令解释器，它允许用户与操作系统进行交互、执行命令和编写脚本来完成各种任务。

Cadence使用的主要Shell语言是Skill（Scheme-based Language for Cadence Design Systems）。Skill是一种特定于Cadence的扩展脚本语言，用于开发自动化工具和脚本以支持电子设计自动化（EDA）流程。
Skill基于Scheme语言，它提供了许多Cadence设计工具的功能接口和库，使用户能够以编程方式访问和操作Cadence工具的功能。Skill具有丰富的API（应用程序编程接口）和库，可用于执行各种任务，如电路设计、布局和验证。
Skill语言的特点包括：
功能强大：Skill提供了丰富的库和函数，使用户能够轻松地访问和操作Cadence工具的各种功能和数据结构。
面向对象：Skill支持面向对象的编程范式，使用户可以使用类、对象和继承等概念来组织和管理代码。
可扩展性：Skill允许用户编写自定义函数和库，以扩展其功能，并与其他编程语言（如Tcl、Python）进行交互。
跨平台支持：Skill可以在不同的操作系统上运行，包括Windows和Unix/Linux。
Skill作为Cadence设计工具的主要脚本语言，被广泛用于电路设计、仿真、验证和自动化流程的开发。它提供了一个强大而灵活的工具，帮助工程师优化设计流程并提高工作效率。

Skill语言最早的提出时间可以追溯到1990年代初。当时，Cadence Design Systems开发了一种特定于其设计工具的脚本语言，并最初称为"Scheme for Cadence"。这个语言后来演变为现在所称的Skill语言。
Skill语言在过去的几十年中不断发展和改进，与Cadence的设计工具一起更新。它成为了Cadence工具生态系统中的主要脚本语言，并广泛应用于电子设计自动化领域。因此，可以说Skill语言的提出时间是在1990年代初。

JS

这段代码是使用JavaScript编写的，用于定时执行一些操作。

setInterval(function () {
  var deleteBtns = document.querySelectorAll(
    "[action-type='cancel_follow_single']"
  );
  if (deleteBtns.length === 0) {
    document.querySelector(".next").click();
  } else {
    deleteBtns[0].click();
    setTimeout(function () {
      document.querySelectorAll("[action-type='ok']")[0].click();
    }, 2000);
  }
}, 5000);

这段代码使用了setInterval函数，它会按照指定的时间间隔（这里是5000毫秒，即5秒）重复执行一个匿名函数。
在这个匿名函数中，首先使用document.querySelectorAll选择器来查找所有action-type属性值为cancel_follow_single的元素，并将它们存储在deleteBtns变量中。
然后，通过检查deleteBtns数组的长度，判断是否存在匹配的元素。如果deleteBtns的长度为0，说明没有找到符合条件的元素，那么代码会执行document.querySelector(“.next”).click()，即点击具有类名为"next"的元素。
如果deleteBtns的长度不为0，说明找到了匹配的元素。代码会执行deleteBtns[0].click()，即点击deleteBtns数组的第一个元素。
接着，代码使用setTimeout函数设置一个定时器，在2秒后执行一个嵌套的匿名函数。
在嵌套的匿名函数中，使用document.querySelectorAll选择器找到所有action-type属性值为ok的元素，并点击第一个匹配的元素：document.querySelectorAll(“[action-type=‘ok’]”)[0].click()。
这段代码的作用是，在每隔5秒钟检查页面上是否存在cancel_follow_single元素。如果存在，则依次点击每个元素的删除按钮，并在2秒后确认删除操作。如果不存在，则点击类名为"next"的元素进行翻页操作。

deleteBtns是一个变量，用于存储通过选择器查询到的所有满足条件的元素集合。
在这段代码中，通过使用document.querySelectorAll(“[action-type=‘cancel_follow_single’]”)选择器，deleteBtns存储了所有具有action-type属性值为cancel_follow_single的元素。这些元素通常是页面中的"取消关注"按钮或类似的功能按钮。
通过deleteBtns[0]可以访问到deleteBtns数组中的第一个元素，然后可以对该元素进行一些操作，比如执行点击操作：deleteBtns[0].click()。

setInterval函数

setInterval(function () {
  // 在这里编写需要循环执行的代码
}, 时间间隔);

将希望循环执行的代码放在 function () { } 的大括号内。指定循环执行的时间间隔，以毫秒为单位，替换 时间间隔 的部分。
2 秒执行某些代码，可以使用2000。

document.querySelectorAll

document.querySelectorAll 是 JavaScript 中的一个 DOM 方法，用于选择匹配指定 CSS 选择器的所有元素，并返回一个类似数组的 NodeList 对象。
DOM（文档对象模型）是一种表示和操作HTML、XML和SVG文档的标准编程接口。JavaScript提供了一系列的DOM方法，用于在网页中选择、创建、修改和删除元素以及操作它们的属性和内容。下面是一些常用的DOM方法的介绍：

document.getElementById(id)：根据元素的ID选择单个元素，并返回该元素对象。
document.getElementsByClassName(className)：根据元素的类名选择一组元素，并返回一个类似数组的HTMLCollection对象。
document.getElementsByTagName(tagName)：根据元素的标签名选择一组元素，并返回一个类似数组的HTMLCollection对象。
document.querySelector(selector)：根据CSS选择器选择一个匹配的元素，并返回该元素对象。
document.querySelectorAll(selector)：根据CSS选择器选择一组匹配的元素，并返回一个类似数组的NodeList对象。
element.appendChild(childElement)：将一个元素作为子元素添加到另一个元素中。
element.remove()：从DOM树中移除一个元素。
element.innerHTML：获取或设置元素的HTML内容。

这些只是DOM方法的一小部分，还有很多其他的DOM方法可用于操作和操纵网页中的元素和内容。详细的DOM方法可以在相关的JavaScript文档中找到。

document.querySelectorAll(selector);

selector 是一个字符串，表示要匹配的 CSS 选择器。
document.querySelectorAll 方法会返回一个包含所有匹配的元素的 NodeList 对象。NodeList 是一个类似数组的对象，它按照文档中元素的顺序存储了所有匹配的元素。
你可以使用常规的数组操作或迭代方式对 NodeList 进行处理。例如，通过索引访问元素、使用 forEach 方法迭代每个元素，或者使用 length 属性获取 NodeList 的长度。

jQuery库

Query 是一个流行的 JavaScript 库，用于简化操作 HTML 文档、处理事件、执行动画和处理 AJAX 等任务。它提供了简洁的语法和跨浏览器兼容性，使得在网页开发中更方便地操作和操纵元素。

库引入

要使用 jQuery，首先需要将 jQuery 库文件引入到 HTML 页面中。可以通过以下方式之一引入 jQuery：
1、通过下载 jQuery 文件并将其放置在你的项目目录中：
2、使用 CDN（内容分发网络）来引入 jQuery，这是最常用的方式：
在引入 jQuery 后，就可以在 JavaScript 代码中使用 jQuery 的功能。常见的 jQuery 用法包括：
选择元素：使用类似 CSS 选择器的语法来选择一个或多个元素。
操作元素：设置或获取元素的属性、样式、内容等。
处理事件：绑定事件处理程序，响应用户的交互动作。
发起 AJAX 请求：使用 jQuery 提供的 AJAX 方法发送异步请求，与服务器进行数据交换。

参考：JQuery安装与下载教程

例

$(".btn_link.S_txt1").click(); // 进入“批量管理”
// 选中全部
var lis = $(".member_li.S_bg1").parentNode.childNodes;
for(var i=0;i<lis.length;i++){
    lis[i].className = "member_li S_bg1 choosed S_link1_br";
}
// 为了让“取消关注”可点击
$(".member_li.S_bg1").click();
$(".member_li.S_bg1").click();
$(".W_btn_a[node-type='cancelFollowBtn']").click(); // 取消关注
$(".W_btn_a.btn_34px[node-type='ok']").click(); // 确定

这段代码使用了jQuery库来选择和操作网页中的元素。