获取元素，类名操作，自定义属性

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'];

获取元素，类名操作，自定义属性

猜你喜欢