DOM
1.添加/删除:
1.创建空元素：
var elem=document.createElement("标签名");
比如:var a=document.createElement("a");
2.设置关键属性：
比如：a.href="http://baidu.com";
3.将新元素添加到DOM树：3种：
在指定父元素末尾追加：parent.appendChild(elem);【document.body.appendChild("a")】
在当前子元素前插入：parent.insertBefor(elem,child);
替换现有子元素：parent.replaceChild(elem,child);
***优化：尽量减少操作DOM树的次数
为什么：没操作一次DOM树，就会导致重新layout和paint
原理：
html ->DOM Tree
↓
Remder Tree->***layout***->paint
↑ 计算每个元素
css ->COM 的绝对布局位置
如何：2种：
1.如同同时添加父元素和子元素，应该先在内存中，将所有子元素添加到父元素中，最后，再将父元素一次性添加到DOM Tree 。
2.如果同时添加多个平级子元素，应该先将所有子元素添加到文档片段中，再将文档片段一次性添加到DOM树
文档片段：内存中，临时保存一棵DOM子树的虚拟父元素对象
何时：今后只要添加多个平级元素时
如何：3步：
1.创建文档片段：
var frag=document.createDocumentFragment();
2.将子元素添加到文档片段中
frag.appendChild(child);
3.将文档片段添加到DOM Tree
parent.appendChild(frag);
强调：frag 不占用页面元素位置，将子元素添加到父元素后，自动释放！
删除：parent.removeChild(child)
child.parentNode.removeChild(child)
2.HTML DOM常用对象：
Image: 代表一个img元素
创建：var img=new Image();【只有Image,Option可以直接new】
select/option
select:
属性： .value获得当前选中项的值，如果当前选中项没有值,就用innerHTML代替
.selectedIndex 获得当前选中项的下标位置
.options 获得当前select下所有option的集合
.options.length获得select下option的个数
.length =>.options.length
固定套路:sel.length=0 =>sel.options.length=0
方法： .add(opt)=>appendChild(opt)
问题：.add不支持文档片段
.remove(i)
option:
创建：var opt=new Option(text,value);【text是option里的文本，value是传输出去的值】
属性：.text .value .index
table/...
table:管着行分组
添加： var thead=table.createTHead();
var tbody=table.createTBody();
var tfoot=table.createTFoot();
删除：table.deleteTHead();
table.deleteTFoot();
获取：table.tHead;
table.tFoot;
table.tBodies[i]
行分组：管行
添加：var tr=行分组.insertRow(i)
在i位置插入一个新行。原i位置的行向后挤压
固定套路：
1、末尾追加：.insertRow()
2、开头插入: .insertRow(0)
删除：行分组.deleteRow(i)
删除i位置的行。
强调：i，要求是在行分组内的下标【.rowIndex,专门获得tr在整个HTML里的下标。一般用table.deleteRow(tr.rowIndex)】
问题：行分组内的相对下标，无法自动获得
解决：table.deleteRow(tr.rowIndex)
tr.rowIndex可自动获得当前tr相对于整个表格的下标位置
table.deleteRow(i) 刚好需要相对于整个表格的下标
两者绝配
form/...表单
form:
获取：var form=document.forms[i/id/name];
属性： .elements 包含所有表单元素的集合
包括：input textarea button select
.elements.length 获得表单中表单元素的个数
form.length==> form.elements.length
固定套路: 获得结尾的按钮:
var btn=form.elements[form.length-n]【form.elements[form.length-1]获取最后一个，往往是提交按钮】
方法: form.submit() //在程序中手动提交表单
表单元素:
获取: var 表单元素= form.elements[i/id/name]
【更简单】如果表单元素有name属性，则: form.name属性值【var elem=form.name】
方法: elem.focus() 让当前表单获得焦点
elem.blur() 让表单元素失去焦点
BOM: Browser Object Model
1.BOM模型
什么是: 专门操作浏览器窗口或软件的API
没有标准!
包括
window: 2个角色:
1. 代替ES中的GLOBAL充当全局作用域对象
2. 保存所有内置，全局的API和对象【封装所有BOM的API】
包括：history location document navigator screen event
属性: 文档显示区大小: 浏览器窗口中专门显示网页的区域
/*window.*/innerWidth,
/*window.*/innerHeight
功能: 打开和关闭窗口:
打开窗口: /*window.*/open("url","target")
关闭当前窗口：window.close();
4种:
1. 在当前窗口打开，可后退
HTML: <a href="url" target="_self">
js: open("url","_self ")
2. 在当前窗口打开，禁止后退
js: location.replace("新url")
用新的url代替history中当前地址
3. 在新窗口打开，可打开多个
HTML: <a href="url" target="_blank">
js: open("url","_blank ")
4. 在新窗口打开，只能打开一个
HTML: <a href="url" target="自定义的窗口名【name】">
js:open("url","自定义的窗口名")
原理: target属性其实是为新窗口指定内存中唯一的窗口名【name】
浏览器规定，同一时刻，同名窗口只能打开一个
后打开的会覆盖先打开的
预定义name:
_self 自动使用当前窗口的name
_blank 不指定窗口名, 每打开一个窗口，浏览器会自动随机生成内部窗口名
关闭窗口: /*window.*/close();
history: 保存当前窗口打开后，成功访问过的url的历史记录栈
不允许修改history内容!
只能三个操作: 【API:history.go(n)】
前进 history.go(1)，
后退 history.go(-1), history.go(-2)，
刷新 history.go(0)
location:
什么是: 保存当前窗口正在打开的url地址的对象
属性:
.href: 获取或设置完整的url地址
.protocol: 协议
.host: 主机名+端口号
.hostname: 主机名
.port: 端口号
.pathname: 相对路径
.search: 查询字符串参数l]\}
.hash: 锚点地址
鄙视: 将search转化为对象形式:
方法:
1. 在当前窗口打开，可后退:
location.assign("url") => location.href="url"=>location="url"
2. 在当前窗口打开，禁止后退:
location.replace("新url")
3. 刷新:
普通刷新: 优先从缓存中获取资源，缓存没有或过期，才去服务器找。
f5
history.go(0)
location.reload()
强制刷新: 无论有没有缓存，都强制从服务器获取新资源！
location.reload(true)