7th week :DOM BOM
-
DOM(文档对象模型(Document Object Model))
DOM
-
核心 DOM - 针对任何结构化文档的标准模型
-
XML DOM - 针对 XML 文档的标准模型
-
HTML DOM - 针对 HTML 文档的标准模型
XML DOM
-
用于 XML 的标准对象模型
-
用于 XML 的标准编程接口
-
中立于平台和语言
-
W3C 标准
HTML DOM
-
HTML 的标准对象模型
-
HTML 的标准编程接口
-
W3C 标准
1级DOM
2级DOM
3级DOM
0级DOM
DOM操作应用
·创建、插入和删除DOM元素(this的使用)
创建:createElement() ,之后添加 oUl.appendChild(oLi); 格式:父级.appendChild(子节点);
插入:父级.appendChild(子节点) ,父级.insertBefore(子节点,在谁之前插入)
IE 有兼容性问题 ,联合两个插入方法用if判断解决
删除:removeChild(),
·文档碎片
创建文档碎片:createDocumentFragment();
DOM操作应用(高级)
·表格应用
<thead>表头, <tbody>表格的内容,便捷操作:
getElementsByTagName('tbody')[0] = tBodies[0]
getElementsByTagName('tr')[0] = rows[0]
getElementsByTagName('td')[0] = cells[0]
tBodies是数组 、一个表格只能有一个表头tHead表尾tFoot
·表格搜索:
忽略大小写搜索:toLowerCase() :转成全小写的形式
模糊搜索:search(),找到就返回字符串出现的位置,没找到返回-1
关键字搜索:split()
筛选:先让所有的display为none隐藏起来,符合条件display就变成block显示出来
·表格排序
appendChild()的使用:1.先把元素从原有的父级上删掉 2.添加到新的父级
sort()的使用(数组排序)
BOM
概念:BOM是浏览器对象模型,是Bowser Object Model 的简称,就是 浏览器 工具库 说明书!
Window对象
Window 对象的角色:
(a)javascript访问浏览器的窗口的一个接口(入口);
(b)ECMAScript中的Global对象,全局对象。
全局对象:就是顶层对象,顶层对象可以理解为CEO。其他的一切全局变量,都是window对象的下属。
注意对于全局变量,我们可以省略window
Document对象
通过 document 变量引用,我们所有的网页内容都是通过这个Document对象来进行管理的。
frames
框架集,类似一个数组,可以通过frames[索引号](frames[0])或frames[框架名称],来获取指定的框架。
History对象
通过 history 变量可以引用,对于在当前窗口中,我们所访问的所有页面,都会被记录在History对象中。通过这个对象,我们可以很容易的跳转到我们之前所浏览的页面中。
history.go(参数); //参数可以是数字可以是字符串
可以用另外两个方法来替代go方法
(1)history.back();
(2)history.forward();
history.length; 可以获取浏览的历史记录的数量
Location对象
通过变量 location 引用,location对象可以帮助我们操作url并提供了一下页面导航功能。
href属性 控制浏览器地址栏的内容
reload()方法 刷新页面,有可能会使用缓存(暂存!!!!)
reload(true) 刷新页面,不使用缓存(绝对的!),重新请求服务器。
Navigator对象
通过navigator对象引用,Navigator对象可以帮助我们检测浏览器的信息以及浏览器所在的操作系统的信息。
appName 浏览器名称(最新的浏览器已经放弃这属性)
appVersion 浏览器版本(最新的浏览器已经放弃这属性)
Platform 操作系统(最新的浏览器已经放弃这属性)
userAgent 用户代理信息,通过该属性可以获取浏览器及操作系统信息
Screen对象
通过screen对象来引用,可以用它来获取当前屏幕的高度和宽度。
Width 获取屏幕的宽度;
Height 获取屏幕的高度;
h5 视口(view)