元素
查找元素
document.getElementById('id')
document.getElementByTagName('li')
// 在元素子元素里查询
const ul = document.getElementById('ul')
ul.getElementByTagName('li')
document.getElementsByClassName ('类名');
document.querySelector('.className');
document.querySelector('#id');
// querySelectorAll返回一个指定选择器的所有元素对象集合（伪数组）
document.querySelectorAll( '.className '); // 返回所有类名为className的元素
document.querySelectorAll( 'li'); // 返回所有li标签元素
document.body // 获取body元素
document.documentElement // 获取html元素
增删改元素节点
document.createElement(tagName)
document.createElementNS()
document.createTextNode()
document.createComment()
parentNode.insertBefore(newNode, referenceNode)
parentNode.firstElementChild
parentNode.lastElementChild
node.removeChild(child)
node.appendChild(child)
node.parentNode
node.nextSibling
node.nextElementSibling
node.previousElementSibling
node.tagName
node.textContent
克隆节点
如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为 true，则是深度拷贝，会复制节点本身以及里面所有的子节点
node.cloneNode()
修改元素内容
// 1.识别 html 标签2.不去除文本开头和末尾的空格和换行3.可读写
element.innerHTML()
// 修改表单元素内容
const input = document.querySelector("input");
input.value = 'hi'
修改元素样式
// 修改内联样式
element.style
element.style.backgroundColor = 'red'
// 修改样式类
element.className
查找修改属性
const elm = document.createElement('div')
// 设置自定义属性
elm.setAttribute('multiple', 'multiple')
// 设置自带属性
elm.id = 'first'
// 获取自定义的属性
elm.getArrtibute('multiple')
// 获取元素自带属性
elm.id
// 删除属性
elm.removeAttribute('multiple')
事件
绑定事件
// on开头事件
<button onclick="alert('hi~')"></button>
// 监听事件 addEventListener
elm.addEventListener("click ", function () {
alert('click');
});
删除事件
eventTarget.onclick =null;
eventTarget.removeEventListener("click");
事件流
事件对象
官方解释:event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解︰事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。
// 1. e.target返回的是触发事件的对象（元素）this返回的是绑定事件的对象（元素)
//区别:e.target点击了那个元素，就返回那个元素 this那个元素绑定了这个点击事件，那么就返回谁
var div = document.querySelector("div ");
div.addEventListener("click ", function (e) {
console.log(e.target);
console.log(this);
//当这个div没有子元素时，两个console.log均把该div元素打印出来
});
var ul = document.querySelector("ul"); //ul下有li
ul.addEventListener(" click ", function (e) {
//我们给ul 绑定了事件 那么this就指向ul
console.log(this); //不管是点击ul还是点击ul下的li均返回ul元素
// e.target 指向我们点击的那个对象谁触发了这个事件我们点击的是li e.target 指向的就是li
console.log(e.target); //点击ul下的li则返回该li元素，点击ul就返回ul元素
});
事件冒泡
从里到外
阻止事件冒泡
stopPropagation
事件委托 （利用事件冒泡）
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例: 给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。
事件捕获
从外到里
