1- 获取元素
document.getElementsByClassName('class'); 通过类名获取元素,以类伪数组形式存在。
下标是从0开始的。
document.getElementById('id'); id具有唯一性。
document.querySelector('selector') 通过css样式选择器,来获取元素。
获取的是符合条件(选择器)的的第1个元素
标签选择器,类,id,后代选择器,子代选择器......
// var list = document.querySelector('.first');
// var list = document.querySelector('#second');
var list = document.querySelector('.first a'); // 空格 后代选择器; > 是子选择器
list.style.color = 'red';
document.querySelectorAll('selector'); // 获取所有的元素,返回1个伪数组
var lis = document.querySelectorAll('li');
var lis = document.querySelectorAll('li li'); // 获取第一个数组的子数组元素,修改style样式
for(var i=0; i<lis.length; i++) {
lis[i].style.color = 'yellow';
}
2- 类名的操作
Node.classList.add('class'); 添加class
Node.classList.remove('class'); 移除class
Node.classList.toggle('class'); 切换class,有则移除;无则添加
Node.classList.contain('class'); 检查是否存在class
// 实现tab切换的时候,css样式修改。达到切换效果。
var navs = document.querySelectorAll('nav a');
for(var i=0; i<vars.length; i++) {
// 给tab的 按钮绑定事件
navs[i].onclick = function () {
var active = docuent.querySelector('.active'); // 获取.active类名的元素
active.classList.remove('active'); // active 移除某个类名
// $('.active').removeClass('active'); // jquery 写法
this.classList.add('active'); // 所点击的item:添加一个类名
// $(this).addClass('active'); // 上面代码,相当于这个写法。jquery 写法
// 切换类名 this.classList.toggle('active');
// $(this).toggleClass('active');
// 检查是否包含类名 this.classList.contains('active');
// $(this).hasClass('active');
}
}
3- 自定义属性
格式:以data-name的格式,自己来定义的一些属性。只要符合这种格式的就称为自定义属性。
总结:
1 获取一个DOM节点,并且这个DOM节点定义了一些自定义属性。
2 通过Node.dataset, 也管理(读取/设置)自定义属性
3 Node.dataset.属性 = ‘属性值’
<nav>
<a href="javascript:;" data-name="local" data-id="1">国内新闻</a>
</nav>
var nav = document.querySelector('nav a ');
alert(nav.getAttribute('data-name')); // 读取自定义属性的值
alert(nav.getAttribute('data-id'));
nav.setAttribute('data-demo', '124'); // 设置一个自定义属性
// h5获取一个对象的所有的自定义属性集 dataset
console.log(nav.dataset);
var customData = nav.dataset;
console.log(customData.name); // 获取自定义属性
console.log(customData.id);
// 给对象属性,添加键值对,修改值
// var obj = {
// name:'local',
// id:'2'
// }
// obj.name = 'local1'; // 添加对象值
customData.name = 'name1';
customData.demo = 124;
customData.myName;
customData.testName = 'test-name'; // 转换后的key:data-test-name
<div data-my-name="itcast"> 这样获取Node.dataset['myName'];