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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。