【JavaScript高级程序设计】知识点小结 III

《JavaScript高级程序设计》知识点小结 III

---

ch8 BOM

1 window对象

全局作用域

window对象同时扮演者ECMAScript中Global对象的角色，在全局中声明的变量、函数都会变成window对象的属性和方法。

全局变量不能通过delete删除，但是定义在window中的属性可以。

尝试访问未声明的变量会出错，但是window.nodefined会返回undefined而不至于出错。

窗口关系及框架

每个框架都拥有自己的window对象，并且保存在frames集合中。

top对象指向最高（最外）层的窗口，也就是浏览器窗口。
parent对象指向当前框架的直接上层框架。
self对象指向window，实质上二者可以互换使用。

窗口位置

窗口大小

导航和打开窗口

window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
可以接受四个参数：要打开的URL，窗口目标，一个特性字符串，一个表示新页面是都取代浏览器历史记录中当前加载页面的布尔值

第二个参数，窗口目标：
窗口名字，加载到具有指定名字的窗口中，若不存在，则创建新的窗口。
也可以是特殊的窗口名称：_self _parent _top _blank

第三个参数：特性字符串
如：“height=300”
包括：fullscreen height width location menubar resizable scrollbars status top left

间歇调用和超时调用

超时调用

• setTimeout()方法
  第一个参数是包含js代码的字符串或者function()对象
  第二个参数是等待的毫秒数
  返回值是一个数值ID，这个超时调用ID是计划执行代码的唯一标识符。

取消超时调用

• clearTimeout(ID)

间歇调用

• setInterval()

取消间歇调用

• clearInterval(ID)

系统对话框

• alert()
  接受一个字符串参数并将它显示给用户。
  常用于“警告”，显示一些用户无法控制的消息。
  只有OK按钮。

• comfirm()
  用于确认，拥有OK和Cancel按钮。返回布尔值。

• prompt()
  用于提示。拥有OK和Cancel按钮，和一个文本输入域。
  两个参数：要显示给用户的提示和文本框中的默认值。返回值为文本框中的字符串或者null。

2 location对象

最有用的BOM对象之一，提供当前加载的文档有关的信息，和导航功能。

window.location和document.location是同一个对象。

• location对象属性
  hash RUL中的hash
  host 服务器名称和端口号
  hostname 不带端口号的服务器名称
  href 完整URL
  pathname URL中的目录或文件名
  port 端口号
  protocol 协议，通常是http:或https:
  search 查询字符串

查询字符串参数

解析查询字符串参数
function getQueryArgs(){
    var qs=(location.search.length>0?location.search:"");
    args={},
    items=qs.length?ps.split("&"):[];
    item=null;
    name=null;
    value=null;
    i=0;
    len=items.length;

    for(i=0;i){
        item=items[i].split("=");
        name=decodeURIComponent(item[0]);
        value=decodeURIComponent(item[1]);

        if(name.length){
            args[name]=value;
        }
    }
    return args;
}

位置操作

用于改变浏览器的位置。

• assign()方法
  loaction.assign(“http://www.baidu.com”);

• window.location=“http://www.baidu.com”

• location.href=“http://www.baidu.com”（试了下没有效果）

• replace()
  location.replace(“http://www.baidu.com”)
  不会在浏览器的历史中生成记录，无法通过“后退”按钮回退到上一个页面。

• reload()
  重新加载当前显示的页面，在缓存中读取。

• reload(true)
  重新加载，从服务器重新加载。

*3 navigation对象

（下次一定）

*4 screen对象

用处不大。

5 history对象

出于安全考虑，开发人员无法得知用户浏览过的URL。

• go()方法
  history.go(-1) //后退一页
  history.go(2) //前进两页
  history.go(“baidu.com”) //跳转到最近的baidu.com页面
  history.back() //后退一页
  history.forward() //前进一页

---

ch9 客户端检测

时间有限，先读了小结。

客户端检测方法

• 能力检测
• 怪癖检测
• 用户代理检测
  通过用户代理字符串来识别浏览器。
  浏览器提供方会在用户代理字符串中添加一些欺骗性信息。
  以上三种方案按照顺序进行选择。

---

ch10 DOM

DOM是针对HTML和XML文档的一个API，描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。

1 节点层次

节点分为几种不同的类型，表示文档中不同的信息或标记。

1.1 Node类型

最基本的节点，抽象地表示文档中一个独立的部分，其他类型都继承于此。

节点信息

• nodeType
• nodeName
  值是元素的标签名。
• nodeValue

节点关系

• childNodes
  每个节点都有一个childNodes属性，保存着一个NodeList对象。类数组对象。
  NodeList对象是“有生命有呼吸的对象”，是基于DOM动态执行查询的结果。
  访问 someNode.childNodes[ 1 ] 或 someNode.childNodes.item(1)
  将NodeList对象转化为数组：Array.prototype.slice.call(someNode.childNodes,0);
• parentNode
• previousSibling
• nextSibling
• firstChild
• lastChild

操作节点

• appendChild()
  接受一个参数，向childNodes末尾添加一个节点。返回新增的节点。
• insertBefore()
  两个参数：要插入的节点，和参照的节点（参照物变成弟弟，在右边）
  返回插入的节点。
  若要查到最后，则可以将第二个参数设为null。
• replaceChild()
  两个参数：要插入的节点和要替换的节点。
• removeChild()
  一个参数：要删除的节点。

其他方法

• cloneNode()
  一个参数：布尔值，表示是(true)否(false)执行深复制。
• normalize()
  检查文本节点不包含文本，或者连着出现两个文本节点的情况。

1.2 Document类型

表示整个文档，是一组分层节点的根节点。js中的document对象是Document类型的一个实例。使用document对象，可以查询和获取节点。

文档子节点

• 取得html
  document.documentElement;
  document.childNodes[ 0 ];
  document.firstChild;

• body属性

• doctype属性

文档信息

• title
  浏览器窗口的标题栏或标签页上
• domain
  页面的域名
  可以设置为更宽泛的域名，但是设置后不能改成更tight的域名。
• referrer
  链接到当前页面的那个页面的URL
• URL
  当前页面的URL

查找元素

• getElementById()
• getElementByTagName()
  查找相应元素名
• getElementByName()
  查找name属性对应的值

特殊集合

• document.anchors
• document.forms
• document.images
• document.links

DOM一致性检测
检测浏览器实现了dom的哪些部分

例：document.implementation.hasFeature(“XML”,“1.0”)

文档写入

• write()
• writeln()
  会自动在末尾添加换行符
• open()
  用于打开网页的输出流。
• close()

1.3 Element类型

表示文档中所有的html或xml元素，可以用来操作这些元素的内容和特性。

访问元素的标签名：xxx.nodeName或xxx.tagName 输出均为大写。

htmlElement
继承自Element。所有的html元素都是由HtmlElement或者其更具体的子类型来表示的。
属性：id title lang dir className

操作特性

• getAttribute()

hello<\div>
var div=document.getElementById("my4399")
div.getAttrbute("data-dq")

特性的名称不区分大小写。
可以获取自定义的特性。根据HTML5的规范，自定义特性前应该加上data-前缀以便验证。

• 通过DOM本身访问
  区别：
  style:getAttribute返回css文本，通过属性访问则返回第一个对象；
  onclick之类的事件处理程序：getAttribute返回字符串，通过属性访问则返回一个js函数。

• setAttribute()
  两个参数，要设置的特征名和值。所有的特性名均会被转化为小写。
  不能直接给DOM对象添加自定义属性，但通过该方法可以添加自定义属性。

• removeAttribute()

attributes属性
包含一个NamedNodeMap对象，是一个动态维护的集合，保存着元素的每一个特性，每个特性由一个Attr节点表示。
一个Attr节点的名称，用nodeName获取，就是特性名；而节点的值，用nodeValue获取。
方法：就是对当前元素的属性列表进行一定的操作，比如获取，删除，添加等。

• getNameItem(name)
  返回nodeName属性等于name的节点。
• removeNameItem(name)
• setNameItem(node)
  想列表中添加节点，以节点的nodeName属性为索引。
• item(pos)
  返回位于数字pos位置的节点。从0开始计数。

创建元素

• document.vreateElement()
  接受一个参数，要创建的元素的标签名。标签名不区分大小写。
• appendChild() insertBefore() replaceChild()
  将新建的元素添加到文档树中

元素的子节点

• childNodes属性
• getElementByTagName()方法
  以当前元素为起点。

1.4 Text类型

文本内容。
文本节点用text表示，包含的是可以照字面解释的纯文本内容。
若文档节点存在与文档树中，则修改文档节点的结果会立即得到反应。

文本节点的方法和属性

• appendData(text)
• deleteData(offset,count)
• insertData(offset,text)
  从offset指定的位置开始插入text
• replaceData(offset,count,text)
• splitText(offset)
  指定位置归到后半部分。
• subStringData(offset,count)
• length属性
  节点中字符的数目，与nodeValue和data.length具有相同的值。

创建文档节点

• document.createTextNode()
  一个参数，要插入的节点中的文本

规范化文本节点
相邻的同胞节点中的文本会连起来显示，中间不会有空格。

• normalize()
  合并相邻的文本节点，父亲元素调用。

1.5 Comment类型

注释。
与text继承自相同的基类。具有除了splitText之外的其他方法和属性。
创建：document.createComment() 很少会创建和访问注释节点。

*1.6 CDATASection类型

CDATA区域。

*1.7 DocumentType类型

文档类型。

1.8 DocumentFragment类型

文档片段。
轻量级的文档，不存在于文档中，一般作为仓库使用，在其中保存将来可能添加到文档中的节点，减少渲染次数。

//向列表添加3个列表项，使用DocumentFragment避免多次渲染。
var fragment=document.createDocument();
var ul=document.getElementById("mylist");
vat li=null;

for(var i=0;i<3;i++>){
    li=document.createElement("li");
    li.appendChild(document.createTextNode("Item"+(i+1)));
    fragment.appendChild(li);
}
ul.appendChild(fragment);

1.9 Attr类型

就是存在于元素的attributes属性中的节点。

Attr的属性：name value specified（用于区别特性是在代码中指定的还是默认的）

2 DOM操作技术

动态脚本

使用动态脚本
使用script标签，直接包含js代码，或者用src属性引入外部文件。

使用dom加入

var script=document.createElement("script");
script.type="text/javascript"
scrupr.src="client.js"
document.body.appendChild(script);

还可以包装成函数。
可以使用script.text添加js代码。

动态样式

添加样式，可以使用link元素包含外部文件的方法，或者style元素包含css代码的方法。

包装成dom函数

function loadStyles(url){
    var link=document.createElement("link");
    link.ref="stylesheet";
    link.type="text/css";
    link.href=url;
    var head=document,getElementsByTagNName("head")[0];
    head.appendChild(link);
}

操作表格

直接使用dom代码很长且不好懂，htmldom为table、tbody和tr元素添加了一些属性和方法。

• table元素
  caption
  tBodies:tbody的collection
  tFoot
  tHead
  rows
  createTHead()
  createTFoot()
  createCaption()
  deleteTHead()
  deleteTFoot()
  deleteCaption()
  deleteRow(pos)
  insertRow(pos)
• body元素
  rows
  deleteRow(pos)
  insertRow(pos)
• tr元素
  cells:单元格的集合
  deleteCell(pos)
  insertCell(pos)

使用NodeList

最重要的特点，动态维护，它始终都保存着最新、最准确的信息。

---

ch11 DOM拓展

1 选择符API

selectoes API，致力于让浏览器原生支持CSS查询。

原本：CSS解析，然后再用DOM方法查询文档并找到匹配的节点。
变成原生API后，解析和树的查询可以在浏览器内部通过编译后的代码来完成。

• querySelector()方法
  参数：一个CSS选择符
  返回第一个匹配的元素，没有则返回null

• querySelectorAll()方法

• matchesSelector()方法
  接受一个参数，CSS选择符。如果调用的元素与之匹配，返回true，否则返回false。

2 元素遍历

Element Traversal API

为DOM元素添加的属性

• childElementCount
  返回子元素的个数，不包括文本节点和注释
• firstElementChild
• lastElementChild
• lastElementChild
• previousElementSibling
• nextElementSibling

3 HTML5

与类相关的扩充

• getElementByClassName()方法
• classList属性
  该新类型还具有方法：
  add(value)
  contains(value) 是否存在value检测
  remove(value)
  toggle(value) 如果有value，删除它；如果没有，加入它。

焦点管理

• document.activeElement属性 查看当前焦点元素名称
• focus()方法 使元素获得焦点
• document.hasFocus() 查看是否获得了焦点

HTMLDocument的变化

• readyState属性
  值：loading complete
• compatMode属性
  兼容模式。告诉开发人员浏览器选择哪一种渲染模式。
• head属性
  document.head属性

字符集属性

• charset属性
• defaultCharset属性

自定义数据属性
前缀加上data-以符合规范。

插入标记

• innerHTML属性
  innerHTML的值会被解析为DOM树。

大多数浏览器插入script后并不会执行其中的脚本，因为它被视为无作用域的元素。需要用有作用域的元素包裹起来。

div.innerHTML="";

• outerHTML属性
  读模式，返回调用它的元素极其所有子节点。
  写模式，根据指定的HTML元素创建新的DOM树，然后完全替换掉调用的元素。

• insertAdjacentHTML()方法
  接受两个参数：插入的位置和要插入的HTML文本。
  第一个参数取值范围：
  “beforebegin”：在当前元素之前插入一个紧邻的同辈元素。
  “afterbegin”：成为当前元素的第一个子元素。
  “beforeend”：成为当前元素的最后一个子元素。
  “afterend”：在当前元素之后插入一个紧邻的同辈元素。

• 内存与性能问题
  这个节点替换方法可能会导致浏览器的内存占用问题。
  使用innerHTML，outerHTML，insertAdjacentHTML()时，最好手工删除要被替换的元素的所有事件处理程序和js对象属性。因为这些绑定关系是不会自动删除的，会占用内存。

scrollIntoView()方法
解决滚动页面的问题。可以在所有元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

4 专有拓展

一些还没写进标准的东西。

文档模式

children属性

contains()方法
检查当前节点是不是另一个节点的父亲。

---

ch12 DOM2和DOM3

1.1 DOM变化

1.2 样式

检查是否支持DOM2级的CSS：

var supportDOMCSS2=document.implementation.hasFeature("CSS2","2.0");

1.2.1 访问元素的样式

style对象
CSSStyleDeclaration的实例
包含着通过HTML的style属性指定的样式信息，不包括外部样式表或嵌入样式表的内容
css属性中的短横线在这里转换为驼峰大小写形式。
特殊：float转换为cssFloat

style对象的属性和方法

• cssText
  css代码
• length
  css属性的数量
• parentRule
  表示CSSRule的对象。
• getPropertyCSSValue(PropertyName)
• getPropertyPriority(PropertyName)
  如果属性使用了!important，则返回important，否则返回空字符串
• getPropertyValue(propertyName)
  返回给定属性的字符串值。
• item(index)
  返回指定位置上的css属性的名称。
• removeProperty(propertyName)
  从样式中删除给定属性。
• setProperty(propertyName,value,priority)

计算的样式

• getComputeStyle()
  两个参数，元素和一个伪元素字符串，若后者为空，输入null即可。
  返回一个CSSStyleDeclation对象

1.2.2 操作样式表

styleSheets对象的属性

• disabled
• href
• media
• ownerNode
• parentStyleSheet
• title
• type
• cssRules
• ownerRule
• deleteRule
• insertRule

应用于文档的所有样式表是通过document.styleSheets集合来表示的。
length可以获取数量，item()方法获取每一项。

CSS规则
CSSRule对象表示样式表中的每一条规则。

1.2.3 元素大小

1.3 遍历

1.4 范围