添加/删除-HTML DOM 常用对象 -BOM-打开和关闭窗口- history-location

1. 添加/删除

3步:

1. 添加一个空元素

var a=document.createElement("a");

<a></a>

2. 定义元素的关键属性

a.innerHTML="文本";

a.href="url";

<a href="url">文本</a>

3. 将新元素添加到DOM树

parent.appendChild(a)  在parent下子元素末尾追加a

parent.insertBefore(a,child)  将a插入到child之前

parent.replaceChild(a,child)  用a替换child

优化: 尽量减少操作DOM树的次数

为什么: 只要修改DOM树，就会导致重排重绘

减少修改DOM树的次数，就是减少重排重绘的次数

网页加载过程:

html -> DOM Tree

↓

Render Tree -> layout -> paint

↑        重排    重绘

css -> cssRules

如何: 2种:

1. 同时添加父元素和子元素:

先在内存中，将所有子元素添加到父元素上

最后，再一次性将父元素添加到DOM树上

2. 如果父元素已经在页面上了，添加多个平级子元素:

使用文档片段:

什么是: 内存中临时保存多个平级子元素的虚拟父元素

何时: 添加多个平级子元素

如何: 3步:

1. 创建文档片段:

var frag=document.createDocumentFragment();

2. 将子元素临时添加到frag中

frag.appendChild(child);

3. 将文档片段整体添加到DOM 树

parent.appendChild(frag)

删除: parent.removeChild(child)

child.parentNode.removeChild(child)

2. HTML DOM常用对象:

Image: 代表一个<img元素

var img=new Image();

Select: 代表一个<select 元素

属性: .selectedIndex  获得当前选中项的下标

.value  获得当前选中项的值

如果option没有value，就用innerHTML代替

.options  获得当前select下所有option对象的集合

.options.length 获得select下所有option的个数

.length => .options.length

固定用法: 清空select下所有option： .length=0

方法: .add(option) 不支持文档片段

.remove(i)

Option: 代表一个<option元素

创建: var opt=new Option(text,value);

属性:

Table: 管着行分组:

1. 创建行分组:

var thead=table.createTHead();

创建thead，并同时追加到table

.createTBody()

.createTFoot();

2. 删除行分组: table.deleteTHead()

.deleteTFoot();

3. 获取行分组: table.tHead

.tFoot

.tBodies[i]

行分组管着行:

1. 添加新行: var tr=行分组.insertRow(i);

在行分组中i位置，添加一个新行

固定用法:

1. 末尾追加: .insertRow()

2. 开头插入: .insertRow(0)

2. 删除现有行: 行分组.deleteRow(i)

强调: i必须是行分组内的相对下标位置。

问题: tr.rowIndex 可获得行下标，但是相对整个table中所有tr的下标位置。和行分组的deleteRow要求不一致

解决: 不要用行分组删除行，而用:

table.deleteRow(tr.rowIndex)

3. 获取行: 行分组.rows[i]

行管着格:

1. 添加格: var td= tr.insertCell(i)

2. 删除格: tr.deleteCell(i);

3. 获取格: tr.cells[i]

Form元素: 代表页面上一个<form元素

获取: var form=document.forms[i/id];

属性: .elements  获得所有表单元素: input select textarea button

.elements.length 获得表单元素的个数

.length => .elements.length

方法:  .submit()  手动提交表单

如何手动提交表单:

1. 将提交按钮改成普通的按钮

2. 为提交按钮绑定单击事件

3. 在单击事件中，再次调用验证方法。只有验证通过，才手动调用form.submit()。

表单元素:

获取: var elem=form.elemens[i/id/name];

更简化: 如果表单元素有name属性: form.name

方法: elem.focus()  让当前表单元素获得焦点

elem.blur() 让当前表单元素失去焦点

3. 什么是BOM: Browser Object Model

专门操作浏览器窗口的API，没有标准

包括:

window 2个角色:

1. 代替Global充当全局作用域对象

2. 封装所有ES,DOM,BOM的API

包括:

history

location

navigator

document

screen

event

4. 打开和关闭窗口:

<a href="url" target="_blank"

/*window.*/open("url","_blank|_self")

/*window.*/close();

限制只打开一个: open("url","自定义窗口名")

原理: 每个窗口在内存中都有唯一的name属性，唯一标识当前窗口

浏览器规定，同一name属性的窗口只能打开一个

后打开的会将先打开的同名窗口覆盖

如何设置自定义name属性:

<a href="url" target="自定义窗口名"

open("url","自定义窗口名")

预定义name:

_self: 用当前窗口自己的name打开新窗口，新窗口覆盖当前旧窗口

_blank: 不指定窗口的name。打开时，会随机分配窗口名。几乎不重复。

5. history:

什么是: 保存当前窗口打开后，成功访问过的url的历史记录栈。

API: history.go(n)

比如: 前进一步 history.go(1)

后退一步 history.go(-1)

如果后退一步不管用，可后退两步history.go(-2)

刷新 history.go(0)

6. location:

什么是: 代表当前窗口正在打开的url对象

属性:

.href 获取并修改当前窗口打开的url地址

在当前窗口打开新链接，可以后退:

location.href="新url"

.protocol: 协议

.host: 主机名+端口号

.hostname: 仅主机名

.port: 端口号

.pathname: 相对路径

.hash: #锚点地址

.search: ?查询字符串

鄙视: "?uname=zhangdong&upwd=123456"

转为对象: var obj={uname:zhangdong,upwd:123456}

obj.uname   obj.upwd

API:

.assign("url") => location.href="url"

.replace("url")  用新url代替正在浏览的url——禁止后退

.reload() => 重新加载当前页面

2种刷新:

1. 普通刷新: 优先从本地缓存中获取文件，除非本地缓存没有或过期，才重新请求服务器

history.go(0)

F5

location.reload()

2. 强制刷新: 跳过本地缓存，始终请求服务器上的新文件

location.reload(true)

force

7. navigator: 保存浏览器配置信息的对象

cookieEnabled: 判断浏览器是否启用cookie

什么是cookie: 客户端本地硬盘持久存储用户私密信息的小文件

为什么: 内存中的数据都是临时的，一旦程序关闭或关机，内存释放，数据丢失。

何时: 只要希望在客户端持久存储私密数据时

plugins: 包含浏览器安装的插件信息的集合

什么是插件: 给浏览器添加新功能的小软件

如何判断: navigator.plugins["插件名"]!==undefined