22、网页元素操作与页面空间相关知识

网页元素操作与页面空间相关知识

1. 提取页面中的链接

在网页中，我们可以使用 querySelectorAll 方法来查找所有的链接。示例代码如下：

var links = document.querySelectorAll("a");

这里不建议使用 getElementsByTagName 方法来获取链接，原因在于该方法返回的是一个实时的 nodeList 。当我们将链接添加到内存中的无序列表时，链接会从文档中移除，从而影响集合的长度。

为了移动链接并保留其文本内容，我们可以使用 cloneNode 方法克隆子元素，并将其放置在链接之前。示例代码如下：

var newElement = oldElement.cloneNode(true);

将 true 作为参数传递给 cloneNode 方法，可确保节点的所有子元素也会被克隆。处理完所有链接后，将无序列表添加到文档末尾。

2. 向现有表格添加行

若要向 HTML 表格添加一行或多行，可以按以下步骤操作：
1. 创建表格行（ tr ）。
2. 为每个表格单元格创建表格单元格元素（ td ）。