DOM

1. 节点类型nodeType

1 element(元素)

2 attribute(属性)

3 text(文本)

4 comment(注释)

5 document(文档)

2. 节点关系

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

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可以来访问自定义的属性的值,如:

innerHTML 返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记

outerHTML 返回调用它的元素及所有子节点的HTML标签

innerText 元素中包含的所有文本的内容,包括自文档树中的文本。它会过滤掉HTML标签,将其转化为文本。如:

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

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