下面分别详细讲解一下"javascript getElementsByClassName"和"js取地址栏参数"。
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() 方法来获取具体的参数值。如果不存在，则在控制台输出 "没有参数"。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript getElementsByClassName 和js取地址栏参数 - Python技术站
微信扫一扫 
支付宝扫一扫 