4.8-- HTML5 新方法：选择器，获取class列表属性，JSON，data自定义数据

最新推荐文章于 2025-07-15 22:20:23 发布

转载最新推荐文章于 2025-07-15 22:20:23 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dh2608/p/5368820.html

文章标签：

#json #javascript #ViewUI

本文详细介绍了HTML5新增的选择器特性，如querySelector, querySelectorAll等，并对比了这些选择器与传统getElementsByClassName方法的不同之处。同时，文章还介绍了HTML5中关于class操作的新方法，如classList及其提供的add, remove, toggle等功能。此外，文中还提到了JSON的新方法、data自定义数据的作用以及JS的延迟加载方式。

1，新的选择器
querySelector
querySelectorAll
getElementsByClassName

1，var oDiv = document.querySelector('.box'); //只能选择一组中的第一个元素
//alert( oDiv.length );

2，var aDiv = document.querySelectorAll('.box');   //获取一组元素
alert( aDiv.length );

3，var aDiv = document.getElementsByClassName('box');
alert( aDiv.length );



HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index



2，获取class列表属性
classList
length :  class的长度
add()  :  添加class方法
remove()  :  删除class方法
toggle() :  切换class方法

toggle() :  切换class方法  如果这个元素在数组中出现，则删除，如果这个元素在数据中没有，则添加。

window.onload = function(){
	var oDiv = document.getElementById('div1');
	//alert( oDiv.classList );  //类似与数组的对象
	//alert( oDiv.classList.length );  //3
	//oDiv.classList.add('box4');
	//oDiv.classList.remove('box2');
	oDiv.classList.toggle('box2');
};
</script>
</head>
<body>
<div id="div1" class="box1 box2 box3">div</div>