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复习:第十十一章的主要内容,如果未能解决你的问题,请参考以下文章

第十十一章

构建之法第十十一章

网络操作系统第十十一章习题

软考数据库系统工程师复习资料(完全版)

构造之法第十十二章

《构建之法》第十十二章学习总结