操作CSS
<style>
div {
width: 40px;
height: 40px;
background-color: black;
}
</style>
<div></div>
<script>
// 通过内联样式修改
div.style.width = '50px';
div.style.height = '50px';
div.backgroundColor = 'red';
</script>
<style>
div {
width: 40px;
height: 40px;
background-color: black;
}
</style>
<div style="width: 50px"></div>
<script>
// 只读（计算的实际的）样式对象
const d = document.querySelector('div');
const styleObj = getComputedStyle(d); // 获取元素样式对象
console.log(styleObj.width); // 50px
</script>
<style>
div {
width: 40px;
height: 40px;
padding: 10px;
border: 1px solid black;
background-color: green;
}
</style>
<div></div>
<script>
const d = document.querySelector('div');
console.log(d.clientWidth); // 60 (content+padding)
console.log(d.offsetWidth); // 62 (content+padding+border)
</script>
操作class
<style>
.box1 {
width: 40px;
height: 40px;
backgroundColor: black;
}
.box2 {
width: 50px;
height: 50px;
backgroundColor: red;
}
</style>
<div class="box1"></div>
<script>
// 修改class实现样式修改
const d = document.querySelector('.box1');
d.className = 'box2';
d.className += ' box2';
d.classList.add('box2');
d.classList.remove('box2');
d.classList.toggle('box2');
d.classList.replace('box1', 'box2');
d.classList.contains('box1');
</script>
event
通过对事件绑定响应函数（回调函数），完成用户交互。
<!-- 方式一 -->
<button id="btn" onclick="alert('')">BTN</button>
<script>
const btn = document.getElementById('btn');
// 方式二（只能绑定一个）
btn.onclick = function() {
alter('');
}
// 方式三（可以重复绑定）
btn.addEventListener('click', ()=>{
alter('');
});
</script>
事件对象
通过事件对象可以获取事件的信息
document.onmousemove = event => {
console.log(event.target); // 触发事件的对象 <body>
console.log(event.clientX, event.clientY);
}
事件冒泡
当元素的事件被触发后，其祖先元素的相同事件也会触发；
如下例子中，点击.inner范围会分别打印outer和inner。
<style>
.outer {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: green;
}
.inner {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: red;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
<script>
const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');
inner.addEventListener('click', event => {
console.log('inner');
console.log(event.target); // 点击.inner时，<div class=inner>
console.log(event.currentTarget); // // 点击.inner时，<div class=inner>
});
outer.addEventListener('click', event => {
console.log('outer');
console.log(event.target); // 点击.inner时，<div class=inner>
console.log(event.currentTarget); // // 点击.inner时，<div class=outer>
});
</script>
使用event.stopPropagation()�阻止冒泡
<script>
const inner = document.querySelector('.inner');
inner.addEventListener('click', event => {
event.stopPropagation();
console.log('inner');
});
</script>
使用event.preventDefault()取消默认行为，如超链接跳转
<a href="#">click here</a>
<script>
const link = document.links[0];
link.addEventListener('click', event => {
event.preventDefault();
console.log('clicked');
});
</script>
事件委派
事件委派就是原本绑定给元素的事件，统一委派给祖先元素（如document），当元素上触发的事件会传递到祖先元素的事件，即使触发事件的元素本身没有添加事件监听。
<ul>
<li><a href="javascript:;">1</a></li>
</ul>
<script>
document.addEventListener('click', event => {
console.log(event.target.textContent);
});
</script>
对祖先元素触发事件的条件加以限制，只有点击<a>标签时才触发。
<ul>
<li><a href="javascript:;">1</a></li>
</ul>
<script>
const links = document.getElementsByTagName('a');
document.addEventListener('click', event => {
if ([...links].includes(event.target)) {
console.log(event.target.textContent);
}
});
</script>
事件捕获
事件捕获就是描述如何获得事件，当事件发生时，从document向子元素层层扫描直到目标元素；
完成事件捕获后，再从目标元素向外冒泡，触发事件。
如在事件捕获时即触发事件则设置addEventListener(,, true)，这时冒泡就不会发生了。
<script>
outer.addEventListener('click', event => {
}, true);
</script>
BOM
浏览器对象模型，通过BOM提供的对象操作浏览器：
- Window，全局对象
- Navigator，识别浏览器设备信息（地理位置，蓝牙，剪贴板，userAgent）
- Location，地址栏信息（href，protocol，host，hostname, port, pathname, search, hash）
- History，历史记录 ( back(), forward(), go(number) )
- Screen，屏幕信息
