DOM扩展
2018-04-20 本文已影响0人
琪33
1.1 获取元素
1、document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
<style>
.box{
width: 300px;
height: 100px;
margin:10px auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box box1" id="box1"></div>
<div class="box box3 "></div>
<div class="box box3"></div>
<div class="box box4"></div>
<script>
var box1=document.querySelector('.box3');
box1.style.background='red';
</script>
3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。
<style>
.box{
width: 300px;
height: 100px;
margin:10px auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<script>
//会获取所有复合条的 标签，返回的是一个数组， 参数：可以是任意 css选择器
var divs= document.querySelectorAll('div.box');
console.log(divs);
for(var i=0;i<divs.length;i++){
divs[i].style.background='red';
}
</script>
1.2 类名操作
1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点，是一个通称。
<style>
.box{
width: 300px;
height: 100px;
margin:10px auto;
border: 1px solid #000;
}
.active{
border-radius: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="box box1 "></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<button>切换</button>
<script>
var box1=document.querySelector('.box1');
// 添加类名
box1.classList.add('active');
// 删除类名
box1.classList.remove('active');
// contains:包含
// 判断是否包含某个类名 返回结果 true/false
var f=box1.classList.contains('active');
console.log(f);
// 切换类名
document.querySelector('button').onclick=function(){
document.querySelector('.box3').classList.toggle('active');
}
</script>
1.3 自定义属性
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="zs" data-content="我是一个div">div</div>
<script>
var box=document.querySelector('.box');
console.log(box.dataset['content']);
// 设置自定义属性的值
box.dataset['content']='aaaa';
// data-my-name="zs" 如何获取
console.log(box.dataset['myName']);
</script>
