从 url javascript 获取元标记值(1)

📌 相关文章

📜 从 url javascript 获取元标记值(1)

📅 最后修改于: 2023-12-03 14:49:19.697000 🧑 作者: Mango

从 URL JavaScript 获取元标记值

在网页开发过程中，我们经常需要从 URL 中获取某些参数或者元标记值。本文将介绍如何使用 JavaScript 获取元标记值。

前置知识

在学习本文内容之前，你需要掌握以下知识：

基本的 HTML 知识，了解元标记的定义和作用；
JavaScript 的基本语法，了解如何操作 DOM 元素；
URL 的基本结构，了解 URL 中参数的命名和传递方式。

获取元标记值的步骤

假设我们有以下 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

我们要获取上述 HTML 中的 viewport 的 content 值。以下是获取步骤：

使用 JavaScript 获取文档对象。

const doc = document.documentElement;

使用 querySelector 方法获取 meta 元素。

const meta = doc.querySelector('meta[name="viewport"]');

注意，这里使用了 CSS 选择器语法，通过属性选择器来选取满足条件的 meta 元素。

获取 meta 元素的 content 属性值。

const content = meta.getAttribute('content');

最终的代码如下：

const doc = document.documentElement;
const meta = doc.querySelector('meta[name="viewport"]');
const content = meta.getAttribute('content');
console.log(content); // width=device-width, initial-scale=1.0

总结

通过以上步骤，我们可以很方便的获取元标记的值。值得注意的是，如果要获取的元标记没有 name 属性，我们可以使用 charset、http-equiv 或者 property 等其他属性来选取元标记。

参考链接：