1.HTML的基本结构
①HTML标签：document.documentElement
②body标签：document.body
③head标签：document.head
④网页标签：获取→document.title； 设置→document.title = 值
2.获取标签
①css选择器：（1）document.querySelector(css选择器)→获取满足css选择器的第一个元素
（2）document.querySelectorAll(css选择器)→获取满足css选择器的所有元素
②id：document.getElementsByTagName(id名)
③标签名：document.getElementsByTagName(标签名)
④类名：document.getElementsByClassName(类名)
⑤name属性：document.getElementsByName(name属性的值)
⑥关系：获取所有子标签→ 父.childern
获取第一个子标签→ 父.fristElementChild
获取最后一个子标签→ 父.lastElementChild
获取父标签→ 子.parentElement
获取上个兄弟标签→ 兄弟.previousElemenSibling
获取下一个兄弟标签→ 兄弟.nextElementSibling
3.内容操作
①双标签内容：文本内容的获取是 标签.innerText ； 文本内容的设置是 标签.innerText = 值
带标签的内容的获取是 标签.innerHTML ； 带标签的内容的设置是 标签innerHTML=值
②表单元素内容 ： 获取 → 表单元素.value ； 设置 → 表单元素.value = 值
4.类名操作
获取 → 标签.className ； 设置 → 标签className = 值
5.样式操作
获取 → window.getComputedStyle(标签) → 返回所有css键值组成的对象
设置 → 标签.style.css键 = css值 ：① css键如果包含连字符，就使用小驼峰或中括号写法；②css值一定是个字符串；③一定是行内样式
6.属性操作
①设置属性：标签.setAttribute(键，值)
②获取属性：标签.getAttribute(键)
③删除属性：标签.removeAttribute(键)
获取到的标签其实都是对象，使用console.dir()可以输出对象的样子，既然是对象，就可以像对象一样进行属性操作。
7.节点操作
①创建节点：document.createElement(标签名)
②插入节点：给父的末尾追加一个字标签 → 父.appendChild(子)
给某个前面添加一个新的子 → 父.insertBefore(新的子，旧的子)
③替换节点：父.replaceChild(新的子，旧的子)
④复制节点：节点.cloneNode(true)
⑤删除节点：父.removeChild(子)
⑥获取标签位置：标签.offsetLeft ； 标签.offsetTop
⑦获取标签大小：包含边框的有：标签.offsetWidth ； 标签.offsetHeight
不包含边框的有： 标签.clientWidth ； 标签.clientHeight
8.窗口大小
①包含滚动条的大小： window.innerWidth 、 window.innerHeight
②不包含滚动条的大小： document.documentElement.clientWidth、document.documentElement.clientHeight
③获取body大小：document.body.clientWidth、document.body.clientHeight
9.滚动过得距离
①有文档声明：document.documentElement.scrollTop、document.documentElement.scrollLeft
②没有文档声明：document.body.scrollTop、document.body.scrollLeft
③兼容写法：var t = document.documentElement.scrollTop || document.body.scrollTop、
document.documentElement.scrollTop = document.body.scrollTop = 值
④短路运算：利用&&和||根据判断两个数据选择一个赋值给变量。