Javascript getElementsByClassName

getElementsByClassName() 是 javascript DOM API 的一部分，该 API 允许开发者通过 class name 查找文档中的 DOM 元素。它返回一个HTMLCollection，包含在文档中被指定 class name 的所有元素。

使用方法

使用 document.getElementsByClassName(class) 来查找带有指定类名称的元素，其中，class 指的是类名称。

<!DOCTYPE html>
<html>
<body>

<h2 class="example">Example</h2>
<p class="example">This is an example paragraph.</p>
<p class="other">This paragraph has different class name.</p>

<script>
var elements = document.getElementsByClassName("example");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "yellow";
}
</script>

</body>
</html>

在这个例子中，getElementsByClassName() 会找到两个带有 example 类名称的元素，并将其背景色设置成黄色。

支持程度

getElementsByClassName() 是一个现代浏览器广泛支持的 API，并且也可以在 IE6 及更高版本中使用。然而，在 IE6 和 IE7 中，该方法不支持多类名模式。

示例

<!DOCTYPE html>
<html>
<body>

<h2 class="example">Example</h2>
<p class="example">This is an example paragraph.</p>
<p class="other">This paragraph has different class name.</p>

<script>
var elements = document.getElementsByClassName("example");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = "yellow";
}
</script>

</body>
</html>

以上代码会选择具有 example 类名称的元素，并将其背景色设置为黄色。

Javascript 取地址栏参数

JavaScript 可以通过使用 window.location.search 属性来获取地址栏中的参数和值。window.location.search 取回的是 URL 中的查询字符串，包含了起始问号周围的内容。查询字符串是一般由各种键值对组成，并用 & 符号连接。

示例

我们来看一下以下 URL 的例子:

https://example.com/?name=John&age=30

这个 URL 包含两个参数: name 和 age。这些参数可以使用以下js代码来获取：

const queryString = window.location.search;
console.log(queryString);
// 输出: "?name=John&age=30"

const urlParams = new URLSearchParams(queryString);

const name = urlParams.get('name');
console.log(name);
// 输出: John

const age = urlParams.get('age');
console.log(age);
// 输出: 30

在这个例子中，首先使用 window.location.search 来获取查询字符串，并将其存储在 queryString 变量中。接下来，使用 URLSearchParams() 构造函数创建URLSearchParams对象，并将查询字符串传递给它。最后，使用 get() 方法来获取具体的参数值。

注意事项

请注意，使用 URLSearchParams() 构造函数需要确保您的代码运行在较新的浏览器上。如果要在不支持的浏览器上运行代码，可以使用一个支持早期浏览器的 polyfill 库。例如 polyfill.io。

示例

const queryString = window.location.search;
console.log(queryString);
// 输出: "?name=John&age=30"

if (queryString) {
  const urlParams = new URLSearchParams(queryString);
  const name = urlParams.get('name');
  const age = urlParams.get('age');
  console.log(name, age);
} else {
  console.log("没有参数");
}

以上代码会首先检查 URL 中是否存在查询字符串。如果存在，则解析该查询字符串，并使用 get() 方法来获取具体的参数值。如果不存在，则在控制台输出 "没有参数"。