html，获取标签自定义属性值，js把json转为html

嘿，小伙伴们！今天我们来聊聊两个常用的前端技能——获取HTML标签自定义属性值和将JSON转化为HTML。这些技能在我们日常开发中是非常实用的。那么，让我们来一起学习吧！

首先，我们来看看如何获取HTML标签自定义属性值。在HTML中，我们可以在标签中添加自定义属性，例如：

```

```

在这个div标签中，我们添加了两个自定义属性：data-name和data-age。它们的值分别为“Emma”和“25”。如果我们需要获取这些自定义属性的值，可以使用JavaScript的getAttribute方法。如下所示：

```

let name = document.querySelector('div').getAttribute('data-name');

let age = document.querySelector('div').getAttribute('data-age');

```

这里我们使用了querySelector方法选择了第一个div标签，并使用getAttribute方法获取了它的data-name和data-age属性值。值得注意的是，这里getAttribute方法的参数应该为自定义属性名的字符串。

接下来，我们来看看如何将JSON转化为HTML。在日常中，将JSON转化为HTML有很多用处，例如将后端传来的数据渲染到前端页面上。下面是一个JSON数据的例子：

```

let data = [

{name: "Emma", age: 25},

{name: "Mike", age: 30},

{name: "Lucy", age: 28}

];

```

我们可以使用JavaScript的forEach方法循环遍历这个JSON数组，并使用模板字符串拼接HTML代码。具体方法如下：

```

let html = '';

data.forEach(function(item) {

html += `

`;

});

```

在这里，我们使用了forEach方法遍历了data数组。对于每一个元素，我们使用了模板字符串拼接了一个div标签，其中包含了name和age两个属性的值。

最后，我们可以通过将html插入到页面中，将JSON渲染成HTML。如下所示：

```

document.querySelector('body').innerHTML = html;

```

这里，我们选择了body标签，并将拼接好的html代码赋值给它的innerHTML属性，这样就可以在页面中看到我们渲染出来的内容啦！

好了，以上就是关于获取HTML标签自定义属性值和将JSON转化为HTML的简单介绍和示例。这些技能在实际开发项目中是非常有用的，希望大家能够掌握并且在实际项目中运用起来。如果你有什么问题或者建议，欢迎在评论区留言哦！ 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.ynyuzhu.com/