jQuery 的 data() 并不会改变 DOM 值

<div id="d1" data-name="123"></div>
<div id="d2"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	alert($("#d1").data("name"));
	$("#d1").data("name", "456");
	alert($("#d1").data("name"));
	
	$("#d2").data("name", "123");
});
</script>

以上代码先 alert 123，再 alert 456，这都在预料之中。

不过，F12，查看 DOM 结构，并没有任何改变。

原来 data() 是只读 DOM 的，并不会改变 DOM 结构。用 data 赋值，虽然会改变值，但是这个值并不会写回 DOM。

再看继续看引入 attr() 的情况。

<div id="d2"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#d2").attr("data-name", "456");
	alert($("#d2").data("name"));
});
</script>


<div id="d2" data-name="123"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#d2").attr("data-name", "456");
	alert($("#d2").data("name"));
});
</script>

以上两段代码，alert 都是 456。

<div id="d2"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	alert($("#d2").data("name"));
	$("#d2").attr("data-name", "456");
	alert($("#d2").data("name"));
});
</script>

<div id="d2" data-name="123"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
	alert($("#d2").data("name"));
	$("#d2").attr("data-name", "456");
	alert($("#d2").data("name"));
});
</script>

上述第一段代码，第一次 alert undefined，第二次 alert 456。

上述 第二段 代码，第一次 alert 123，第二次 alert 也是 123。

进一步研究，可以得出结论：

• 至始至终，data() 都不会改变 DOM，但 DOM 的改变是否影响 data() 要继续看下面两条结论。
• 如果没有对某元素、某 data-使用 data() 方法、或者虽然使用了 data() 方法但没有取到值（data- 属性不存在，导致取得值为 undefined）：则通过 attr() 赋值、改变值后，data() 方法获取的是 DOM 最新的。
• 如果已经对某元素、某 data-使用 data() 方法，且取到值了：就相当于与 DOM 断开了，attr() 赋值不会影响 data() 值，data() 赋值也不会影响 DOM 表现。
• 所以不建议对 DOM 会有变化的 data- 采用 data() 方法取值。