自定义数据属性与微数据：网站标记新策略-CSDN博客

本文链接：https://blog.csdn.net/weixin_30633869/article/details/147843535

自定义数据属性与微数据：网站标记新策略

背景简介

随着HTML5的普及，自定义数据属性（data-* attributes）成为了网页开发中一种常见的标记方法。这些属性允许我们在不改变现有HTML语义的基础上，添加额外的信息。本书章节详细介绍了如何利用这些属性以及JavaScript和jQuery进行数据操作，并展示了如何与Google地图API结合来创建互动地图。

自定义数据属性的定义与应用

自定义数据属性以 data- 开头，后面跟上自定义名称，可以包含字母、数字、连字符和下划线。例如， data-year 、 data-color 和 data-engine 是为存储汽车年份、颜色和发动机类型而定义的自定义属性。通过这些属性，我们可以为网站添加更多不直接展示给用户的信息，从而在不影响页面设计的情况下丰富网页内容。

解决方案：向标记中添加自定义数据

在HTML5中，自定义数据属性不仅易于定义，而且可以通过JavaScript轻松访问。例如，可以遍历一组列表项（ li 元素），并通过 dataset 属性访问每个元素的 data-color 属性值，并将其添加到输出字符串中。

var cars = document.getElementsByTagName("li");
var output = "What color are Kimberly's cars? ";
for (var i=0; i < cars.length; i++) {
    output += cars[i].dataset.color;
    if (i != (cars.length-1)) {
        output += ", ";
    }
}
document.getElementsByTagName("p")[0].innerHTML = output;

讨论：使用dataset API和setAttribute访问自定义数据

随着HTML5的引入， dataset 属性为访问任何元素的自定义数据提供了一种简单的方式。如果浏览器不支持 dataset 属性，可以通过 getAttribute 方法访问自定义数据。

使用JavaScript操作自定义数据

我们不仅可以访问自定义数据，还可以修改或创建新的自定义数据属性。使用 dataset API可以轻松地进行赋值操作，而 setAttribute 则作为备选方案。例如，可以将页面中的所有汽车重新漆成黄色，并为每辆车添加一个“极好”的评分。

使用自定义数据创建地图应用程序

自定义数据属性还可以与Google地图API结合使用，将位置信息存储在自定义属性中，并通过JavaScript在地图上渲染标记。这个过程涉及到在地图上定义标记的位置，并通过访问自定义属性来获取这些位置信息。

<!DOCTYPE html>
<html>
<head>
<title>Map example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
#map { height:500px; width:500px; border:1px solid #000; }
</style>
</head>
<body>
<h1>Ice Cream in Philadelphia</h1>
<ul>
    <li><a data-lat="39.9530255" data-long="-75.1596066" href="http://www.bassettsicecream.com/">Bassetts Ice Cream</a></li>
    <li><a data-lat="39.949888" data-long="-75.161717" href="http://www.capogirogelato.com/">Capogiro Gelateria</a></li>
    <li><a data-lat="39.949556" data-long="-75.1428795" href="http://www.franklinfountain.com/">Franklin Fountain</a></li>
</ul>

<div id="map"></div>

<script>
    var map_options = {
        zoom: 15,
        center: new google.maps.LatLng(39.95, −75.152),
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    var map = new google.maps.Map(document.getElementById("map"), map_options);

    var locations = document.getElementsByTagName("a");
    for (var i=0; i < locations.length; i++) {
        var latitude, longitude;
        if (locations[i].dataset) {
            latitude = locations[i].dataset.lat;
            longitude = locations[i].dataset.long;
        } else {
            latitude = locations[i].getAttribute("data-lat");
            longitude = locations[i].getAttribute("data-long");
        }
        locations[i].addEventListener('click', function() {
            map.setCenter(new google.maps.LatLng(latitude, longitude));
            new google.maps.Marker({
                position: new google.maps.LatLng(latitude, longitude),
                title: this.innerHTML,
                map: map
            });
        });
    }
</script>
</body>
</html>

总结与启发

自定义数据属性为网页标记提供了强大的灵活性，允许我们在不影响页面结构和内容的前提下，添加和操作数据。这种技术的运用不仅限于简单的数据标记，还可以扩展到创建动态的、用户交互式的网页应用。通过结合JavaScript和一些强大的库（如jQuery和Google地图API），我们可以为用户提供更加丰富和个性化的体验。理解并熟练使用自定义数据属性和微数据，将为网站开发开辟新的可能性。