选择符API
核心内容是使编程人员可以通过css选择符定位到DOM中的节点
1.querySelector()方法
该方法接收一个css选择符，返回与该选择符匹配的 ** 第一个 *元素，如果没有匹配的元素则返回NULL。
同时，当通过 Element *类型调用querySelector()方法时，只会在该元素后代元素中查找匹配的元素。
//取得body元素
var body = document.querySelector("body");
//取得ID为myDiv的元素
var myDiv = document.querySelector("#myDiv")
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个img元素
var img = document.body.querySelector("img.button");
2.querySelectorAll()方法
接收的参数与 ** querySelector() **方法一样。该方法返回的是所有匹配到的元素，是一个 NodeList 的实例。
//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为“selected”的所有元素
var selecteds = document.querySelectorAll(".selected");
要取得NodeList中的每一个元素可以通过类似访问数组的方括号方式，也可以使用item()方法。
关于元素的遍历
对于元素间的空格很多浏览器都会将其返回为文本节点：
<div>
<li>1</li>
<li>2</li>
<li>3</li>
</div>
对于以上代码我们访问div的子节点个数可能是7个，因为换行/空格都被算为一个文本节点返回了，解决的办法可以是简单的压缩html代码：
<div><li>1</li><li>2</li><li>3</li></div>
实际上在这里记录的是另一种方法，DOM扩展了5个属性
childElementCount:返回子元素（不包括文本节点和注释）的个数
firseElementChild:指向第一个子元素；firstChild的元素版
lastElementChild:指向第一个子元素；lastChild的元素版
previousElementSibling:指向第一个子元素；previousSibling的元素版
nextElementSibling:指向第一个子元素；nextSibling的元素版
具体使用就像以前使用firstChild那些属性一样。
与类相关的扩充
1.getElementsByClassName()方法
该方法接收一个参数，一个包含一个或多个类名的字符串，返回** *带有 * **指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。
//取得所有类中包含"username"和"current"的元素，类名的先后顺序不重要
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID为"myDiv"的元素中带有类名"selected"的所有元素
var selected =document.getElementById("myDiv").getElementsByClassName("selected"):
2.classList 属性
className属性是一个字符串，所以当我们在修改一个元素的类名时即使是看起来十分简单的要求也需要通过修改整个字符串来实现。
但是HTML5 为所有的元素添加了classList这个属性。该属性是新集合类型DOMTokenList的实例。关于这个新集合类型，在写这篇笔记的时候也是第一次接触，所以应该会穿插在之后的笔记中来记录。今天介绍的是classList属性定义的一些方法：
add(value):将给定的字符串值添加到列表中，如果已存在则不添加
contains(value):若列表中已存在该值返回TRUE，否则返回FALSE
remove(value):从列表中删除给定的字符串
toggle(value):若列表中已存在给定值则删除它，否则添加它
使用方法：
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
后记
勤练带来力量
关于初学JavaScript这件事或者说是所有初学的东西，即使是别人看起来很少很简单的内容却仍然要花上许多时间去学习。所以以前从没认识到的每天的坚持和勉励突然间就变得如此重要。记录日记也是逼迫自己每天学习的方式之一吧。
网友评论