总结：增删改查+事件绑定
1. 查找元素: 4种:
(1). 不需要查找，就可以直接获得的元素: 4种:
a. <html> document.documentElement
文档/网页 元素
b. <head> document.head
头
c. <body> document.body
身体
d. <form> document.forms[i或id]
表单
除此之外，其余元素都需要先找到！才能使用！
(2). 按元素身上的HTML特征查找: 4种
a. 按id查找一个元素:
var 一个元素对象=document.getElementById("id名")
获得一个元素按id
如果返回一个元素的函数，找不到元素，返回null
所以，判断是否按id找到了元素，应该用“元素!=null” 作为判断条件
b. 按标签名查找多个元素:
var 类数组对象=任意父元素.getElementsByTagName("标签名")
获得多个元素按标签名
c. 按class名查找多个元素:
var 类数组对象=任意父元素.getElementsByClassName("class名")
获得多个元素按class名
d. 按name名查找多个表单元素:
var 类数组对象=document.getElementsByName("name名")
获得多个元素按name名
如果返回类数组对象的函数，找不到元素，返回空类数组对象
所以，判断是否按标签名、class名、name找到了元素，应该用“集合.length>0” 作为判断条件
(3). 按节点间关系查找: 2大类关系，6个属性
a. 父子关系:
1). 元素.parentNode 获得元素的父元素
父级 节点
2). 元素.children 获得元素下的所有直接子元素
孩子们
children返回的也是类数组对象
3). 元素.firstElementChild 获得元素下的第一个直接子元素
第一个元素 孩子
4). 元素.lastElementChild 获得元素下的最后一个直接子元素
最后一个元素孩子
b. 兄弟关系:
1). 元素.previousElementSibling 获得前一个兄弟元素
前一个 元素 兄弟
2). 元素.nextElementSibling 获得后一个兄弟元素
后一个 元素 兄弟
(4). 按选择器查找: 2个
a. 只查找一个符合条件的元素
var 一个元素对象=任意父元素.querySelector("选择器")
查找 (按)选择器 (一个元素)
如果找不到返回null，所以判断是否找到，可用"元素!=null"当条件
b. 查找多个符合条件的元素
var 类数组对象=任意父元素.querySelectorAll("选择器")
查找 (按)选择器 所有(符合条件的元素)
如果找不到返回空类数组对象，所以判断是否找到，可用"类数组对象.length>0"当条件
总结: 如果只靠一个条件就可找到想要的元素时，首选按HTML特征查找。如果查找条件复杂，就用按选择器查找。如果已经获得一个元素，找周围附近的元素时，首选按节点间关系查找。
2. 修改: 一个元素身上有三样东西可以修改
(1). 内容: 三种
a. 如果获取或修改元素的原始HTML内容，几乎都首选innerHTML
b. 只有在希望获得纯文本内容，去掉内嵌的标签和特殊符号时，才被迫选择textContent
c. 如果获取或修改表单元素的值，都用.value
(2). 属性: 3种
a. 字符串类型的HTML标准属性: 2种
1). 核心DOM4个函数:
元素.getAttribute("属性名")
获得属性值
元素.setAttribute("属性名","属性值")
修改属性值
元素.removeAttribute("属性名")
移除属性
元素.hasAttribute("属性名")
(判断是否)有(这个)属性
2). HTML DOM简写: ——首选
获得属性值: 元素.属性名
修改属性值: 元素.属性名="新值"
移除属性: 元素.属性名=""
(判断是否)有(这个)属性: 元素.属性名!==""
b. bool类型的HTML标准属性:
1). 不能用核心DOM 4个函数来访问
2). 只能用"元素.属性名"方式来访问，且值都为bool类型的true/false
c. 获取或修改自定义扩展属性的值:
1). 定义自定义扩展属性: <元素 data-自定义属性名="属性值">
2). 获取或修改自定义扩展属性的值:
i. 获取: 元素.getAttribute("data-自定义属性名")
或 元素.dataset.自定义属性名
ii. 修改: 元素.setAttribute("data-自定义属性名","属性值")
或 元素.dataset.自定义属性=属性值
d. 查找带有自定义属性的元素: 属性选择器:
document.querySelector或querySelectorAll("[data-自定义属性名=属性值]")
(3). 样式:
a. 修改元素的内联样式: 元素.style.css属性="属性值"
b. 获取元素的完整样式: 2步
1). var style=getComputedStyle(元素对象)
2). style.css属性
强调: 计算后的样式虽然完整包含所有css属性，但是都是只读的，禁止通过计算后的style对象，修改任何css属性
c. 批量修改元素的样式:
1). 元素.style.cssText="css属性:属性值; css属性:属性值; ..."
2). 元素.className="class名"
3. 添加删除:
(1). 添加元素: 3步
a. 创建新的空元素: var a=document.createElement("a")
<a></a>
b. 为新元素添加关键属性:
a.href="http://tmooc.cn"
a.innerHTML="go to tmooc"
<a href="http://tmooc.cn"> go to tmooc </a>
c. 将新元素添加到DOM树上的指定父元素下: 3种:
1). 末尾追加: 父元素.appendChild(新元素)
追加一个孩子
2). 插入到现有子元素之前: 父元素.insertBefore(新元素, 现有子元素)
插入到xxx前
3). 替换现有子元素: 父元素.replaceChild(新元素, 现有子元素)
替换一个孩子
(2). 删除: 父元素.removeChild(要删除的元素对象)
4. 事件绑定:
(1). 在元素上 当 发生事件时，自动执行=后的函数
元素 .on事件名 = function(){
this->当前正在触发事件的元素对象
}
(2). 为一个元素的一个事件绑定多个事件处理函数
元素.addEventListener("事件名", 事件处理函数对象)
元素.removeEventListener("事件名", 原事件处理函数对象)
HTML DOM常用简写：
1. var img=new Image();
2. select:
(1). select.options
(2). var option=new Option(内容,值);
3. table:
(1). table管着行分组:
a. 创建行分组: table.createTHead() table.createTFoot() table.createTBody()
b. 删除行分组: table.deleteTHead() table.deleteTFoot()
c. 获取行分组: table.tHead table.tFoot table.tBodies[i]
(2). 行分组管着行:
a. 创建行: 行分组.insertRow() 或insertRow(0) 或insertRow(i)
b. 删除行: table.deleteRow(tr.rowIndex)
c. 获取行: 行分组.rows[i]
(3). 行管着格:
a. 创建格: tr.insertCell()
b. 删除格: tr.deleteCell()
c. 获取格: tr.cells[i]
4. form:
form.elements[i 或 id 或 name]
form.name
form.length
表单元素.focus()
BOM
1. window:
(1). 获得窗口大小:
a. 完整窗口大小: window.outerHeight window.outerWidth
b. 仅文档显示区范围大小: window.innerHeight window.innerWidth
(2). 控制窗口中网页的滚动:
a. window.scrollTo(0, 滚动到的位置)
b. window.scrollBy(0, 滚动过的位置)
(3). 打开和关闭窗口:window.open() window.close()
2. 打开新链接:4种方式:
(1). 在当前窗口打开新链接，可后退
a. html: <a href="http://tmooc.cn" target="_self">
b. js: window.open("http://tmooc.cn", "_self")
或
location.href=" http://tmooc.cn"
(2). 在当前窗口打开新链接，禁止后退
a. js: location.replace("新url")
(3). 在新窗口打开新链接，可同时打开多个
a. html: <a href="http://tmooc.cn" target="_blank">
b. js: window.open("http://tmooc.cn", "_blank")
(4). 在新窗口打开新链接，同一个链接只能打开一个窗口
a. html: <a href="http://tmooc.cn" target="自定义窗口名">
b. js: window.open("http://tmooc.cn", "自定义窗口名")
3. history: history.go(1) 前进一步
history.go(-1) 后退一步
history.go(-2) 后退两步
history.go(0) 刷新页面
4. location:
(1). 分段获得当前浏览器窗口正在打开的url的各个部分
a. location.href 完整的url
b. locaiton.protocol 协议
c. location.host 主机名+端口号
d. location.hostname 主机名
e. location.port 端口号
f. location.pathname 相对路径名
g. location.search ?查询字符串
h. location.hash #锚点地址
(2). 执行一些操作
a. 也能实现在当前窗口打开,可后退:
location.href="新url"
b. 在当前窗口打开，禁止后退:
location.replace("新url")
c. 刷新: location.reload();
5. navigator:
(1). 判断浏览器是否安装某个插件：
navigator.plugins["完整插件名"]!==undefined
(2). 获得浏览器的名称和版本号
navigator.userAgent
原文：https://www.cnblogs.com/codexlx/p/12463018.html