📌  相关文章
📜  HTML DOM localName 属性(1)

📅  最后修改于: 2023-12-03 15:01:10.089000             🧑  作者: Mango

HTML DOM localName 属性

简介

在 HTML DOM 中，localName 属性用于获取指定元素的本地标签名，即不带命名空间的标签名。

在使用命名空间的 XML 文档中，localName 属性也可以用于获取元素的本地标签名。

语法
element.localName
返回值

localName 属性返回一个字符串，表示指定元素的本地标签名。

  • 如果元素的标签名不包含命名空间，则返回整个标签名。

例如，对于 <div> 元素，localName 属性将返回 "div"。

  • 如果元素的标签名包含命名空间，则返回标签名去除命名空间的部分。

例如，对于 <svg:rect> 元素，localName 属性将返回 "rect"。

示例

我们来看一些示例，加深对 localName 属性的理解。

示例 1: 不带命名空间的元素
<!DOCTYPE html>
<html>
<body>

<div id="myDiv">Hello World!</div>

<script>
  var element = document.getElementById("myDiv");
  console.log(element.localName); // 输出 "div"
</script>

</body>
</html>

在以上示例中，通过 getElementById 方法获取了 id 为 "myDiv" 的 <div> 元素，并使用 localName 属性获取了这个元素的本地标签名，即 "div"。

示例 2: 带命名空间的元素
<!DOCTYPE html>
<html>
<body>

<svg:rect id="myRect" width="100" height="100"/>

<script>
  var element = document.getElementById("myRect");
  console.log(element.localName); // 输出 "rect"
</script>

</body>
</html>

在以上示例中，我们创建了一个带命名空间的 <svg:rect> 元素，并使用 getElementById 方法获取了其 id 为 "myRect" 的元素。然后，通过 localName 属性获取到这个元素的本地标签名，即 "rect"。

注意事项

  • localName 属性是只读的，不能通过赋值改变元素的本地标签名。

  • 如果使用的 HTML 版本较旧，可能不支持 localName 属性，请确保你的目标浏览器支持该属性。

参考链接