JavaScript学习笔记（三十七）DOM扩展（一）
Selectors API
Selectors API(参见W3C网站上的Selectors APl Level 1)是W3C推荐标准，规定了浏览器原生支持的CSS查询API。
支持这一特性的所有JavaScript库都会实现一个基本的CSS解析器，然后使用已有的DOM方法搜索文档并匹配目标节点。
Selectors APILevel1的核心是两个方法：queryselector()和 querySelectorAll()。在兼容浏览器中，Document类型和Element类型的实例上都会暴露这两个方法。
Selectors API Level 2规范在Element类型上新增了更多方法，比如 matches ()、find()和findAll()。不过，目前还没有浏览器实现或宣称实现find()和findAll()。
querySelector()
方法接收CSS选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回null。
12345678// 取得<body>元素let body = document.querySelector("body ...
JavaScript学习笔记（三十六）DOM（三）
MutationObserver接口
MutationObserver接口，可以在DOM被修改时异步执行回调。
Mutati onObserver可以观察整个文档、DOM树的一部分， 或某个元素。此外还可以观察元素属性、子节点、文本，或者前ʻ者任意组合的变化。
基本用法
MutationObserver的实例要通过调用MutationObserver构造函数并传人一个回调函数来创建。1let observer = new MutationObserver(() => console.log('DOM was mutated!'));
1、observe方法
新创建的MutationObserver实例不会关联DOM的任何部分。要把这个observer与DOM关联起来，需要使用observe()方法。
方法接收两个必需的参数：要观察其变化的DOM节点和一个MutationObserverInit对象。
MutationObserverInit对象用于控制观察哪些方面的变化，是一个键/值对形式配置选项的字典。123456789101112let observ ...
JavaScript学习笔记（三十五）DOM（二）
DOM编程动态脚本
<script>元素用于向网页中插人JavaScript代码,可以是src属性包含的外部文件，也可以是作为该元素内容的源代码。
有两种方式通过<script>动态为网页添加脚本:引人外部文件和直接插人源代码。
动态脚本就是在页面初始加载时不存在，之后又通过DOM包含的脚本。
可以通过DOM编程创建这个节点:
123let script = document.createElement("script"); script.src = "foo.js"; document.body.appendChild(script);
抽象出一个跨浏览器的函数:
123456789101112function loadScriptString(code){ var script = document.createElement("script"); script.type = "text/javascript"; try { ...
JavaScript学习笔记——DOM类型（DocumentFragment类型和Attr类型）
DocumentFragment类型
在所有节点类型中，DocumentFragment类型是唯一一个在标记中没有对应表示的类型。
DOM将文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。
DocumentFragment节点具有以下特征:
nodeType等于11；
nodeName值为”#document- fragment”；
nodeValue值为null；
parentNode值为null；
子节点可以是Element、 Process ingInstruction、Comment、 Text、CDATASection或EntityRe ference。
文档片段的作用是充当其他要被添加到文档的节点的仓库。
可以使用document.createDocumentFragment()方法创建文档片段。1let fragment = document.createDocumentFragment();
文档片段从Node类型继承了所有文档类型具备的可以执行DOM操作的方法。
如果文档中的一个节点被添加到一一个文档片段，则该节点会从文档树中移除， ...
JavaScript学习笔记——DOM类型（CDATASection类型和DocumentType类型）
CDATASection类型
CDATASection类型表示XML中特有的CDATA区块。
CDATASection类型继承Text类型，因此拥有包括splitText ()在内的所有字符串操作方法。
CDATASection类型的节点具有以下特征:
nodeType等于4；
nodeName值为”#cdata-section”；
nodeValue值为CDATA区块的内容；
parentNode值为Document或Element对象；
不支持子节点。
CDATA区块只在XML文档中有效，因此某些浏览器比较陈旧的版本会错误地将CDATA区块解析为Comment或Element。
在真正的XML文档中，可以使用document.createCDataSection()并传入节点内容来创建：CDATA区块。
DocumentType类型
DocumentType类型的节点包含文档的文档类型(doctype)信息，具有以下特征：
nodeType等于10；
nodeName 值为文档类型的名称；
nodeValue值为null；
parentNode值为Document对 ...
JavaScript学习笔记——DOM类型（Comment类型）
Comment类型
DOM中的注释通过Comment类型表示。
Comment类型的节点具有以下特征:
nodeType等于8；
nodeName值为”#comment “；
nodeValue值为注释的内容；
parentNode值为Document或Element对象;
不支持子节点。
Comment类型与Text类型继承同一个基类( CharacterData )因此拥有除splitText ()之外Text节点所有的字符串操作方法。
与Text类型相似，注释的实际内容可以通过nodeValue或data属性获得。
12<!--注释节点可以作为父节点的子节点来访问。比如下面的HTML代码:--><div id="myDiv"><!-- A comment --></div>
1234//可以像下面这样访问它let div = document.getElementById("myDiv"); let comment = div.firstChild; alert(comment.dat ...
JavaScript学习笔记——DOM类型（Text类型）
Text类型
Text节点由Text类型表示，包含按字面解释的纯文本，也可能包含转义后的 HTML字符，但不含HTML代码。
Text类型的节点具有以下特征：
nodeType等于3；
nodeName值为”#text “；
nodevalue值为节点中包含的文本；
parentNode值为Element对象；
不支持子节点。
Text节点中包含的文本可以通过nodevalue属性访问，也可以通过data属性访问，这两个属性包含相同的值。
修改nodevalue或data的值，也会在另一个属性反映出来。文本节点暴露了以下操作文本的方法:
appendData(text)，向节点末尾添加文本text；
deleteData(offset，count)，从位置offset开始删除count个字符；
insertData(offset，text)，在位置offset插人text；
replaceData(offset，count，text)，用text替换从位置offset到offset+count的文本；
splitText ( offset)，在位置offset将当前文本节点拆分为两 ...
JavaScript学习笔记——DOM类型（Element类型）
Element类型
Element表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。
Element类型的节点具有以下特征：
nodeType等于1；
nodeName值为元素的标签名；
nodevalue值为null；
parentNode值为Document或Element对象；
子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference类型。
可以通过nodeName或tagName属性来获取元素的标签名。这两个属性返回同样的值（添加后一个属性明显是为了不让人误会)。
1<div id="myDiv"></div>
123let div = document.getElementById("myDiv"); alert(div.tagName); // "DIV" alert(div.tagName == div.nodeName); // true
在 HTML 中，元 ...
JavaScript学习笔记——DOM类型（Document类型）
Document类型
Document类型是JavaScript中表示文档节点的类型。
在浏览器中，文档对象 document是HTMLDocument 的实例(HTMLDocument继承Document )，表示整个HTML页面。
document是window对象的属性，因此是一个全局对象。
Document类型的节点有以下特征：
nodeType等于9；
nodeName值为”#document”；
nodeValue值为null;
parentNode值为null；
ownerDocument值为null；
子节点可以是DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment类型。
Document类型可以表示HTML页面或其他XML文档，但最常用的还是通过HTMLDocument的实例取得document对象。
document对象可用于获取关于页面的信息以及操纵其外观和底层结构。
1、文档子节点
有两个快捷方式用于访问子节点：
documentElement属性：始终指向HTML页面中的html元素 ...
JavaScript学习笔记——DOM类型（Node类型）
Node类型
DOMLevel 1描述了名为Node的接口，这个接口时所有DOM节点类型都必须实现的。
每个节点都有nodeType 属性，表示该节点的类型。节点类型由定义在 Node类型上的12个数值常量表示:
Node.ELEMENT_NODE（1）
Node.ATTRIBUTE_NODE（2）
Node.TEXT_NODE（3）
Node.CDATA_SECTION_NODE（4）
Node.ENTITY_REFERENCE_NODE（5）
Node.ENTITY_NODE（6）
Node.PROCESSING_INSTRUCTION_NODE（7）
Node.COMMENT_NODE（8）
Node.DOCUMENT_NODE（9）
Node.DOCUMENT_TYPE_NODE（10）
Node.DOCUMENT_FRAGMENT_NODE（11）
Node.NOTATION_NODE（12）
1、nodeName与nodeValue
nodeName 与nodeValue 保存着有关节点的信息。
这两个属性的值完全取决于节点类型，在使用这两个属性 ...
