BOM
BOM是browser object model的缩写,简称浏览器对象模型。BOM的核心是window,它是一个浏览器的实例,表示浏览器中打开的窗口。浏览器对象模型如图所示:多窗口控制
打开窗口:open中feature中的选项。浏览器(navigator)对象
navigator对象包含有关浏览器的信息,通常用于检验浏览器与操作系统的版本。屏幕(screen)对象
screen对象包含有关客户端显示屏幕的信息。屏幕对象是JavaScript运行时自动产生的对象。地址(location)对象
location对象包含有关当前 URL的信息。历史(history)对象
window的history属性是一个history对象,history对象保存这用户上网的历史记录,从窗口被打开的那一刻算起,历史对象常用方法如表所示。访问HTMLDOM对象
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。文档对象(document)是浏览器窗口(window)对象的一个主要部分,包含了网页显示的各个元素对象。整个文档是一个文档节点;
每个HTML标签是一个元素节点;
包含在HTML元素中的文本是文本节点;
每一个HTML属性是一个属性节点;
注释属于注释节点。
元素节点(element node)
元素节点是构建DOM树形结构的基础,可以作为非终端节点,可以有自己的属性节点,下级元素节点和下级文本节点,下级元素节点实现了DOM树纵向扩展,同级元素节点实现了DOM树横向扩展。元素节点在没有任何节点的情况下,它就是终端节点。元素节点的节点类型号为1。
属性节点(attribute node)
属性节点是一个键值对,键是属性名,值是属性值,属性节点不能成为独立节点,它必须从属于元素节点,用来描述元素节点的属性,充实元素节点的内容,因此,可以说属性节点不是节点,在DOM的操作中使用的方法也与其他节点不同。属性节点的节点类型号是2。
文本节点(text node)
文本节点表示一段文本,只能作为独立的终端节点,没有子节点和属性节点。文本节点的节点类型号是3。
注释节点(text node)
注释节点是用来说明所用的XHTML或者HTML是什么版本,或用来添加注释文本的。注释节点的节点类型号是8。
获取文档对象中元素对象的一般方法
getElementByld方法:可以根据标签对象的id属性值得到唯一的标签对象,如果页面上含有多个相同id的节点,那么直返回第一个节点。标签对象的id尽可能使唯一的。语法:document.getElementByld("元素标识名")
getElementsByTagName方法:该方法接受一个参数,即要获取元素的标签名。返回一个HTMLCollection对象,包含所有符合查找标签名的元素,这种方式是通过元素标签名得到一组元素对象数组。语法:document.getElementsByTagName("元素标签名")或 节点对象.getElementsByTagName("元素标签名")
getElementsByName方法:可以根据标签对象的name属性值得到名称相同的一组标签对象,这里标签对象的name可以相同,该方法得到的是标签对象数组,访问其中某个标签对象要根据标签对象在HTML文档中的相对次序决定其下标。语法:document.getElemetsByName("元素名称")
getElementsByClassName方法:接收一个参数,即一个 包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。
特殊集合:除了属性和方法之外,document对象还有一些特殊的集合。这些集合都是HTMLCollection对象,为访问文档常用的部分提供快捷方式。
document.anchors:文档中所有带name特性的<a>元素
document.forms:文档中所有<form>元素
document.images:文档中所有<img>元素
document.links:文档中所有带href特性的<a>元素
DOM对象节点的创建和修改
创建节点:通过document内置对象(也是DOM顶层对象)的方法创建不同类型DOM节点对象。createElement方法:创建新的元素节点,返回对新节点的对象的引用。其中element参数为新节点的标签名。createTextNode方法:创建新的文本节点,返回对新节点的对象引用。其中string参数为新节点的文本。createAttribute方法:创建新的属性节点,返回对新节点的对象引用。其中name参数为新节点的属性名。
添加节点:创建节点仅仅是在内存中产生节点,该节点放在什么位置,作为那个节点的子节点,无法得知,必须要学回添加节点的方法,这些方法是已有节点对象的方法,新节点是方法的参数,新节点是已有节点对象的子节点。appendChild方法:添加新节点到方法所属节点的尾部。该方法适用于元素节点,文本节点的添加。setAttributeNode方法:添加新属性节点到方法所属节点的属性集合中。insertBefore方法:将新节点插入到相对节点的前面,最为方法所属节点的子节点。
删除节点:removeChild(node)方法是删除节点node。该方法的所属节点对象是node的父节点。
替换节点:replaceChild(newChild,oldChild) 方法是新节点newChild替换原节点oldChild。该方法的所属节点对象是node的父节点。
复制节点:cloneNode(bool)方法赋值一个节点,返回赋值后的节点引用。bool参数为布尔值,true/false表示是/否克隆该节点所有的子节点。