JS复习：第十十一章
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS复习：第十十一章相关的知识，希望对你有一定的参考价值。
第十章
NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点，但它并不是Array实例，将其转化为数组的方法：
function converToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //slice方法的参数
}catch(ex){
array = new Array();
for(var i = 0,len = nodes.length ; i < len ; i++){
array.push(nodes[i]);
}
}
return array;
}
一、节点的属性：
1：父子节点中：
parentNode：子节点的parentNode属性指的是父节点
childNodes：父节点的childNodes属性指的是一个或多个子节点
2兄弟节点中：
nextSibling：下一个兄弟节点
previousSibling：上一个兄弟节点
所有节点的一个共同属性是：ownerDocument，该属性指向表示整个文档的文档节点。可以通过这个属性不必在节点层次中层层回溯就访问文档节点。
二、节点的操作：
1.insertBefore()：把节点放在childNodes列表中某个特定的位置。
2.appendChild()：插入节点但是始终在最后一个位置。
这两种方法都是插入节点，不会移除节点。
3.replaceChild()：替换节点，被替换的节点的所有关系指针都会从被它替换的节点复制过来。尽管从技术上讲，被替换的节点仍然还在文档中，但它在文档中已经没有了自己的位置。
有两个方法是所有节点都有的：
1.cloneNode()：用于创建调用这个方法的节点的一个完全相同的副本。这个方法接收一个布尔值参数，true时执行深复制，复制节点及其整个子节点树；false时执行浅复制，只复制节点本身。复制的节点副本属于文档所有，没有父节点。除非为它指定父节点。
2.normalize()：这个方法唯一的作用就是处理文档树中的文本节点。如果一个节点使用了这个方法，就会在它的后代节点中查找，找到空的文本节点就将其删除，找到相邻的文本节点就将它们合并为一个文本节点。
十一章
DOM扩展
一、SelectorsAPILevel 1的核心是两个方法：querySelector( )和querySelectorAll( )。
1. querySelector( )
接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
2. querySelectorAll( )
接收一个CSS选择符，返回的是所有匹配的元素，也就是带有属性和方法的NodeList的实例。如果没有匹配的元素，NodeList就是空的。
二、SelectorsAPILevel 2规范为Element类型新增了一个方法matchesSelector()。这个方法接受一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true，否则，返回false。
三、html5与类相关的扩充
1.getElementsByClassName()
接收类名，返回带有指定类的所有元素的NodeList。调用这个方法时，只有位于调用元素子树中的元素才返回。在document对象上调用getElementByClassName()始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。
2.className属性与classList属性
假设有一个<div>包含了三个类名，如下：
<div class = ‘boss user designer’>
现在要从中删除一个类名，有两种方法：
>>>1.使用className属性。
代码如下：
//删除‘user’类
//首先取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删的类名
var pos = -1,
i,
len,
for(i = 0,len = classNames.length;i<len;i++){
if(classNames[i] == ‘user’){
pos = i;
break;
}
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并重新设置
div.className = classNames.join(“ ”);
这么做比较繁琐，因为每次都必须将类名拆分然后删除完重新组合。所以HTML5新增了一个classList属性。
>>>2.classList属性
classList属性是新集合类型DOMTokenList的实例。它定义了如下方法：
（1）add(value)：将给定的字符串添加到列表中。如果值已经存在，就不添加了。
（2）contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
（3）remove(value)：从列表中删除给定的字符串。
（4）toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
这样，上面例子的所有操作可以变成一行代码：
div.classList.remove(‘user’)；
四、HTMLDocument的新增属性
1.readyState属性
Document的readyState属性有两个可能的值：loading（正在加载文档）和complete（已经加载完文档）用法如下：
if(document.readyState == ‘complete’){
//执行操作
}
2.兼容模式
Document的compatMode属性告诉开发人员浏览器采用了哪种渲染模式。在标准模式下，document.compatMode的值等于“CSS1Compat”而在混杂模式下document.compatMode的值等于“BackCompat”。
3.head属性
document.head属性引用文档的<head>元素。要引用<head>元素可以结合使用这个属性的另一个后背方法：
var head = document.head||document.getElementsBytagName(“head”)[0];
如果可以，就使用document.head，否则仍然使用getElementsByTagName( )方法。
4.自定义数据属性
HTML5规定可以为元素添加非标准的属性，只要添加前缀data- ，添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性的值。
例如：
<div id=’myDiv’ data-appId=‘12345’ data-myname=’Nicholas’></div>
//获取节点
var div = document.getElementById(‘myDiv’);
//获取自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = ‘Michael’;
//有没有”myname”值呢？
if(div.dataset.myname){
alert(“hello,”+div.dataset.myname);
}
以上是关于JS复习：第十十一章的主要内容，如果未能解决你的问题，请参考以下文章