JavaScript学习笔记--BOM&&DOM（JavaScript高级程序设计第4版）

BOM&&DOM基础知识 `BOM``window对象``Global对象作用域``窗口关系``窗口位置与像素比``窗口大小``视口位置``导航与打开新窗口``定时器``setTimeout（）` `location对象``查询字符串`` *** 作地址` `navigator对象``检测插件`` *** 作系统`navigator.platform `screen对象``history对象``导航``length属性``历史状态管理` `小结` `客户端检测``能力检测``用户代理检测``用户代理的历史` `浏览器分析``小结` `DOM``节点层级``Node类型``值属性``关系属性(关系指针)和方法`` *** 纵节点``其他方法` `document类型``访问文档子节点``文档信息``定位（获取）元素``DOM兼容性检测``文档写入` `Element类型``HTML元素``取得属性``attributes属性``创建元素``元素后代` `Text类型``DocumentType类型``DOM编程``动态脚本``动态样式``使用NodeList``MutationObserver接口``observer()方法` `小结` `DOM *** 作的扩展``querySelector()``querySelectorAll()``HTML5`

BOM window对象

window对象代表浏览器实例。window对象在浏览器中有两重身份，一个是ECMAScript中的Global对象，另一个就是浏览器窗口的JavaScript接口。这意味着网页中定义的所有对象、变量和函数都以window作为其Global对象

Global对象作用域 通过var声明的所有全局变量和函数都会变成window对象的属性和方法。如果在这里使用let或const替代var，则不会把变量添加给全局对象。可以在window对象上查询是否存在可能未声明的变量。js中有很多对象暴露在全局作用域内，作为window的属性，例如location、history等 窗口关系 top指向最外层窗口，即浏览器窗口本身parent对象指向当前窗口的父窗口，如果是最外层就等于topshelf对象始终指向window 窗口位置与像素比

现代浏览器提供了screenLeft和screenTop属性，用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是CSS像素

窗口大小 innerWidth、innerHeight、outerWidth和outerHeight。outerWidth和outerHeight返回浏览器窗口自身的大小（不管是在最外层window上使用，还是在窗格中使用）。innerWidth和innerHeight返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。document.documentElement.clientWidth和document.documentElement.clientHeight返回页面视口的宽度和高度。 视口位置 度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window. scrollX和window.pageYoffset/window.scrollY。可以使用scroll()、scrollTo()和scrollBy()方法滚动页面。 导航与打开新窗口

window.open()方法可以用于导航到指定URL，也可以用于打开新浏览器窗口。这个方法接收4个参数：要加载的URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。

如果window.open()的第二个参数不是已有窗口，则会打开一个新窗口或标签页。第三个参数，即特性字符串，用于指定新窗口的配置。特性字符串是一个逗号分隔的设置字符串，如果没有传第三个参数，则新窗口（或标签页）会带有所有默认的浏览器特性（工具栏、地址栏、状态栏等都是默认配置）。window.open(“http://www.wrox.com/”,“wroxWindow”,“height=400, width=400, top=10,left=10, resizable=yes”);window.open()方法返回一个对新建窗口的引用。 定时器

JavaScript在浏览器中是单线程执行的，但允许使用定时器指定在某个时间之后或每隔一段时间就执行相应的代码。setTimeout()用于指定在一定时间后执行某些代码，而setInterval()用于指定每隔一段时间执行某些代码。

setTimeout（） setTimeout()方法通常接收两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。不通常的：setTimeout接受从第三个参数之后的所有参数并且传递作为函数入参传递给第一个参数（如果第一个参数是函数）this指针。所有超时执行的代码（函数）都会在全局作用域中的一个匿名函数中运行，因此函数中的this值在非严格模式下始终指向window，而在严格模式下是undefined。如果给setTimeout()提供了一个箭头函数，那么this会保留为定义它时所在的词汇作用域。

第二个参数是要等待的毫秒数，而不是要执行代码的确切时间。
JavaScript是单线程的，所以每次只能执行一段代码。为了调度不同代码的执行，JavaScript维护了一个任务队列。其中的任务会按照添加到队列的先后顺序执行。setTimeout()的第二个参数只是告诉JavaScript引擎在指定的毫秒数过后把任务添加到这个队列。如果队列是空的，则会立即执行该代码。如果队列不是空的，则代码必须等待前面的任务执行完才能执行。
调用setTimeout()时，会返回一个表示该超时排期的数值ID。这个超时ID是被排期执行代码的唯一标识符，可用于取消该任务。要取消等待中的排期任务，可以调用clearTimeout()方法并传入超时id

let timeoutId = setTimeout(() => alert("Hello world! "), 1000);
// 取消超时任务
clearTimeout(timeoutId);

location对象

location是最有用的BOM对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。这个对象独特的地方在于，它既是window的属性，也是document的属性。也就是说，window.location和document.location指向同一个对象。
假设浏览器当前加载的URL是http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents, location对象的内容如下表所示

属性	值	意义
location.hash	“#contents ”	URL散列值，#号后面跟0或多个字符串，如果没有则为空字符串
location.host	www.wrong.com:80	服务器名及端口号
location.hostname	www.wrong.com	服务器名
location.href	http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents	当前加载页面的完整URL。location的toString方法返回这个值
location.pathname	/WileyCDA/	资源路径名
location.port	80	端口号
location.protocol	http	协议
location.search	?q=javascript	查询字符串
location.username	foouser	域前用户名
location.password	barpassword	域前指定密码
location.origin	http://www.wrong.com	URL源地址

查询字符串

location.search返回了从问号开始直到URL末尾的所有内容，

let getQueryStringArgs = function() {
    // 取得没有开头问号的查询字符串      
    let qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    // 保存数据的对象        
    args = {};      
    // 把每个参数添加到args对象      
    for (let item of qs.split("&").map(kv => kv.split("="))) {        
        let name = decodeURIComponent(item[0]),          
        value = decodeURIComponent(item[1]);       
        if (name.length) {          
            args[name] = value;       
        }      
    }      
    return args;    
}

*** 作地址 可以通过修改location对象修改浏览器的地址。首先，最常见的是使用assign()方法并传入一个URL，location.assign(“http://www.wrox.com”);这行代码会立即启动导航到新URL的 *** 作，同时在浏览器历史记录中增加一条记录。如果给location.href或window.location设置一个URL，也会以同一个URL值调用assign()方法。修改location对象的属性也会修改当前加载的页面。其中，hash、search、hostname、pathname和port属性被设置为新值之后都会修改当前URL，除了hash之外，只要修改location的一个属性，就会导致页面重新加载新URL。注意 修改hash的值会在浏览器历史中增加一条新记录如果不希望增加历史记录，可以使用replace()方法。这个方法接收一个URL参数，但重新加载后不会增加历史记录。调用replace()之后，用户不能回到前一页。最后一个修改地址的方法是reload()，它能重新加载当前显示的页面。调用reload()而不传参数，页面会以最有效的方式重新加载。如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以给reload()传个true navigator对象

只要浏览器启用JavaScript, navigator对象就一定存在。但是与其他BOM对象一样，每个浏览器都支持自己的属性。navigator对象的属性通常用于确定浏览器的类型。

检测插件

navigator.plugins

*** 作系统navigator.platform

navigator.platform属性是一个字符串，通常表示浏览器所在的 *** 作系统。

screen对象

window的另一个属性screen对象，是为数不多的几个在编程中很少用的JavaScript对象。这个对象中保存的纯粹是客户端能力信息，也就是浏览器窗口外面的客户端显示器的信息，比如像素宽度和像素高度。

history对象

history对象表示当前窗口首次使用以来用户的导航历史记录。因为history是window的属性，所以每个window都有自己的history对象。

导航 go()方法可以在用户历史记录中沿任何方向导航，可以前进也可以后退。这个方法只接收一个参数，这个参数可以是一个整数，表示前进或后退多少步。负值表示在历史记录中后退（类似点击浏览器的“后退”按钮），而正值表示在历史记录中前进（类似点击浏览器的“前进”按钮）go()有两个简写方法：back()和forward()。顾名思义，这两个方法模拟了浏览器的后退按钮和前进按钮： length属性 history对象还有一个length属性，表示历史记录中有多个条目。这个属性反映了历史记录的数量，包括可以前进和后退的页面。注意如果页面URL发生变化，则会在历史记录中生成一个新条目。对于2009年以来发布的主流浏览器，这包括改变URL的散列值（因此，把location.hash设置为一个新值会在这些浏览器的历史记录中增加一条记录）。这个行为常被单页应用程序框架用来模拟前进和后退，这样做是为了不会因导航而触发页面刷新。 历史状态管理

state

小结

浏览器对象模型（BOM, Browser Object Model）是以window对象为基础的，这个对象代表了浏览器窗口和页面可见的区域。

要引用其他window对象，可以使用几个不同的窗口指针。通过location对象可以以编程方式 *** 纵浏览器的导航系统。通过设置这个对象上的属性，可以改变浏览器URL中的某一部分或全部。使用replace()方法可以替换浏览器历史记录中当前显示的页面，并导航到新URL。navigator对象提供关于浏览器的信息。提供的信息类型取决于浏览器，不过有些属性如userAgent是所有浏览器都支持的。BOM中的另外两个对象也提供了一些功能。screen对象中保存着客户端显示器的信息。这些信息通常用于评估浏览网站的设备信息。history对象提供了 *** 纵浏览器历史记录的能力，开发者可以确定历史记录中包含多少个条目，并以编程方式实现在历史记录中导航，而且也可以修改历史记录。 客户端检测 能力检测

能力检测（又称特性检测）即在JavaScript运行时中使用一套简单的检测逻辑，测试浏览器是否支持某种特性。能力检测最适合用于决定下一步该怎么做，而不一定能够作为辨识浏览器的标志。

用户代理检测

用户代理检测通过浏览器的用户代理字符串确定使用的是什么浏览器。用户代理字符串包含在每个HTTP请求的头部，在JavaScript中可以通过navigator.userAgent访问。

用户代理的历史

HTTP规范（1.0和1.1）要求浏览器应该向服务器发送包含浏览器名称和版本信息的简短字符串。

Mosaic是早期Web浏览器的代表，其用户代理字符串相当简单，类似于：Mosaic/0.9Netscape Navigator 3和IE3。1996年，Netscape Navigator 3发布之后超过Mosaic成为最受欢迎的浏览器。Mozilla/Version(Platform; Encryption[; OS-or-CPUdescription])3．Netscape Communicator 4和IE4~8Gecko。Gecko渲染引擎是Firefox的核心。Gecko最初是作为通用Mozilla浏览器（即后来的Netscape 6）的一部分开发的。有一个针对Netscape 6的用户代理字符串规范，规定了未来的版本应该如何构造这个字符串。WebKit。2003年，苹果宣布将发布自己的浏览器Safari。Safari的渲染引擎叫WebKit，是基于Linux平台浏览器Konqueror使用的渲染引擎KHTML开发的。Chrome。谷歌的Chrome浏览器使用Blink作为渲染引擎，使用V8作为JavaScript引擎。Chrome的用户代理字符串包含所有WebKit的信息，另外又加上了Chrome及其版本的信息。 浏览器分析

想要知道自己代码运行在什么浏览器上，大部分开发者会分析window.navigator.userAgent返回的字符串值。所有浏览器都会提供这个值，如果相信这些返回值并基于给定的一组浏览器检测这个字符串，最终会得到关于浏览器和 *** 作系统的比较精确的结果。相比于能力检测，用户代理检测还是有一定优势的。能力检测可以保证脚本不必理会浏览器而正常执行。现代浏览器用户代理字符串使我们能够利用它们准确识别浏览器。

小结 能力检测，在使用之前先测试浏览器的特定能力。例如，脚本可以在调用某个函数之前先检查它是否存在。这种客户端检测方式可以让开发者不必考虑特定的浏览器或版本，而只需关注某些能力是否存在。能力检测不能精确地反映特定的浏览器或版本。用户代理检测，通过用户代理字符串确定浏览器。用户代理字符串包含关于浏览器的很多信息，通常包括浏览器、平台、 *** 作系统和浏览器版本。用户代理字符串有一个相当长的发展史，很多浏览器都试图欺骗网站相信自己是别的浏览器。用户代理检测也比较麻烦，特别是涉及Opera会在代理字符串中隐藏自己信息的时候。即使如此，用户代理字符串也可以用来确定浏览器使用的渲染引擎以及平台，包括移动设备和游戏机。选择客户端检测方法时，首选是使用能力检测。特殊能力检测要放在次要位置，作为决定代码逻辑的参考。用户代理检测是最后一个选择，因为它过于依赖用户代理字符串。 DOM

文档对象模型（DOM, Document Object Model）是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档。DOM表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。

节点层级

document节点表示每个文档的根节点。在HTML中，根节点的唯一子节点是元素，我们称之为文档元素（documentElement）。文档元素是文档最外层的元素，所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。在HTML页面中，文档元素始终是元素。

HTML中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示HTML元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。DOM中总共有12种节点类型，这些类型都继承一种基本类型。

Node类型

Node接口是所有DOM节点类型都必须实现的。Node接口在JavaScript中被实现为Node类型，JavaScript中，所有节点类型都继承Node类型，因此所有类型都共享相同的基本属性和方法。

值属性 nodetype属性，表示节点的类型，定义了12个常量(如Node.ELEMENT_NODE(1)、Node.ATTRIBUTE_NODE(2)…),结点类型可以通过与这些常量比较来确定nodeName属性，节点的标签名字nodeValue属性，对于一个元素来说，nodeName是标签名，nodeValue是null。 关系属性(关系指针)和方法 childNodes属性，其中包含一个NodeList实例，是一个类数组对象，可以用中括号访问，也可以用item（）访问，具有length属性。NodeLisy对象独特的地方在于它其实是对一个DOM结构的查询，因此DON结构的变化会自动地在NodeList中反映出来，我们通常说NodeList是实时的活动对象，而不是第一次访问时所获得的内容的快照

    let firstChild = someNode.childNodes[0];
    let secondChild = someNode.childNodes.item(1);
    let count = someNode.childNodes.length;

parentNode属性，指向DOM树中的父元素。childNodes中所有的节点都有同一个父元素，因此它们的parentNode属性都指向同一个节点。childNodes列表中的每个节点都是同一列表中其他节点的同胞节点。而使用previousSibling和nextSibling可以在这个列表的节点间导航。firstChild和lastChild属性。父节点和它的第一个及最后一个子节点也有专门属性：firstChild和lastChild分别指向childNodes中的第一个和最后一个子节点。someNode.firstChild的值始终等于someNode.childNodes[0]，而someNode.lastChild的值始终等于someNode.childNodes[someNode.childNodes.length-1]。如果只有一个子节点，则firstChild和lastChild指向同一个节点。如果没有子节点，则firstChild和lastChild都是null。hasChildNodes()，这个方法如果返回true则说明节点有一个或多个子节点。比使用length更方便ownerDocument属性是一个指向代表整个文档的文档节点的指针。即返回document对象 *** 纵节点 appendChild()，用于在childNodes列表末尾添加节点。添加新节点会更新相关的关系指针，包括父节点和之前的最后一个子节点。appendChild()方法返回新添加的节点，如下所示：如果把文档中已经存在的节点传给appendChild()，则这个节点会从之前的位置被转移到新位置,一个节点不会在文档中同时出现两个或者更多地方，如果调用该方法传入父元素的第一个子节点，则该结点会成为父元素的最后一个节点。

    let returnedNode = someNode.appendChild(someNode.firstChild);   
    alert(returnedNode == someNode.firstChild);          // false 
    alert(returnedNode == someNode.lastChild);   // true

insertBefore()方法。这个方法接收两个参数：要插入的节点和参照节点。插入的节点会变成参照节点的前一个同胞节点，并被返回。appendChild()和insertBefore()在插入节点时不会删除任何已有节点。replaceChild()方法接收两个参数：要插入的节点和要替换的节点。要替换的节点会被返回并从文档树中完全移除，要插入的节点会取而代之。使用replaceChild()插入一个节点后，所有关系指针都会从被替换的节点复制过来。

    // 替换第一个子节点
    let returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
    // 替换最后一个子节点
    returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

removeChild()方法。这个方法接收一个参数，即要移除的节点。被移除的节点会被返回。
上面介绍的4个方法都用于 *** 纵某个节点的子元素，也就是说使用它们之前必须先取得父节点（使用前面介绍的parentNode属性）。 其他方法 cloneNode(),会返回与调用它的节点一模一样的节点。cloneNode()方法接收一个布尔值参数，表示是否深复制。在传入true参数时，会进行深复制，即复制节点及其整个子DOM树。如果传入false，则只会复制调用该方法的节点。复制返回的节点属于文档所有，但尚未指定父节点，所以可称为孤儿节点（orphan）。可以通过appendChild()、insertBefore()或replaceChild()方法把孤儿节点添加到文档中。cloneNode()方法不会复制添加到DOM节点的JavaScript属性，比如事件处理程序。这个方法只复制HTML属性，以及可选地复制子节点。normalize()。这个方法唯一的任务就是处理文档子树中的文本节点,处理不包含文本的文本节点 document类型

Document类型是JavaScript中表示文档节点的类型。document是window对象的属性，因此是一个全局对象。document对象可用于获取关于页面的信息以及 *** 纵其外观和底层结构。

nodeType等于9；nodeName值为"#document"；nodeValue值为null；parentNode值为null；ownerDocument值为null；子节点可以是DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment类型。 访问文档子节点 documentElement属性，始终指向HTML页面中的元素。

    let html = document.documentElement;      
    // 取得对的引用    
    alert(html === document.childNodes[0]);   // true
    alert(html === document.firstChild);      // true

body属性，直接指向元素。document.body

    let body = document.body;

doctype属性，标签是文档中独立的部分，其信息可以通过doctype属性（在浏览器中是document.doctype）来访问 文档信息 title，包含