节点 | URL.origin API

在 JavaScript 中，节点（Node）和 URL 对象（URL）被广泛使用。节点表示 DOM（文档对象模型）中的元素，而 URL 则是用于标识资源的字符串，提供了进行网络请求的功能。本文介绍了节点和 URL.origin API 的相关知识点。

节点

节点是 DOM 的核心概念之一。节点是 DOM 树中的一个元素，可以是文档本身、元素、文本节点等。如果需要访问节点属性或子元素，可以使用节点 API 进行操作。

创建节点

可以使用 document.createElement() 方法创建新的元素节点，并使用 appendChild() 方法将其添加到 DOM 中。

const newElement = document.createElement('div');
document.body.appendChild(newElement);

删除节点

可以使用 parentNode.removeChild() 方法删除节点。

const nodeToRemove = document.getElementById('node-to-remove');
nodeToRemove.parentNode.removeChild(nodeToRemove);

查找节点

可以使用 document.getElementById() 方法根据 ID 查找节点。

const nodeById = document.getElementById('my-node');

修改节点属性

节点的各种属性可以使用 node.attributeName 或 node.getAttribute('attributeName') 进行访问。可以使用 setAttribute('attributeName', 'attributeValue') 方法设置属性值。

const myNode = document.getElementById('my-node');
myNode.setAttribute('data-name', 'my-node');

遍历节点树

可以使用节点的 parentNode、childNode、nextSibling 和 previousSibling 属性遍历节点树。

let currentNode = document.getElementById('my-node');
while (currentNode) {
  console.log(currentNode.firstChild);
  currentNode = currentNode.nextSibling;
}

URL.origin

URL 对象提供了对 URL 的访问和操作。URL.origin 是 URL 对象的属性之一，表示页面的起点，这包括 URL 协议、主机和端口。

创建 URL 对象

可以使用 new URL() 构造函数创建 URL 对象。

const myUrl = new URL('https://www.example.com/path?param=value');

获取 URL.origin

可以使用 URL.origin 属性获取 URL 的起始位置。

const myUrl = new URL('https://www.example.com/path?param=value');
console.log(myUrl.origin); // https://www.example.com

设置 URL.origin

URL.origin 是只读属性，不能直接设置。但可以设置 URL 对象的其他属性，从而影响 URL.origin。

const myUrl = new URL('https://www.example.com/path?param=value');
myUrl.protocol = 'http';
console.log(myUrl.origin); // http://www.example.com

总结

本文介绍了节点和 URL 对象的相关知识点，包括创建、删除、查找节点；访问或设置节点属性；遍历节点树；创建和访问 URL 对象；获取和设置 URL.origin 等。这些知识点在 JavaScript 中非常常用，掌握它们可以为编写更高效、更可靠的代码提供帮助。