html，dom得到标签属性值

HTML DOM是指HTML Document Object Model，是指在网页中所有元素都是可以被操作的对象，开发者可以通过JavaScript来操作DOM，实现动态地修改网页内容和样式。其中，标签属性也是HTML DOM的一部分，不过在操作标签属性之前，我们需要先了解如何获取标签属性值。

一、获取单个属性的值

可以使用getElementById、querySelector、querySelectorAll等方法来获取标签对象，这些方法都有.getAttribute方法可以获取标签的属性值，如下例所示：

```html

```

```javascript

var testDiv = document.getElementById("test"); //获取ID为test的标签对象

console.log(testDiv.getAttribute("name")); //输出testName

```

上述代码中，使用getElementById方法获取id为test的标签对象，并使用getAttribute方法获取该标签的name属性的值。

二、获取多个属性的值

如果想要获取一个标签的多个属性值，可以使用attributes属性，该属性是一个包含该标签所有属性的NamedNodeMap对象。可以通过遍历NamedNodeMap对象，获取每个属性的name和value，如下例所示：

```html

```

```javascript

var testDiv = document.getElementById("test"); //获取ID为test的标签对象

var attrs = testDiv.attributes; //获取该标签的所有属性

for(var i = 0; i < attrs.length; i++) {

console.log(attrs[i].name + " : " + attrs[i].value); //依次输出每个属性的name和value

}

```

上述代码中，先获取ID为test的标签对象，然后获取该标签的所有属性，并使用for循环遍历NamedNodeMap对象，依次输出每个属性的name和value。

三、注意事项

1. 不要在HTML中写重复的属性，例如：

```html

```

这样写会导致在获取ID为test的标签对象时出现错误，因为一个标签的ID必须是唯一的。

2. 属性名和属性值必须用双引号或单引号包裹，例如：

```html

```

如果不使用引号包裹属性名和属性值，可能会导致获取属性值失败。

3. 一些属性的获取和设置需要特殊注意，例如style属性：

```html

```

```javascript

var testDiv = document.getElementById("test"); //获取ID为test的标签对象

console.log(testDiv.style.color); //输出red

```

上述代码中，获取ID为test的标签对象后，使用style属性获取style属性值，再使用.color获取style属性中的color值。

总之，获取标签属性值是DOM操作中常见的任务，我们可以使用getAttribute和attributes方法来实现。但需要注意的是，属性名和属性值必须用引号包裹，一些特殊属性的获取和设置也需要特别关注。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！