用const声明变量（对象）
- DOM树：树结构表达 HTML 文档
- 根节点为document对象
- DOM对象：包含所有属性、事件等
const div = document.querySelector('div')
console.dir(div)
获取DOM元素
返回匹配指定CSS选择器的第一个元素：querySelector('nav')
返回伪数组，可以遍历；document.querySelectorAll()
const nav = document.getElementById('nav') // get element by id
const n2 = document.getElementsByClassName('#') // get all elements by class name
const n3 = document.getElementsByTagName('n') // get all elements by tag name
修改内容
innerHTML：会解析HTML标签innerText：仅文本字符串className：更改CSS类classLis：追加/删CSS类
H5自定义属性 data-xxx DOM 中dateset对象
<p id="nav" data-id="77">Navigation</p>
const nav = document.getElementById('nav')
console.log(nav.dataset.id) // 77 get data-id attribute value
事件监听
添加方法 addEventListener(event, func)
另一种写法 .onclick 无捕获
事件类型
- 鼠标
click点击mouseenter经过mouseleave离开mouseover和mouseout有冒泡效果（不推荐）
- 焦点
focus获得blur失去
- 键盘
keydown按下keyup弹起
- 文本
text文本输入
事件对象：事件触发的信息，func第一个参数
b3.addEventListener('click', (e) => {
console.log(e) // event object
})
input.addEventListener('keyup', (e) => {
if(e.key === 'Enter') {
console.log('Enter') //按回车
}
})
属性
- type: 事件类型
- key: 按下的键
环境对象：this 变量 指向调用它的元素/对象
b3.addEventListener('click', function () {
console.log(this) // button element <button id="b3">Click me</button>
})
事件流
阶段：捕获+冒泡（默认）
捕获顺序：Document -> Super_box ->Sub-content 从外到内
不加 true 则冒泡，顺序相反
<div class="super">
<div class="sub">
<p>Sub-content</p>
</div>
</div>
const superBox = document.querySelector('.super')
const sub = document.querySelector('.sub')
document.addEventListener('click', () => {
alert('Document clicked')
}, true)
superBox.addEventListener('click', () => {
alert('Super-box clicked')
}, true)
sub.addEventListener('click', () => {
alert('Sub-content clicked')
}, true)
阻止冒泡：避免影响父级元素
修改子类 .stopPropagation 后，仅有Sub-content事件
sub.addEventListener('click', function (e) {
alert('Sub-content clicked')
e.stopPropagation() // stop event bubbling
})
.preventDefault() 阻止默认行为
解除绑定
on-click = nullremoveEventListener(event, func)不能是匿名函数
委托
冒泡到父元素，减少注册次数
真正的触发元素：e.target 事件对象
页面事件
页面动作，执行回调函数
load：页面加载scroll：滚动resize：窗口尺寸变化
window.addEventListener('load', () => {
console.log('Page loaded') // window load event
})
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM content loaded') // DOM fully loaded
}) //faster than window.onload
img.addEventListener('load', () => {
console.log('Image loaded') // 等待图片加载完成
})
window.addEventListener('scroll', () => {
console.log(`Window scrollX ${window.scrollX} scrollY ${window.scrollY}`)
console.log(`Document scrollX ${document.documentElement.scrollLeft} scrollY ${document.documentElement.scrollTop}`)
})
获取元素尺寸
clientWidth和clientHeight：border之内的宽高 可更改offsetHeight包括border 只读
节点操作
节点：<元素>
基于关系查找节点
- 父节点：
.parentNode - 子节点：
.children包含所有节点的伪数组 - 姐妹节点
.previousElementSibling上一个.nextElementSibling下一个
创建、追加节点 createElement()
const dd = document.createElement('div');
dd.innerHTML = 'dd';
superDiv.appendChild(dd); //到最后的子元素
superDiv.insertBefore(dd, superDiv.children[1]);
克隆节点 .cloneNode(true) 深/浅克隆（是否包含后代元素）
删除节点 经过父元素
superDiv.removeChild(superDiv.children[0]); // remove first child
BOM对象
location：URL地址search参数，?后面部分hash哈希，#后面部分reload()刷新
navigator：浏览器平台信息history：历史操作- back()：后退
- forward()：前进
- go(n)：进/退n🙅步
localStorage本地存储
键值对；仅字符串
对象转换成JSON：JSON.stringify(obj)
- setItem()：增/改
- removeItem()：删
- log()：查
console.log(window.location.href); // https://www.example.com/path/to/page.html
localStorage.setItem('name', 'value');
console.log(localStorage.getItem('name')); // value
localStorage.removeItem('name'); // remove ite
const obj = {
name: 'Alex',
age: 18,
sayHello: function() {
console.log('Hello, my name is '+ this.name);
}
}
localStorage.setItem('person', JSON.stringify(obj));
const person = JSON.parse(localStorage.getItem('person'));
console.log(person.name); // Alex
