js小结

Window对象

  表示整个浏览器窗口，不必表示其中包含的内容。还可用于移动或调整它表示的浏览器的大小。如果页面使用框架集合，每个框架都由它自己的window对象表示，存放在frames集合中。

可以用window.frames[0]或window.frames[“topFrame”]引用框架，也可以用top对象代替window对象。Window对象可省略。（曾经做了个

页面，非得top才能定位，不解）

Window另一个实例是parent。Parent对象指的是包含上一层框架，浏览器窗口自身被看作所有顶层框架的父框架。

1  窗口操作

moveBy(dx,dy)――把浏览器窗口相对移动。

moveBy(dx,dy)――移动浏览器窗口到（x，y）处。

resizeBy(dw,dh)――相对于当前窗口，调整dw，dh个象素。

resizeTo(w,h)―――绝对调整。

IE提供了window.screenlLeft和window.screenTop对象来判断窗口的位置，用document.body.offsetWidth和document.body.offsetHeight属性可以获取视口的大小，但不是标准属性。

2  导航和打开新窗口

   Window.open( “url”, “新窗口名称”, “left,top,height,width,  resizable, scrollable, toolbar,

              Status, location”)

3 系统对话框

  Alert()

confirm()返回一个boolean值

prompt(“显示给用户的文本”,默认文本) 函数值返回。

4 状态栏

  Status 和 defaultStatus属性

5 时间间隔和暂停

   setTimeout（“alert(‘hello world!’)”,1000）一秒之后显示一条警告

   可调用clearTimeout（iTimeoutID）取消，用在鼠标停在一个按钮上，一会出现帮助信息，如果移动太快则不显示。

   setInterval（）

   clearInterval（）；

6 历史

  Window.history.go(-1)         history.back()

  History.go(1)                history.forward()

 

Document对象

   这个对象的独特之处是它是既属于BOM又属于DOM。

属性：alinkColor 激活的链接的颜色 bgColor 页面的背景颜色

      fgColor    页面的文本颜色  lastModified 最后修改页面的日期

      linkColor   连接的颜色    referrer 浏览器历史中后退一个位置的URL

      title    URL     vlinkColor 访问过的链接的颜色

  document对象也有许多集合, anchors, applets, embeds, forms,images, links.

方法  write() writeln()  open()  close()

 

Location对象

  Location对象表示载入窗口的URL，此外，它还可以解析URL：该对象是window和document的属性。

 Hash－－如果URL包含＃，该方法将返回该符号之后的内容。

 Host――服务器的名字

 Hostname――通常等于host。

 Href ――完整的URL。

 Pathname――URL中主机名后的部分。

 Port――端口。

 Protocol――协议。

 Search――查询字符串。

Location.href()   ＝   location.assign() ＝   Location.replace()（不能后退）

Location.reload(false) 从缓存中重载，true为服务器端载入。默认false。

toString()，返回location.href的值。

 

Navigator对象

 该对象包含大量有关web浏览器的信息，是window对象的属性。

appCodeName, appName, appMinorVersion, appVersion,browserLanguage,

cookieEnabled, cpuClass javaEnabled(),language,mimeTypes,online

oscpu,platform,plugins,preference(),product,productSub,opsProfile,

securityPolicy,systemLanguage,taintEnabled(),userAgent,userLanguage,

userProfile,vendor,vendorSub.

Screen 对象

获取某些关于用户屏幕的信息。

availHeigh――窗口可以使用的屏幕的高度，包括操作系统元素（如windows工具栏）需要的空间。

availWidth――可以使用的屏幕的宽度

colorDepth――用户表示颜色的位数。大多32位。

Height――屏幕的高度，以象素计。

Width――屏幕的宽度。

 

 

DOM

Document――最顶层的节点，所有的其他节点都是附属于它的。

Document――DTD引用（使用<!DOCTYPE>语法）的对象表现形式。它不能包含字节点。

DocumentFragment――可以像Document一样来保存其他节点。

Element――表示起始标签和结束标签之间的内容。可以同时包含特性和子节点的节点类型。

Attr――代表一对特性名和特性值。

Text――代表XML文档中的在起始标签和结束标签之间，或者CData Section内包含的普通文本。

CDataSection――<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点作为子节点。

Entity――表示在DTD中的一个实体定义，例如<!ENTITY foo “ foo”>。

EntityReference――代表一个实体引用，例如&quot;。

ProcessingInstruction――代表一个PI。

Comment――代表XML注释。

Notation――代表在DTD中定义的记号。

 

Node接口定义了所有节点类型都包含的特性和方法。

nodeName, nodeValue; nodeType,ownerDocument,firstchild,lastchild,childNodes,

previousSibling,nextSibling,haschildNodes(),attributes,appendchild(node),removechild(node),replacechild(new,old),insertBefore(new,ref);

访问相关的节点

Document.documentElement  访问<html/>元素

检测节点类型
    例如 document.documentElement.nodeType  IE不支持node定义的常量。

处理特性

  getNamedItem(name)――返回nodeName属性值等于name的节点。

 removeNamedItem(name)

 setNamedItem(node)

 item(pos)――像NodeList一样，返回在位置pos的节点。

  例如： <p style=”color: red”, id=”p1”>hello world!</p>

假设op包含指向这个元素的一个引用，可以这样访问id特性的值

  op.attributes.getNamedItem(“id”).nodeValue;

这种方法有些累赘，DOM又定义了三个元素方法来帮助访问这些特性

getAttribute(name)   setAttribute(name,newvalue)  removeAttribute(name)

   上面的例子可以这样表示   op.getAttribute(“id”);

 

访问指定节点

  getElementsByTagName()

  getElementsByName()

  getElementsById()

 

 创建和操作节点

  1常用的几个方法

createDocumentFragment()   createElement()  createTextNode()

  2 创建一个新节点 createElement() createTextNode() appendChild()

3        removechild() repalacechild() insertBefore()

4        createDocumentFragment()  创建一个文档碎片把所有的新节点附加其上，一次刷新。

 

HTML DOM特征功能

  <img src=”mypicture.jpg” border=”0” />

  核心的DOM 获取和设置src和border属性，那么要用getAttribute（）和setAttribute（）

  HTML DOM可以使用同样名称的属性来获取和设置这些值。

  oImg.src   oImg.border

唯一特性名和属性名不一样的是class属性，它是用来指定应用于某个元素的一个CSS类，用className代替。

 

  table方法

<table/>元素添加了以下内容：

 caption――指向<caption/>元素

 tBodies――<tbody/>元素的集合

 tFoot ―― 指向<tfoot/>元素

 tHead           rows     createTHead()   createTFoot()  createCaption()

 deleteTHead()   deleteTFoot()   deleteCaption()   deleteRow(position)

 insetRow(position)  

<tbody/>元素添加了以下内容：

 rows ――<tbody/>中所有行的集合

deleteRow(position) insertRow(position)

<tr/>元素中添加了以下内容:

  cells ――<tr/>元素中所有的单元格的集合

  deleteCell(position)   insertCell(position)

遍历DOM

NodeIterator

   Document的createNodeIterator()方法创建,接受四个参数

Root―――从树中开始搜索的那个节点

whatToShow------一个数值代码，代表哪些节点需要访问

filter―――NodeFilter对象，用来决定需要忽略哪些节点

entityReferenceExpansion-----布尔值，表示是否需要扩展实体引用。

 

TreeWalker

   它有NodeIterator所有的功能，并且添加了一些遍历方法：

parentNode()   firstChild()   lastChild()  nextSibling()  previousSibling() 

 

 

高级DOM技术

Style对象包含与每个css样式对应的属性。如CSS样式特性backgroud-color，

javaScript样式属性为style.backgroundColor.

 

DOM样式的方法

   getPropertyValue(propertyName)――返回CSS特性propertyName的字符串值。

   getPropertyPriority()――如果在规则中指定CSS的特性”important”，则返回”important”，否则返回空字符串。

   Item(index)――给定索引index处的CSS特性的名称。

   removeProperty(propertyName)――从CSS定义中删除propertyName

   setProperty(propertyName, value, priority)

 

自定义鼠标提示

     鼠标提示，就是把鼠标移动到图片按钮上时，出现的帮助性黄色方框。通过title特性，HTML元素也可提供普通的文本鼠标提示，例如：

   <a href=”http://www.wrox.com” title=”Wrox Site”> Wrox</a>

   也可以使用style.visibility=”visible” “hidden”显示或隐藏一段<div/>

可折叠区域

   Style.display属性，值可为block或none表示展开或折叠。

访问样式表

  获取定义类的样式表引用，使用document.styleSheets集合实现这个目的。

  disabled――表示样式表是否被禁用。

  href――用于外部引用文件样式表的URL。

  Media――可以使用该样式表的媒体类型。

  ownerNode――指定样式表的DOM节点(<link/>或者<style/>元素)

parentStyleSheet――如果样式表是通过CSS的@import语句来加载的。那么这个特性指出出现@import语句的样式表。

title――通过HTML title特性分配给样式表的标题，可用在<link/>和<style/>上。

Type――样式表的mime类型，对于CSS通常是text/css。

  DOM为每一格样式表指定一个cssRules的集合，IE称这个集合为rules。

 

最终样式

IE的最终样式   currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性。与style的使用方式完全一样，但可以使用定义在类中的规则属性。

DOM的最终样式 getComputedSytle()方法，接收两个参数，需要获取样式的元素和诸如：hover或者first-letter之类的伪元素（如果不需要也可以为null）。

可以从document.defalutView对象中访问这个方法。

 

innerText和innerHTML

  innerText特性用来修改起始标签和结束标签之间的文本的，可以直接分配HTML字符串。

  可以用来获取元素内容，innerText只包含文本，innerHTML将返回所有元素和文本的HTML代码。

outerText和outerHTML

   与上面情况相似，只不过替换的是整个目标节点。

 

范围

   当一般的DOM操作不足以用来改变文档时，范围将非常有用。

    选择使用范围的文档的某部分的最简单的方法是用selectNode()或selectNodeContents()。selectNode()方法将选择整个节点，包括它的子节点，而selectNodeContents()则选择节点所有的子节点。

复杂选区 setStart()和setEnd()方法。接受两个参数：节点的引用和偏移量。对于setStart()为startContainer,startOffest;对于setEnd()为endContainer,endOffset。

与DOM范围对象的内容进行交互

deleteContents() 删除范围内的内容

extractContents() 删除并将范围内的文档碎片作为函数返回值返回，可以再将内容插入到其他位置去。

cloneContents() 创建副本。

insertNode()方法用来在选区的开头插入节点。

surroundContents()方法插入包围范围的内容。

collapse() 方法来折叠范围，接受一个参数，如果是true，范围就折叠到开头，否则到末尾。

compareBoundaryPoints()判断是否有相同的边界，接受两个参数：要进行比较的范围及如何进行比较。START_START (0)   START_TO_END (1)

END_TO_END (2) END_TO_START(3)

cloneRange()方法来创建范围的副本。

detach() 方法释放系统资源。

IE中的范围

IE中的范围称为文本范围主要用来处理文本。createTextRange()

选择某个区域的最简单的方法是用范围的findText()方法。

要在文档中移动范围，可用findText()方法的第二个参数，这是表示继续搜索的方向的数字，正数表示继续向前，负数向后。

与DOM的selectNode（）最近的是IE的moveToElementText（）方法，它可接受DOM元素作为参数，并选取元素的所有文本，包括HTML标签。要测试这段代码是否正常运行，可使用htmlText特性，alert(oRange.htmlText)。

复杂选区：move()、moveStart()、moveEnd()和expand()来进一步给范围定位。两个参数：移动的单位和要移动的单位个数。

与IE的范围内容进行的交互是通过text特性或者pasteHTML()方法来完成的。

折叠IE的范围，有个collapse()方法，与DOM方法的行为完全一样。

比较IE的范围  compareEndPoint() 两个参数：比较的类型和要比较的范围。

复制范围： duplicate()