js获得dom的原始名字而不是tagName

你可以使用DOM元素的nodeName属性来获取元素的原始名称，而不是tagName属性。nodeName属性将返回元素的完整原始名称，包括命名空间前缀（如果存在）。例如，对于以下HTML代码：

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

你可以使用以下JavaScript代码来获取该元素的原始名称：

var myDiv = document.getElementById("myDiv");
var nodeName = myDiv.nodeName; // nodeName的值为 "DIV"

希望这可以帮助你。

相关问题

vue为什么采用虚拟dom而不是真实dom

Vue 采用虚拟 DOM 的主要原因是为了提高性能和优化渲染效率。

真实 DOM 操作非常昂贵，因为每次更新都需要重新计算布局和重新绘制，这会导致页面反应不及时，用户体验较差。而虚拟 DOM 是在内存中创建一个抽象的 DOM 树，每次数据变化时先操作虚拟 DOM，再通过算法计算出需要更新的部分，最后只更新需要更新的部分，从而避免了大量无用的操作，提高了性能和渲染效率。

此外，使用虚拟 DOM 也使得跨平台开发更容易，因为它可以在多个平台上运行，而真实 DOM 依赖于浏览器环境。

总之，虚拟 DOM 是一种优秀的优化手段，它可以提高渲染效率、减少无用操作、支持跨平台开发等。

vue3 js循环DOM得到索引

在 Vue3 中，可以使用 `v-for` 指令来循环渲染 DOM，并且可以通过 `v-for` 的第二个参数来获取当前循环的索引。同时，在循环过程中，可以使用 `Array.prototype.forEach()` 或者 `Array.prototype.map()` 方法来对数组进行遍历操作。以下是两种方法的示例代码：

使用 `v-for` 和 `$index`：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
</template>

使用 `Array.prototype.forEach()`：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      const lis = this.$el.querySelectorAll('li');
      lis.forEach((li, index) => {
        console.log(index, li.textContent);
      });
    });
  },
};
</script>

使用 `Array.prototype.map()`：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      const lis = this.$el.querySelectorAll('li');
      const texts = Array.from(lis).map((li, index) => {
        return `${index}: ${li.textContent}`;
      });
      console.log(texts);
    });
  },
};
</script>

在上面的例子中，我们通过 `querySelectorAll()` 方法选取了所有的 `<li>` 元素，并且使用 `forEach()` 和 `map()` 方法对它们进行了遍历操作。