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复习:第十、十一章的更多相关文章
- JS复习:二十一章
一.XHR对象 Ajax( )对象的核心技术就是XMLHttpRequest对象. 二.XHR的用法 在使用XHR对象时,要调用的第一个方法是open( ),它接受3个参数:要发送的请求类型(&quo ...
- JS复习:第七章
第七章 函数表达式 一.定义函数的方式有两种:函数声明和函数表达式. 1.函数声明: function functionName(arg0 , arg1 , arg2){ //函数体... } 函数 ...
- JS复习:第三章&第四章
第三章 一.把一个值转换成字符串的两种方法: 1.使用每个值都有的toString( )方法.这个方法唯一要做的就是返回相应值的字符串表现.例如: var age = 11 ; var ageAsSt ...
- CSS3秘笈复习:第十一章
1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...
- JS复习:第二十三章
一.Cookie的构成: 1.名称:一个唯一确定cookie的名称.cookie名称不区分大小写,必须是经过URL编码的. 2.值:存储在cookie中的字符串值,必须被URL编码. 3.域:cook ...
- JS复习:第六章
创建对象 一.工厂模式 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o ...
- 读书笔记 - js高级程序设计 - 第十一章 DOM扩展
对DOM的两个主要的扩展 Selectors API HTML5 Element Traversal 元素遍历规范 querySelector var body = document.query ...
- 7.24,《C Primer Plus》复习第十五章第二小题
编写一个程序,通过命令行参数读取两个二进制字符串,对这两个二进制数使用~运算符,&运算符.|运算符,并以二进制字符串形式打印结果(如果无法使用命令行环境,可以通过交互式让程序读取字符串) 编写 ...
- <构建之法>第十一章、十二章有感
十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...
随机推荐
- angular1.x 脏检测
写在前面 双向绑定是angular的大亮点,然后支撑它的就是脏检测.一直对脏检测都有一些理解,却没有比较系统的概念. 以下是我阅读网上博文以及angular高级程序设计的理解与总结. 接收指导与批评. ...
- 安卓---apk反编译
转自:http://blog.csdn.net/vipzjyno1/article/details/21039349 在学习Android开发的过程你,你往往会去借鉴别人的应用是怎么开发的,那些漂亮 ...
- 关于AVL实现的代码记录
试题集合: https://www.patest.cn/contests/pat-a-practise/1064 https://www.patest.cn/contests/pat-a-practi ...
- char、varchar、varchar(2)的区别
char是存储字节是一定的,例如char(10),存储内容为"java",那么实际存储的是"java ",后面是6个空字符.按字节存储: varcha ...
- 创建Properties文件
/** * 生成Properties文件 * @param map Properties文件的内容,键值对 * @param path Properties文件生成后存放的路径 * @param pr ...
- 【转】Jmeter(三)-简单的HTTP请求(非录制)
首先建立一个线程组(Thread Group),为什么所有的请求都要加入线程组这个组件呢?不加不行吗?答案当然是不行的.因为jmeter的所有任务都必须由线程处理,所有任务都必须在线程组下面创建. 选 ...
- PHP微信支付开发之扫描支付(模式二)后如何回调
其实在写这篇文章的时候感觉自己已经落伍了,不过笔者在百度上搜索"微信支付开发之扫描支付(模式二)后如何回调"寻找答案时,发现依旧有很多朋友没有解决这个问题,所以就把自己的解决思路分 ...
- 浙大 pat 1003 题解
1003. Emergency (25) 时间限制 400 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue As an emerg ...
- git 客户端提交
01 按照git到本地 02 按照小乌龟操作面板, 03 (git 和小乌龟)自动加载到右键快捷方式
- requests模拟登录
#coding:utf-8 #author:jwong import requests import urllib2 import re from bs4 import BeautifulSoup a ...