JavaScript之BOM和DOM总结

1、BOM

BOM(Browser Object Model) 即浏览器对象模型,主要是指一些浏览器内置对象如:window、location、navigator、screen、history等对象,用于完成一些操作浏览器的特定API。用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

  • BOM是browser object model的缩写,简称浏览器对象模型
  • BOM提供了独立于内容而与浏览器窗口进行交互的对象
  • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
  • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
  • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
  • BOM最初是Netscape浏览器标准的一部分

  BOM结构


从上图可以看出:DOM是属于BOM的一个属性。

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。

由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象。

1.2 BOM导图


1.3、window对象

window对象在浏览器中具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口。

Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

  • 对象方法如图1、2、3

图一:


图二:


图三:


1.4、history对象

history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转:

history.go(-1) 等价于history.back()
history.go(1) 等价于 history.forward()
history.go(1) //前进两页
history.go('jb51.net')

1.5、navigator对象

这个对象代表浏览器实例,其属性很多,但常用的不太多。如下:

navigator.userAgent:用户代理字符串,用于浏览器监测中、

navigator.plugins:浏览器插件数组,用于插件监测

navigator.registerContentHandler 注册处理程序,如提供RSS阅读器等在线处理程序。

1.6、location对象

location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

location.hash  #contents  返回url中的hash,如果不包含#后面的内容,则返回空字符串

location.host  best.cnblogs.com:80  返回服务器名称和端口号

location.port  80  返回端口号

location.hostname  best.cnblogs.com  返回服务器名称

location.href  http://best.cnblogs.com  返回当前加载页面的完整url

location.pathname  /index.html  返回url中的目录和文件名

location.protocol http  返回页面使用的协议

location.search  ?q=javascript  返回url中的查询字符串

改变浏览器的位置:location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录,用户不能回到前一个页面。

location.reload():重置当前页面,可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数

2、DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档。

DOM中,HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档,树的每个子节点表示HTML文档中的不同内容。

每个载入浏览器的 HTML 文档都会成为 Documen对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象.

  • 将HTML代码分解为DOM节点层次图:

DOM通过创建树来表示文档,描述了处理网页内容的方法和接口,从而使开发者对文档的内容和结构具有空前的控制力,用DOM API可以轻松地删除、添加和替换节点。

1)节点类型:

DOM规定文档中的每个成分都是一个节点(Node,HTML文档可以说由节点构成的集合,DOM节点有:

类型

描述

元素节点(Element

上图中<html><body><p>等都是元素节点,即标签。

 

 文本节点(Text

向用户展示的内容,如<li>...</li>中的JavaScriptDOMCSS等文本。

属性节点(Attr

元素属性,元素才有属性,如<a>标签的链接属性href="http://www.baidu.com"

 

 2) DOM节点三大属性(XML DOM

属性

描述

nodeName

元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。

 

nodeType

元素节点、属性节点、文本节点的nodeType值分别为123.

 

nodeValue

元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。

2.1 DOM 常见操作

Node为所有节点的父接口,其定义了一组公共的属性和方法,如下:

nodeType返回节点类型的数字值(1~12)
nodeName元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
nodeValue文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
parentNode父节点
parentElement父节点标签元素
childNodes所有子节点
children第一层子节点
firstChild第一个子节点,Node 对象形式
firstElementChild第一个子标签元素
lastChild最后一个子节点
lastElementChild最后一个子标签元素
previousSibling上一个兄弟节点
previousElementSibling上一个兄弟标签元素
nextSibling下一个兄弟节点
nextElementSibling下一个兄弟标签元素
childElementCount第一层子元素的个数(不包括文本节点和注释)
ownerDocument指向整个文档的文档节点

节点关系方法:

hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系

2.2 选择器

getElementById()

一个参数:元素标签的ID
getElementsByTagName()一个参数:元素标签名
getElementsByName()一个参数:name属性名
getElementsByClassName()一个参数:包含一个或多个类名的字符串

classList

返回所有类名的数组

  • add (添加)
  • contains (存在返回true,否则返回false)
  • remove(删除)
  • toggle(存在则删除,否则添加)
querySelector()接收CSS选择符,返回匹配到的第一个元素,没有则null
querySelectorAll()接收CSS选择符,返回一个数组,没有则返回[]

2.3、样式操作方法style

style.cssText可对style中的代码进行读写
style.item()返回给定位置的CSS属性的名称
style.lengthstyle代码块中参数个数
style.getPropertyValue()返回给定属性的字符串值
style.getPropertyPriority()检测给定属性是否设置了!important,设置了返回"important";否则返回空字符串
style.removeProperty()删除指定属性
style.setProperty()设置属性,可三个参数:设置属性名,设置属性值,是否设置为"important"(可不写或写"")

2.4元素节点ELEMENT

nodeName访问元素的标签名
tagName访问元素的标签名
createElement()创建节点
appendChild()末尾添加节点,并返回新增节点
insertBefore()参照节点之前插入节点,两个参数:要插入的节点和参照节点
insertAfter()参照节点之后插入节点,两个参数:要插入的节点和参照节点
replaceChild()替换节点,两个参数:要插入的节点和要替换的节点(被移除)
removeChild()移除节点
cloneNode()克隆,一个布尔值参数,true为深拷贝,false为浅拷贝
importNode()从文档中复制一个节点,两个参数:要复制的节点和布尔值(是否复制子节点)
insertAdjacentHTML()

插入文本,两个参数:插入的位置和要插入文本

  • "beforebegin",在该元素前插入
  • "afterbegin",在该元素第一个子元素前插入
  • "beforeend",在该元素最后一个子元素后面插入
  • "afterend",在该元素后插入

2.5、属性节点attributes

attributes

获取所有标签属性
getAttribute()获取指定标签属性
setAttribute()设置指定标签属
removeAttribute()移除指定标签属

var s = document.createAttribute("age")

s.nodeValue = "18"

创建age属性

设置属性值为18

2.6、文本节点TEXT

nnerText所有的纯文本内容,包括子标签中的文本
outerText与innerText类似
innerHTML所有子节点(包括元素、注释和文本节点)
outerHTML返回自身节点与所有子节点
textContent与innerText类似,返回的内容带样式
data文本内容
length文本长度
createTextNode()创建文本
normalize()删除文本与文本之间的空白
splitText()分割
appendData()追加
deleteData(offset,count)从offset指定的位置开始删除count个字符
insertData(offset,text)在offset指定的位置插入text
replaceData(offset,count,text)替换,从offset开始到offscount处的文本被text替换
substringData(offset,count)提取从ffset开始到offscount处的文本

2.7文档节点 Document

document.documentElement代表页面中的<html>元素
document.body代表页面中的<body>元素
document.doctype代表<!DOCTYPE>标签
document.head代表页面中的<head>元素
document.title代表<title>元素的文本,可修改
document.URL当前页面的URL地址
document.domain当前页面的域名
document.charset当前页面使用的字符集
document.defaultView返回当前 document对象所关联的 window 对象,没有返回 null
document.anchors文档中所有带name属性的<a>元素
document.links文档中所有带href属性的<a>元素
document.forms文档中所有的<form>元素
document.images文档中所有的<img>元素
document.readyState两个值:loading(正在加载文档)、complete(已经加载完文档)
document.compatMode

两个值:BackCompat:标准兼容模式关闭、CSS1Compat:标准兼容模式开启

write()、writeln()、

open()、close()

write()文本原样输出到屏幕、writeln()输出后加换行符、

open()清空内容并打开新文档、close()关闭当前文档,下次写是新文档

附:DOM基本操作思维导图



附: window对象思维导图
















展开阅读全文

没有更多推荐了,返回首页