JavaScript高级编程笔记(3)

2018-11-06  本文已影响0人  CMPEAX

BOM(浏览器对象模型)

由于window对象同时扮演ECMAScript中的global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

窗口大小:

间歇调用和超时调用:

location 对象

属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。如果地址里没有“#”，则返回空字符串。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号，设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议，取值为 ‘http:’,’https:’,’file:’ 等等。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。

navigator 对象

属性 描述
appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回 OS 使用的默认语言。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回 OS 的自然语言设置。
注册处理程序:

Screen 对象

在编程中作用不大，基本上只用来表明客户端的能力。

History 对象

history对象保存着用户上网的内容.
history.go()方法可以在用户历史记录中任意跳转，接受一个参数表示向后或向前跳转的一个整数值。
负数向后，正数向前，传递字符串直接跳转.

客户端检测

能力检测

能力检测目标不是识别特定浏览器，而是识别浏览器的能力。

能力检测的基本模式是:

if (object.propertyInQuestion){
  // 使用 object.propertyInQuestion
}

重要概念：一个特性存在，不一定意味着另一个特性也存在。
可靠的检测：

用户代理检测

关于浏览器的检测可以在搜索引擎中获取相关信息。

DOM

Dom（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）.DOM描绘了一个层次化的节点数，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape以及微软公司创始的DHTML（动态HTML）。

节点关系图.jpg

Document类型

referrer - 来源页面URL
domain - 域:
getElementByTagName(elementname)、getElementByName(name)、getElementById(id) 获取元素操作
DOM一致性检测

document.implementation属性为浏览器对DOM的实现提供响应信息和功能的对象。

DOM节点：
节点类型.png 节点类型 - 所返回的值.png
DOM扩展
1、选择符API

"querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"

浏览器版本 函数
原生 matchesSelector()
IE9+ msMatchesSelector()
FireFox 3.6+ mozMatchesSelector()
Chrome、Safari 5+ webkitMatchesSelector()
2、元素遍历(支持规范：IE 9+ 、Firefox 3.5+、Safari 4+、Chrome 和 Opera 10+)
var i,
     len,
     child = element.firstElementChild;
while(child != element.lastElementChild){
     processChild(child); 
     child = child.nextElementSibling;
}

HTML5

方法名 解释
add(value) 将给定的字符串值添加到列表中，如果值已经存在，就不添加了。
contains(value) 表示列表中是否存在给定的值，如果存在则返回true,否则返回false。
remove(value) 从列表中删除给定的字符串。
toggle(value) 如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
1、焦点管理
2、 HTMLDocument的变化
  var head = document.head || document.getElementsByTagName("head")[0];
3、 自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名。只要以data-开头即可。

添加了自定义属性之后，可以通过元素dataset属性来访问自定义属性的值。

4、 插入标记 （未掌握）

在写模式下,innerHTML的值会被解析为DOM子树，替换调用元素原来的所有子节点。
如果设置的值仅仅是文本而没有HTML标签，那么结果就是设置纯文本。
注意:大多数浏览器不会执行插入在innerHTML的<script>元素

  1. 第一个参数必须是下列值之一：
    • beforebegin() 在当前元素之前插入一个紧邻的同辈元素；
    • afterbegin() 在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
    • beforeend() 在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
    • afterend() 在当前元素之后插入一个紧邻的同辈元素；
  2. 第二个参数是一个HTML字符串。

使用上面方法的时候需要注意 先将字符串单独构造，避免频繁操作，否则会影响性能。

5、滚动页面规范

scrollIntoView()为HTML5最终选择的滚动页面标准方法。如果不传参数或者传true作为参数，窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。

document.element.scrollIntoView()

专有扩展

1、children属性
2、contains()方法

祖先节点调用contains(childNode)方法判断某个节点是否为另一个节点的后代.
调用 compareDocumentPosition(Node)方法确定节点之间的关系,返回该关系的掩码值

掩码 节点关系
1 无关（给定的节点不在当前文档中）
2 居前（给定的节点在DOM树中位于参考节点之前）
4 居后（给定的节点在DOM树中位于参考节点之前）
8 包含（给定的节点是参考节点的祖先）
16 被包含（给定的节点是参考节点的后代）

DOM2、DOM3

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。DOM2、DOM3分为许多模块：

DOM变化

1、xml命名空间:xmlns
<html xmlns="http://www.w3.org/1999/xhtml">
函数 作用
getNamedItemNS(namespaceURI, localName) 取得属于命名空间namespaceURI且名为localName的项
removeNamedItemNS(namespaceURI, localName) 移除属于命名空间namespaceURI且名为localName的项
settNamedItemNS(node) 添加node

（很少使用）

2、DocumentType类型（DOM Level 2）

DocumentType类型新增三个属性publicId、systemId、internalSubset，前两个属性表示文档类型声明的两个信息段，最后一个属性用于访问包含在文档类型声明的额外定义。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd"
        [<!ELEMENT name (#PCDATA)>] >

在这个文档类型声明而言，publicId是"-//W3C//DTD HTML 4.01//EN" ,systemID是"http://www.w3.org/TR/html4/strict.dtd",internalSubset是 [<!ELEMENT name (#PCDATA)>] (很少用到)

alert(document.doctype.publicId)
3、
3) 滚动大小（scroll dimennsion)

滚动大小指的是包含滚动内容的元素的大小.下面是4个与滚动大小相关的属性

对于不包含滚动条的页面而言，scrollWidth 和 scrollHeight 与 clientWidth 和 clientHeight 之间的关系并不十分清晰。在这情况下不同浏览器之间发现不一致性问题

确定文档的总高度是（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保证在跨浏览器的环境下得到精确的结果。

var docHeight = Math.max(document.documentElement.scrollHeight,
                                            document.documentElemennt.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
                                          document.documentElement.clientWidth);

注意：对于运行在混杂模式下的IE，则需要用document.body代替document.documentElement

4) 确定元素大小

浏览器给每个元素提供了getBoundingClientRect()方法。这个方法返回一个矩形对象，包括4个属性:left、top、right和bottom。
IE8 更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括IE9则将传统的(0,0)作为起点坐标.
跨浏览器函数:
5) 遍历

“DOM2级遍历和范围” 模块 定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker.这两个类型能够基于给定的起点对DOM结构执行深度优先（depth-first）的遍历操作。
IE不支持DOM遍历

使用下列代码可以检测浏览器对DOM2级遍历能力的支持情况

var supportsTraversals = document.implementation.hasFeature("Traversal","2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

使用document.createNodeIterator()方法 创建它的新实例。它接受下列四个参数：

whatToShow参数是一个位掩码，通过一或多个过滤器来确定要访问哪些节点。这个参数的值以常量形式在NodeFilter类型中定义，如下所示。
https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator/whatToShow

filter参数指定自定义NodeFilter对象或者指定一个功能类似节点过滤器的函数。每个NodeFilter对象只有一个方法。即accept-Node();如果应该访问给定的节点，该方法返回NodeFilter.FILTER_ACCEPT,如果不应该访问给定的节点，该方法返回NodeFilter.FILTER_SKIP。
下列代码展示了如何创建一个只显示<p>元素的节点迭代器.

var filter = {
      acceptNode: function(node){
            return node.tagName.toLowCase() == "p" ?
                      NodeFilter.FILTER_ACCEPT :
                      NodeFilter.FILTER_SKIP;
      }
};

var iterator = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, filter, false);

下列代码创建一个能够范文所有类型节点的简单NodeIterator.(不指定过滤器，第三个参数传入null)

var iterator = document.createNodeIterator(document, NodeFilter.SHOW_ALL, null, false);

NodeIterator类型的两个主要方法是nextNode()和previousNode().这两个方法根据情况遍历到了最后一个节点或者根节点的时候调用会返回null.

创建TreeWalker对象要使用document.createTreeWalker()方法。接受的四个参数和document.createNodeIterator()方法相同：作为遍历起点的根节点、要显示的节点类型、过滤器和一个表示是否扩展实体引用的布尔值。
在这里，filter可以返回的值有所不同。除了NodeIterator那两个返回值以外，还可以使用NodeFilter.FILTER_REJECT

属性：

var node = walker.nextNode();
alert(node === walker.currentNode); //true
walker.currentNode = document.body;    //修改起点
6) 范围

通过范围可以选择文档中的一个区域，而不必考虑节点的界限。IE以专有的方式实现了自己的范围特性。

DOM2级在Document类型中定义了createRange()方法。可以使用hasFeature()或者直接检测该方法来判断浏览器是否支持范围。
每个范围由一个range类型的实例表示。下列属性提供了当前范围在文档的位置信息

要使用范围来选择文档中的一部分，最简的方式就是使用selectNode()和selectNodeContents().这两个方法都接受一个参数，即一个DOM节点，然后使用该节点中的信息来填充范围。
selectNode()方法选择整个节点，包括其子节点。
而selectNodeContents()方法则只选择节点的子节点。
以下面html代码为例

<p id="p1"><b>hello</b>world</p>

var range1 = document.createRange();
var range2 = document.createRange();
var p1  =  document.getElementById("p1");
range1.selectNode(p1);  //<p id="p1"><b>hello</b>world</p>
range2.selectNodeContents(p1);  //<b>hello</b>world

为了更精细控制将哪些节点包含在范围中，还可以使用下面方法.

函数 功能
setStartBefore(refNode) 将范围的起点设置在refNode之前,因此refNode也就是范围选取中的第一个子节点。同时将startContainer属性设置为refNode.parentNode,将startOffset属性设置为refNode在其父节点的childNodes集合中的索引.
setStartAfter(refNode) 将范围的起点设置在refNode之后,因此refNode也就是不在范围之内了。其下一个同辈节点才是范围选区中的第一个子节点.
setEndBefore(refNode) 将范围的终点设置在refNode之前，因此refNode也就不在范围之内了，其上一个同辈节点才是范围选取中的最后一个子节点。同时会将endContainer属性设置为refNode.parentNode,将endOffset属性设置为refNode在其父节点的childNodes集合中的索引
setEndAfter(refNode) 将范围的终点设置为refNode之后，因此refNode也就是范围选区中的最后一个子节点。同时会将endContainer属性设置为refNode.parentNode,将endOffset属性设置为refNode在其父节点的childNodes集合中的索引加1

要创建复杂的范围用setStart()和setEnd()方法。这两个方法都接受两个参数：一个参照节点和一个偏移量值。

创建范围后，可以使用各种方法对范围的内容进行操作了。

有多个范围的情况下，可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界（起点或终点）。这些方法接受两个参数：表示比较方式的常量值和要比较的范围。常量值如下：

  • range.START_TO_START(0)：比较第一个范围和第二个范围的起点。
  • range.START_TO_END(1)：比较第一个范围的起点和第二个范围的终点。
  • range.END_TO_END(2)：比较第一个范围和第二个范围的终点。
  • range.END_TO_START(3)：比较的哥范围的终点和第二个范围的起点。
    返回值如下：
    第一个范围的点位于第二个范围中的点之前，返回-1;如果两个点相等，返回0；如果第一个范围中的点位于第二个范围中的点之后，返回1;
range1.compareBoundaryPoints(Range.START_TO_START, range2));

IE8及早期版本不支持DOM范围，但支持一种类型的概念。即文本范围（text range）

上一篇下一篇

猜你喜欢

热点阅读