DOM

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没有多大区别

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树,允许开发...
    劼哥stone阅读 761评论 8 6
  • 节点层次 DOM 可以将任何 HTML 和 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型,每...
    云之外阅读 531评论 0 1
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 623评论 0 1
  • 好好的一天,晚上看到透析袋破了,觉得整个人都不好了……不得不重新开始,希望另外一个明天千万不要破啊……希望明天有结...
    好梦不遥远阅读 235评论 1 1
  • 青岛栈桥是青岛海滨风景区的景点之一,是国务院于1982年首批公布的国家级风景名胜区、国家AAAA级旅游景区。青岛栈...
    llllllHllllll阅读 1,080评论 0 0