选择符 API
querySelector
querySelector()
方法接收一个
CSS
选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回 null
。
//取得 body 元素
var body = document.querySelector("body");
//取得 ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");
querySelectorAll
querySelectorAll返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList
的实例。
//取得某<div>中的所有<em>元素(类似于 getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
要取得返回的 NodeList 中的每一个元素,可以使用 item()方法,也可以使用方括号语法,比如:
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
strong = strongs[i]; //或者 strongs.item(i)
strong.className = "important";
}
matchesSelector
这个方法接收一个参数,即 CSS
选择符,如果调用元素与该选择符匹配,返回
true
;否则,返回
false
。
if (document.body.matchesSelector("body.page1")){
//true
}
因此,如果你想使用这个方法,最好是编写一个包装函数。
function matchesSelector(element, selector){
if (element.matchesSelector){
return element.matchesSelector(selector);
} else if (element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if (element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if (element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else {
throw new Error("Not supported.");
}
}
if (matchesSelector(document.body, "body.page1")){
//执行操作
}
元素遍历
Element Traversal API
为
DOM
元素添加了以下
5
个属性。
- childElementCount:返回子元素(不包括文本节点和注释)的个数。
- firstElementChild:指向第一个子元素;firstChild 的元素版。
- lastElementChild:指向最后一个子元素;lastChild 的元素版。
- previousElementSibling:指向前一个同辈元素;previousSibling 的元素版。
- nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
HTML5
1、与类相关的扩充
getElementsByClassName
getElementsByClassName()
方法接收一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的 NodeList
。
//取得所有类中包含"username"和"current"的元素,类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得 ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
classList
在操作类名时,需要通过
className
属性添加、删除和替换类名。
<div class="bd user disabled">...</div>
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
//执行操作
)
//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}
- add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
- contains(value):表示列表中是否存在给定的值,如果存在则返回 true,否则返回 false。
- remove(value):从列表中删除给定的字符串。
- toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
2、焦点管理
document.activeElement
这个属性始终会引用 DOM
中当前获得了焦点的元素。
// 文档加载期间,document.activeElement 的值为 null。
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
document.hasFocus
这个方法用于确定文档是否获得了焦点。
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
3、HTMLDocument的变化
readyState 属性
Document
的
readyState
属性有两个可能的值:
- loading,正在加载文档
-
complete ,已经加载完文档。
if (document.readyState == "complete"){
//执行操作
}
兼容模式
IE
为此给
document
添加了一个名为
compatMode
的属性,这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。
- 在标准模式下,document.compatMode 的值等于"CSS1Compat",
- 而在混杂模式下,document.compatMode 的值等于"BackCompat"。
if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}
head 属性
作为对
document.body
引用文档的
<body>
元素的补充,
HTML5
新增了
document.head
属性,引用文档的<head>
元素。
var head = document.head || document.getElementsByTagName("head")[0];
document.charset
charset 属性表示文档中实际使用的字符集,也可以用来指定新字符集。默认情况下,这个属性的值为
"UTF-16"
alert(document.charset); //"UTF-16"
document.charset = "UTF-8";
document.defaultCharset
表示根据默认浏览器及操作系统的设置,当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集,那 charset
和
defaultCharset
属性的值可能会不一样。
if (document.charset != document.defaultCharset){
alert("Custom character set being used.");
}
自定义数据属性
HTML5
规定可以为元素添加非标准的属性,但要添加前缀
data-
,目的是为元素提供与渲染无关的 信息,或者提供语义信息。这些属性可以任意添加、随便命名,只要以 data-
开头即可。
<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);
}
专有扩展
children属性
var childCount = element.children.length;
var firstChild = element.children[0];
contains
调用
contains()方法的应该是祖先节点,也就是搜索开始的节点,这个方法接收一个参数,即要检测的后代节点。如果被检测的节点是后代节点,该方法返回 true;否则,返回 false。
alert(document.documentElement.contains(document.body)); //true
插入文本
innerText 属性
通过
innertText
属性可以操作元素中包含的所有文本内容,包括子文档树中的文本。在通过 innerText读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。在通过
innerText写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
// 对于这个例子中的<div>元素而言,其 innerText 属性会返回下列字符串
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
使用
innerText
属性设置这个
<div>
元素的内容,则只需一行代码:
div.innerText = "Hello world!";
执行这行代码后,页面的
HTML
代码就会变成如下所示。
<div id="content">Hello world!</div>
outerText 属性
在读取文本值时,
outerText
与
innerText
的结果完全一样。但在写模式下,
outerText
就完全不同了:outerText
不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。
div.outerText = "Hello world!";
// 这行代码实际上相当于如下两行代码:
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);
scrollIntoView
scrollIntoView()
可以在所有
HTML
元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中。如果给这个方法传入 true
作为参数,或者不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false
作为参数,调用元素会尽可能全部
出现在视口中,(可能的话,调用元素的底部会与视口顶部平齐。)不过顶部不一定平齐。
//让元素可见
document.forms[0].scrollIntoView();