第十章

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复习：第十、十一章的更多相关文章

  1. JS复习：二十一章

    一.XHR对象 Ajax( )对象的核心技术就是XMLHttpRequest对象. 二.XHR的用法 在使用XHR对象时,要调用的第一个方法是open( ),它接受3个参数:要发送的请求类型(&quo ...

  2. JS复习：第七章

    第七章  函数表达式 一.定义函数的方式有两种:函数声明和函数表达式. 1.函数声明: function functionName(arg0 , arg1 , arg2){ //函数体... } 函数 ...

  3. JS复习：第三章&第四章

    第三章 一.把一个值转换成字符串的两种方法: 1.使用每个值都有的toString( )方法.这个方法唯一要做的就是返回相应值的字符串表现.例如: var age = 11 ; var ageAsSt ...

  4. CSS3秘笈复习：第十一章

    1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...

  5. JS复习：第二十三章

    一.Cookie的构成: 1.名称:一个唯一确定cookie的名称.cookie名称不区分大小写,必须是经过URL编码的. 2.值:存储在cookie中的字符串值,必须被URL编码. 3.域:cook ...

  6. JS复习：第六章

    创建对象 一.工厂模式 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o ...

  7. 读书笔记 - js高级程序设计 - 第十一章 DOM扩展

      对DOM的两个主要的扩展 Selectors API HTML5  Element Traversal 元素遍历规范 querySelector var body = document.query ...

  8. 7.24，《C Primer Plus》复习第十五章第二小题

    编写一个程序,通过命令行参数读取两个二进制字符串,对这两个二进制数使用~运算符,&运算符.|运算符,并以二进制字符串形式打印结果(如果无法使用命令行环境,可以通过交互式让程序读取字符串) 编写 ...

  9. <构建之法>第十一章、十二章有感

    十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...

随机推荐

  1. （七）第一个python程序！

    这是对我自己来说比较有仪式的一篇随笔记录,说了那么多,开始第一个pyhton小程序吧! 首先找一个版本比较新的Linux系统, 执行Python –V 查看一下你的Python版本: # python ...

  2. Python高手之路【九】python基础之迭代器与生成器

    迭代器与生成器 1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外 ...

  3. Python3 操作Excel--openpyxl

    操作Excel文件建议使用openpyxl 兼容office2016 打开excel文件,获取工作表 import openpyxl wb=openpyxl.load_workbook('ttt.xl ...

  4. JavaEE XML StAX创建

    StAX创建XML文档 @author ixenos 1. 如果通过DOM树来创建XML文件时,发现这个DOM树没有其他用途,那么这种方式就不是很高效,这时我们可以使用StAX API直接将XML树写 ...

  5. Scala Singleton对象

    Scala Object: scala没有静态的修饰符,例如Java中的static.但是Scala提供了Object类型,object下的成员都是静态的,比较像Java的静态类.不同在于Scala的 ...

  6. RF环境安装-mac-osx10.10-基础环境-安装指南

    一.适用环境: mac系列,osx10.10,自带Python 二.简要步骤: 1. 安装pip,mac自带Python环境,所以我们改成安装pip 2. 安装wxPython,此处我下载的版本是wx ...

  7. ES 6 : 字符串的扩展

    1. 字符的Unicode表示法 JavaScript允许表示\u0000—\uFFFF之间的字符.超出这个范围,必须用2个双字节的形式表达.如:"\u20BB7"是汉字 &quo ...

  8. [Q]AdobePDF虚拟打印机自动保存PDF

    使用打图精灵打印时,选择“Adobe PDF”虚拟打印机打印(注意不选择“打印到文件”),每张图纸都会弹出一个保存对话框,如何避免? 从 操作系统->控制面板->硬件和声音->设备和 ...

  9. [Jmeter]jmeter之脚本录制与回放，优化（windows下的jmeter）

    一.录制脚本: 1.启动jmeter 2.添加线程组 3.添加http代理 4.配置代理 a.jmeter侧(注意:lest plan content这里需要选择目标控制器,本文即测试计划中需要选择的 ...

  10. centos7，yum安装的redis用systemctl无法启动

    因为之前使用显示命令启动redis的,要使redis在后台运行就需要改redis.conf中的daemonize 为yes. 这次在centos7上也顺手改了为yes,然后使用systemctl启动, ...