📌  相关文章
📜  HTML |只读属性(1)

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

HTML 只读属性

在 HTML 中，有些属性是只读的，也就是说它们只能被查看而不能被修改。这些属性通常包含了一些文档元数据或是对文档内容的描述信息，例如元素的标签名称、文档的 URL 地址、文档的创建时间等。本文将会对常见的 HTML 只读属性进行介绍。

1. classList

classList 属性返回元素的类名列表，它是一个只读属性。可以通过调用 classList 对象上的方法来添加、删除或切换元素的类名，但这些修改操作并不会直接影响到 classList 属性本身。

<button id="myButton" class="btn btn-primary">Click me!</button>
<script>
  const myButton = document.getElementById('myButton');
  const classes = myButton.classList;
  console.log(classes); // DOMTokenList ["btn", "btn-primary"]
  classes.add('btn-sm');
  console.log(classes); // DOMTokenList ["btn", "btn-primary", "btn-sm"]
</script>
2. tagName

tagName 属性返回元素的标签名称，它也是一个只读属性。字符串值为元素的标签名称，例如 "DIV"、"P"、"A" 等标签。

<div id="myDiv">Hello world!</div>
<script>
  const myDiv = document.getElementById('myDiv');
  console.log(myDiv.tagName); // DIV
</script>
3. nodeName

nodeName 属性与 tagName 属性类似，都是返回元素的标签名称。但 nodeName 属性不仅适用于 HTML 元素，也可以应用于其他 DOM 节点，例如文本节点、注释节点等。字符串值为节点的名称，例如 "#text"、"#comment" 等名称。

<p id="myPara">This is a <em>paragraph</em> element.</p>
<script>
  const myEm = document.querySelector('em');
  console.log(myEm.nodeName); // EM
</script>
4. ownerDocument

ownerDocument 属性返回当前节点所属的文档对象，它也是一个只读属性。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Document</title>
</head>
<body>
  <div id="myDiv">Hello world!</div>
  <script>
    const myDiv = document.getElementById('myDiv');
    console.log(myDiv.ownerDocument); // HTMLDocument
  </script>
</body>
</html>
5. href

href 属性返回一个表示当前 URL 的字符串，常常用于超链接 <a> 标签中。对于页面上的普通文本节点，它的 href 属性值为 null。

<a href="https://www.example.com">Click me!</a>
<script>
  const myLink = document.querySelector('a');
  console.log(myLink.href); // https://www.example.com/
</script>
6. title

title 属性返回元素的描述信息，它通常会以一个文本字符串的形式显示在鼠标悬停时的提示框中。如果该属性为空或不存在，则不会显示提示框。

<button id="myButton" title="Click me!">Button</button>

以上是 HTML 中常见的只读属性的介绍。这些属性虽然不能被修改，但它们提供了对文档内容的有用描述，可以帮助开发者更好地理解和处理文档。