JS高级程序设计第十一章.个人学习笔记-CSDN博客

1.document.querySelector()方法：

接受一个CSS选择符返回与该模式匹配的第一个元素 如果没有则返回null

2.document.querySelectorAll()方法：

接受一个CSS选择符返回与该模式匹配的NodeList的实例. 如果没有则返回空数组

3.matchesSelector()方法：

接受一个CSS选择符如果调用的元素与该选择符匹配，则返回true 否则返回false 兼容问题查询288页。

元素遍历：

对于元素之间的空格，IE9之前不会返回文本节点，但其他所有浏览器都会返回文本节点。

因此导致了在使用childNodes和firstChild等属性时的行为不一致。

也为此介绍几个能处理这个问题的API：

childElementCount:返回子元素（不包括文本节点和注释）的个数。

firstElementChild:指向第一个子元素；firstChild的元素版。

lastElementChild：指向最后一个子元素；lastChild的元素版。

PreviousElementSibling：指向前一个同辈元素；previousSibling的元素版。

nextElementSibling：指向后一个同辈元素；nextSibling的元素版。

classList属性（chrome Firefox 3.6+支持）

有length属性 去的每个元素可以用item（）方法也可以用方括号语法；

此外还有以下方法：

add（value）：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

contains（value）：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。

remove（value）：从列表删除给定的字符串。

toggle（value）：如果列表中存在给定的值则删除如果不存在则添加

HTML5新增焦点管理功能：

document.activeElement属性：这个属性始终引用DOM中当前获得了焦点的元素。

元素获得焦点的方式有加载、用户输入（通常是通过按Tab键）和在代码中调用focus（）方法

例如：

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

复制代码

默认情况下，

文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。

文档加载期间，document.activeElement的值为null

还新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

var button =document.getElementById('myButton');
button.focus();
alert(document.hasFocus());//true

复制代码

-----------------------------------------------------------

HTMLDocument的变化

HTML5拓展了HTMLDocument,增加了新的功能。与HTML5中新增的其他DOM拓展类似，这些变化同样基于那些已经得到很多浏览器完美支持的专有拓展。所以，尽管这些拓展被写入标准的时间相对不长，但很多浏览器很早就已经支持这些功能了。

1.readyState 属性

Document的readyState属性有两个可能的值：
loading,正在加载文档;
complete,已经加载完文档。

使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。在这个属性得到广泛支持之前，要实现这样一个指示器，必须借助onload事件处理程序设置一个标签，表明文档已经加载完毕。

document.readyState属性的基本用法如下:

if(document.readyState == 'complete'){
    //执行操作
}
复制代码

2.兼容模式

从IE6开始区分渲染页面的模式是标准的还是混杂的，检测页面的兼容模式就成为浏览器的必要功能。

document有个属性compatMode，就是为了告诉开发人员浏览器采用了哪种渲染模式。

标准模式下document.compatMode的值等于Css1Compat

混杂模式下document.compatMode的值等于BackCompat

3.head属性

document.body引用文档的<body>元素。

html5新增document.head引用文档的<head>元素。（Chrome和Safari5兼容）

不兼容的话用getElementsByTagName()方法。

重点：自定义数据属性

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

例如该标签：

<div id='myDiv' data-appId='12345' data-myname='nunu'></div>

添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个名值对儿的映射。在这个映射中，每个

data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀，比如在上面的例子中，自定义属性data-myname映射对应的属性是myname。

支持该属性的浏览器有Firefox 6+ 和Chrome

插入标记

1.innerHTML属性

在读模式下，innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。

在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。例如：

<div id='content'>
    <p>aaa<strong>bbb</strong>ccc</p>
    <ul>
        <li>ddd</li>
        <li>ddd</li>
    </ul>
</div>
复制代码

对于上面的div元素来说他的innerHTML属性会返回如下字符串。

<p>aaa<strong>bbb</strong>ccc</p>
<ul>
    <li>ddd</li>
    <li>ddd</li>
</ul>复制代码

但是，不同浏览器返回的文本格式会有所不同。

在写模式下，innerHTML的值会被解析为DOM子树，替换调用元素原来的所有子节点。因为它的值被认为是HTML，所以其中的所有标签都会按照浏览器处理 HTML的标准方式替换为元素（转换结果因浏览器而异）。如果设置的值是文本而没有HTML标签则会被设置成纯文本（与innerText的在写模式输出一样）。

提前解释一个概念：‘无作用域的元素’= 页面中看不到的元素。类似于style元素和注释。

script元素也被认为是‘无作用域的元素’。

如果通过innerHTML插入的字符串开头就是一个无作用域的元素，那么IT会在解析这个字符串之前先删除该元素。

也就是说如果要用innerHTML插入一段脚本script

需要用类似下面这几种方法：

1.开头添加一个可以被看见的元素(添加之后为了页面美观可能得移除这个文本）

div.innerHTML = '_<script defer>alert('hi');<\/script>';

div.innerHTML = '<div> </div><script defer>alert('hi');<\/script>'

div.innerHTML = '<input type=\"hidden\"><script defer>alert('hi');<\/script>'

关于插入style元素大多数浏览器都是支持直接插入的，

但是IE8及更早的版本中，<style>也是一个没有作用域的元素，因此也可以用上面的第一种方法前置一个有作用域的元素解决该兼容问题。

有一部分元素不支持innerHTML属性。如：<col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>.

在IE8及更早的版本中，<title>元素也没有innerHTML属性

为了更可靠的方式处理HTML。

IE8提供了window.toStaticHTML()方法,这个方法接收一个参数，即一个HTML字符串；返回一个经过无害处理后的版本---从源HTML中删除所有脚本节点和事件处理程序属性。比如：

var text = '<a href = \" #\" onclick = \"alert('hi')\">Click me</a>";
var sanitized = window.toStaticHTML(text);   //IE8 only
alert(sanitized);    //'<a href=\"#\">Click Me</a>' 复制代码

这个例子将一个HTML链接字符串传给了toStaticHTML()方法，得到的无害版本中去掉了onclick事件属性。只有IE8原生支持这个方法，

2.outerHTML属性

在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签。

在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。

<div id='content'>
    <p>aaa<strong>bbb</strong>ccc</p>
    <ul>
        <li>ddd</li>
        <li>ddd</li>
    </ul>
</div>复制代码

如果在DIV元素上调用outerHTML，会返回与上面相同的代码，包括<div>本身。不过，由于浏览器解析和解释HTML标记的不同，结果也可能会有所不同（这里的不同于使用innerHTML属性时存在的差异性质是一样的。）

使用outerHTML属性以下面这种方式设置值：

div.outerHTML = "<p>aaaaaaaaa</p>";复制代码

这行代码的操作与下面这些DOM脚本代码一样：

var  p = document.createElement('p');
p.appendChild(document.createTextNode('aaaaaaaaa'));
div.parentNode.replaceChild(p,div);复制代码

结果就是新创建的p元素会取代DOM树中的div元素。

outerHTML基本不需要考虑兼容性问题（firefox7之前版本不支持其他都不太考虑）

3.insertAdjacentHTML()方法- 插入标记

insertAdjacentHTML()方法接受两个参数：插入位置和要插入的HTML文本。
第一个参数必须是下列值之一：

'beforebegin',在当前元素之前插入一个紧邻的同辈元素；
'afterbegin',在当前元素之下插入一个新的子元素或者在第一个子元素之前再插入新的子元素；
'beforeend",在当前元素之下插入一个新的子元素或者在最后一个子元素之后再插入新的子元素；
'afterend',在当前元素之后插入一个紧邻的同辈元素。
复制代码

注意这些值都是小写形式。

第二个参数是一个HTML字符串（与innerHTML和outerHTML的值相同），如果浏览器无法解析就会抛出错误。

一下是这个方法的基本用法示例。

//作为前一个同辈元素插入
element.insertAdjacentHTML('beforebegin','<p>HEllo world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML('afterend','<p>HEllo world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML('afterbegin','<p>HEllo world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML('beforeend','<p>HEllo world!</p>");复制代码

基本不用考虑兼容问题。