DOM

字数 1468阅读 17

1. 节点类型nodeType

1 element(元素)
2 attribute(属性)
3 text(文本)
8 comment(注释)
9 document

2. 节点关系

childNodes 访问元素的子节点,其中保存着一个NodeList对象,它是一种类数组对象。将NodeList转换为数组:

function convertToArray(nodes) {
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes,0);
    } catch (ex) {
        array = new Array();
        for(var i = 0, len = nodes.length; i < len; i++) {
            array.push(nodes[i]);
        }
    }
    return array;
}

parentNode 指向文档树中的父节点
previousSibling 访问节点的上一个同胞(兄弟)节点
nextSibling 访问节点的下一个同胞(兄弟)节点
firstChild 指向childNodes列表中的第一个子节点
lastChild 指向childNodes列表中的最后一个子节点,只有一个节点的情况下,firstChild和lastChild指向同一个节点,如果没有子节点,则均为null
ownerDocument 指向表示整个文档的文档节点
hasChildNodes() 在节点包含一个或多个子节点的情况下返回true

(以下属性返回的元素都不包含空白文本节点)
childElementCount 返回子元素(不包括文本节点和注释)的个数
firstElementChild 指向第一个子元素
lastElementChild 指向最后一个子元素
previousElementSibling 指向前一个同辈元素
nextElementSibling 指向后一个同辈元素
children 指向元素中同样还是元素的子节点

contains(node) 被检测的节点是不是该节点的后代。接收一个参数,即要检测的后代节点,是返回true,否则返回false

3. 操作节点

appendChild(someNode) 向childNodes的末尾添加一个节点,如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的的位置移到新位置
insertBefore(newNode, someNode) 在某个特定的位置之前插入节点,接收两个参数,分别是要插入的节点和作为参考的节点,如果参照节点是null,那么insertBefore()和appendChild()执行相同的操作
replaceChild(newNode, replaceNode) 替换某个指定的节点。接收两个参数,分别是要插入的节点和要替换的节点
removeNode(someNode) 移除某个节点。

cloneNode() 复制某个节点。接收一个布尔值,表示是否进行深复制。参数为true,执行深复制,即复制节点及其整个子节点树;参数为false,执行浅复制,只复制节点本身
normalize() 处理文档树种的文本节点。如果在包含两个或多个文本节点的父元素上调用normalize()方法,则会将所有文本节点合并成一个节点

4. 文档子节点和文档信息

document.documentElement 取得对<html>的引用
document.body 取得对<body>的引用
document.doctype 取得对<!DOCTYPE>的引用(浏览器对其的支持差别很大)

document.title 取得文档的标题
document.URL 取得完整的URL
document.domain 取得域名
document.referrer 取得链接到当前页面的那个页面的URL

5. 查找元素

document.getElementById() 通过元素的ID查找,唯一性
document.getElementsByTagName() 通过标签名
document.getElementsByName() 通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的),只用HTMLDocument类型才有

(扩展)
querySelector() 接收一个CSS选择符,返回与该选择符匹配的第一个元素
querySelectorAll() 接收一个CSS选择符,返回所有匹配的元素,返回的是一个NodeList的实例
matchesSelector() 接收一个CSS选择符,如果调用元素与该选择符匹配,返回true,否则,返回false。(大多数浏览器还不支持,需要加前缀ms/moz/webkit才支持)
getElementsByClassName() (HTML5新增)通过类名查找,可以接收一个或多个类名

6. 取得特性

getAttribute() 获得特性,一个参数,要获取的特性名
setAttribute() 设置特性,两个参数,要设置的特性名和值
removeAttribute() 删除特性

7. 创建元素

document.createElement() 创建新元素,接收一个参数,即要创建元素的标签名
document.createTextNode() 创建新文本节点,接收一个参数,即要插入节点的文本
document.createDocumentFragment() 创建文档片段,文档片段是一种“轻量级”的文档,可以包含和控制节点,但不会像完整文档那样占用额外的资源

8. 其他

classLists HTML5新增,一种操作类名的方式,可以获得元素类名的集合
document.activeElement 指向DOM中当前获得了焦点的元素,文档加载期间为null,文档加载完成后保存的是document.body中的元素的引用
document.hasFocus() 用于确定文档是否获得了焦点
document.readyState 有两个可能的值,loading(正在加载文档)和complete(已经加载完文档),通常通过它来实现一个指示文档已经加载完成的指示器
document.compatMode 告诉开发人员浏览器采用了那种渲染模式。在标准模式下,它的值为“CSS1Compat”,而在混杂模式下,它的值为“BackCompat”
document.head HTML新增,引用文档的<head>元素
dataset HTML5规定可以为元素添加非标准的属性,但要添加前缀data-。通过dataset可以来访问自定义的属性的值,如:

<div data-appId="1234"></div>

var appid = div.dataset.appId;

innerHTML 返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记
outerHTML 返回调用它的元素及所有子节点的HTML标签
innerText 元素中包含的所有文本的内容,包括自文档树中的文本。它会过滤掉HTML标签,将其转化为文本。如:

<div id="content">Hello World!</div>

div.innerText = "Hello & welcome, <b>\"reader\"!</b>";
//会变成
<div id="content">Hello &amp; welcome, &lt;b&bt;&quot;reader&quot;!&lt;b&bt;&quot;</div>

outerText 除了作用范围扩大到了包围调用它的节点之外,与innerText没有多大区别

推荐阅读更多精彩内容