1.追加/削除
1.追加：3つのステップ：
1.空の要素を作成する
var a = document.createElement（ "a"）;
要素を作成する
強調：ドキュメントでのみ呼び出すことができます
質問：<a> </a>
2.空の要素のキー属性とコンテンツを追加する
a.href = "http://tmooc.cn"
a.innerHTML = "go to tmooc"
<a href="http://tmooc.cn"> tmoocに移動</a>
問題：それでもページにが表示されない
理由：Webページのレイアウトと描画はDOMツリーに基づいています。新しく作成された要素オブジェクトは、まだDOMツリーにロードされていません。レイアウトエンジンと描画エンジンは、新しい要素があることを認識していないため、ページに描画されません。3. 空の要素をDOMツリーにマウントします。
3タイプ：
1.親要素の下にあるすべての子要素の最後に追加します
親element.appendChild（新しい要素）
追加
2.親要素の下の子要素の前に挿入します
親要素。InsertBefore（新しい要素、既存の要素）
挿入する前に
3.親要素の下にある既存の古い要素を置き換えます
親element.replaceChild（新しい要素、古い要素）
交換する
強調：新しい要素をDOMツリーにぶら下げるときは、最初にその親要素を見つける必要があります。親要素は関数を呼び出して、新しい要素を独自の子要素に追加します。
2.最適化：DOMツリーでの操作の数を最小限に抑える
理由：DOMツリーが一度変更されている限り、再配置と再描画が発生します
頻繁な再配置と再描画が深刻な場合：画面が点滅します
解決する：
1.親要素と子要素を同時に追加する場合は、まずメモリ内の親要素に子要素を追加し、最後に一度だけ再配置して再描画して、親要素全体をDOMツリーに追加する必要があります。
2.親要素が既にページ上にある場合は、複数レベルの子要素を追加します。一時的な親を見つける必要があります：ドキュメントフラグメントオブジェクト。最初に、メモリ内のドキュメントフラグメントオブジェクトに複数のフラットサブエレメントを追加し、次にドキュメントフラグメントオブジェクト全体を一度にDOMツリーに追加します-再配置と再描画も1回だけ
什么是文档片段: 内存中临时保存多个平级子元素的虚拟父元素
何时: 只要父元素已经在页面上了，要添加多个平级子元素
如何: 3步:
1. 创建文档片段
var frag=
document.createDocumentFragment();
创建 文档 片段
2. 将子元素添加到文档片段中
frag对象是一个虚拟的父元素，所以，用法和真实父元素完全一样。
比如: frag.appendChild(新元素)
3. 将文档片段对象一次性添加到DOM树
真实父元素.appendChild(frag)
问题: 文档片段会不会成为页面上实际的元素？
答: 不会，文档片段在将子元素添加到DOM树后，就自动释放。不会成为实际页面元素。
3. 删除: 父元素.removeChild(子元素)
2. HTML DOM常用对象:
HTML DOM对部分常用的复杂的元素对象，提供了一些简写的函数和属性:
1. Image对象：代表页面上一个<img>元素
唯一的简化: 创建<img>元素: var img=new Image()
代替: var img=document.createElement("img");
强调: new Image()只创建<img>元素，不负责挂载。还需要用多一句appendChild()。。。将<img>元素挂载到DOM树上。
2. Select/Option:
1. Select 对象: 代表页面上一个<select>元素
属性:
.selectedIndex 获得当前选中的option在整个select下的位置下标。
.value 获得当前选中的option的value属性值。如果option上没有value属性，则返回option的内容文本代替。
.options 获得当前select下所有option对象的集合。
.options.length 获得当前select下共有几个option对象
.length == .options.length 也可以获得当前select下共有几个option对象
方法:
.add(option) 向select下添加一个option对象
.remove(i) 移除i位置的option对象。
2. Option对象: 代表页面上一个<option>元素
唯一的简化: 创建<option>元素:
var opt=new Option(内容文本, value属性值)
相当于:
var opt=
document.createElement("option")
opt.innerHTML=内容文本;
opt.value=value属性值;
3. Table/...:
Table从上到下完整结构4级: table 行分组 tr td
Table对象采用逐级管理的方式:
Table管着行分组：
添加行分组:
var thead=table.createTHead();
一句话顶两句话
1. var thead=
document.createElement("thead")
2. table.appendChild(thead)
var tbody=table.createTBody();
var tfoot=table.createTFoot();
删除行分组:
table.deleteTHead();
table.deleteTFoot();
获取行分组:
table.tHead
table.tFoot
table.tBodies[0]
|-tBodies:
[
|-tbody
|-tbody
]
因为HTML中规定，一个table下可以有多个tbody！所以，tbody对象都是放在table对象的tBodies集合中管理的，并不直接隶属于table。
行分组管着行：
添加行: var tr=行分组.insertRow(i)
在当前行分组内i位置，添加一个新行
等于以前两句话:
var tr=
document.createElement("tr")
行分组.appendChild(tr)
强调: 如果i位置已经有行，则现有行向后顺移一行。新行插入才当前i位置
固定套路: 2个
1. 末尾追加一行:
var tr=行分组.insertRow()
2. 开头插入一行:
var tr=行分组.insertRow(0)
删除行: 行分组.deleteRow(i)
删除行分组中的第i行
问题: i 要求必须是当前行在行分组内的相对下标位置。行在行分组内的相对位置，只能靠肉眼判断，无法用程序自动获得！
其实: 每个行对象tr，都有一个.rowIndex属性，自动获得这一行在整个表中的下标位置
问题2: 行分组.deleteRow()需要一个行分组内的相对下标。而tr.rowIndex自动获得的是行在整个表中的绝对下标位置。很有可能错位！因为表格中很可能有表头行。所有tr.rowIndex不能用在行分组.deleteRow()中
解决: 今后只要删除行:
table.deleteRow(tr.rowIndex)
因为主语换成table后，deleteRow需要的，刚好是行在table内的位置。而tr.rowIndex获得的刚好也是行在table中的位置。两者就配对儿了。
获取行: 行分组.rows[i]
行分组中将所有行对象，都保存在一个rows集合中管理。
行管着格：
添加格: var td=tr.insertCell(i)
格
一句话顶两句话:
var td=
document.createElement("td")
tr.appendChild(td);
固定套路: 行末尾追加一格:
var td=tr.insertCell()
删除格: tr.deleteCell()
获取格: tr.cells[i]
tr将内部所有td元素对象，都集中保存在一个cells集合中，统一管理。
补: 确认框:
什么是确认框: 有两个选项的对话框
如何:
var bool=confirm("消息提示")
确认
如果用户点确定，就返回true
如果用户点取消，就返回false
4. Form/表单元素
Form对象:
获取: document对象已经将当前页面中所有的form对象收集在了forms数组中。
document.forms[i 或 id]
属性:
.elements 获得表单中所有表单元素对象的集合。
强调: .elements中只能获得表单元素
.elements.length 可获得表单中表单元素的个数
.length == .elements.length 获得表单中表单元素的个数
表单元素对象:
获取:
不带name的表单元素:
form.elements[i 或 id 或 name]
有name的表单元素:
form.name名
方法: 表单元素.focus()
让当前表单元素自动获得焦点
3. BOM: Browser Object Model
什么是: 专门操作或访问浏览器软件的一批函数和对象
何时: 只要想获取浏览器软件的信息，或操作浏览器窗口时
如何:
包括:
1个最大的对象: window
3个角色
1. 代替ECMAScript中的global充当全局作用域对象。
所以，所有我们自己声明的全局变量和全局函数默认都是在window中。
2. 包含了所有ECMAScript，DOM和BOM的函数和对象:
比如: window.Array
window.document
window.alert
3. 代表着当前正在打开的浏览器窗口
比如: 获取浏览器窗口的大小:
1. 完整大小:
window.outerWidth
window.outerHeight
2. 文档显示区大小:
window.innerWidth
window.innerHeight
打开和关闭窗口:
1. 打开新窗口: 4种需求:
1. 在当前窗口打开，可后退:
html: <a href="url" target="_self">
js: window.open("url", "_self")
2. 在当前窗口打开，禁止后退:
js: location.replace("新url")
3. 在新窗口打开，可打开多个:
html: <a href="url" target="_blank">
js: window.open("url", "_blank")
4. 在新窗口打开，只能打开一个:
html: <a href="url" target="自定义窗口名">
js: window.open("url", "自定义窗口名")
原理:
1. 在浏览器内存中，每个窗口都有一个name属性，唯一标识一个窗口
2. a的target属性和open()的第二个参数，其实是在给新窗口起名字(name属性)
3. 浏览器规定: 同名的窗口，只能开一个！后打开的同名窗口，会覆盖先打开的同名窗口。
有两个预定义的特殊意义的窗口名：
_self: 自动获得当前窗口的name名给新窗口——结果: 新窗口覆盖旧窗口
_blank: 空白，不给新窗口指定窗口名。而是靠浏览器随机生成！——结果: 新窗口的名字，一定不重复！即使打开多个窗口，也不会覆盖。
总结: 优化:
1. 查找:
如果只要一个条件就可以找到元素时:
首先按HTML特征查找: getElementsByXXX
如果查找条件复杂时: 用选择器查找
querySelector()和querySelectorAll()
2. 尽量减少操作DOM树的次数
1. 添加删除:
如果同时添加父元素和子元素，应该先在内存中将子元素添加到父元素中。最后，再将父元素一次性添加到DOM树
如果父元素已经在页面上了，应该先在内存中创建文档片段对象，将所有平级子元素先添加到文档片段中。最后，再将文档片段一次性添加到父元素上
2. 修改时: 能一次修改完成的，就不分两句话修改！
比如: 元素.style.width="200px"
元素.style.height="100px"
其实: 元素.style.cssText=`width:200px; height:100px`;