document.getElementById(""); //通过ID获取
document.getElementsByClassName(""); //通过class获取
document.getElementsByTagName(""); //通过name获取
document.querySelector(""); //通用获取
document.querySelectorAll(""); //通用获取全部
//JS插入代码
.insertAdjacentHTML("beforebegin","<button>按钮</button>"); //插入到开始标签前
.insertAdjacentHTML("afterbegin","<button>按钮</button>"); //插入到开始标签后
.insertAdjacentHTML("beforeend","<button>按钮</button>"); //插入到结束标签前
.insertAdjacentHTML("afterend","<button>按钮</button>"); //插入到结束标签后
.insertAdjacentHTML("beforebegin","<div>容器</div>"); //插入到开始标签前
.insertAdjacentHTML("afterbegin","<div>容器</div>"); //插入到开始标签后
.insertAdjacentHTML("beforeend","<div>容器</div>"); //插入到结束标签前
.insertAdjacentHTML("afterend","<div>容器</div>"); //插入到结束标签后
//插入节点，不支持直接插入代码
document.body.appendChild(); //插入节点，到子元素的末尾
父节点.appendChild(); //插入节点
参考节点.parentNode.insertBefore(,参考节点); //在参考子节点前插入
参考节点.parentNode.insertAfter(,参考节点); //在参考子节点后插入
参考节点.parentNode //参考节点的父元素
.addEventListener('click', () => {
//按钮事件
})
//设置指定class的css
document.querySelector(".tab").style.backgroundColor="#409eff";
document.querySelector(".tab").style.color="#FFF";