10.3 JS DOM 对象操作

DOM是什么

• DOM（Document Object Model 文档对象模型）是W3C的标准，是所有浏览器公共遵守的标准。
• DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。
• DOM定义了访问 HTML 和 XML 文档的标准，是HTML和XML的应用程序接口（API），它允许程序和脚本动态地访问和更新文档的内容、结构和样式。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树，这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点父、子和同胞

节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点、除了根（它没有父节点）
• 一个节点可拥有任意数量的子
• 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

HTML DOM Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

• document.activeElement 属性 返回文档中当前获得焦点的元素
• document.addEventListener() 函数 用于向文档添加事件句柄
• document.adoptNode(node) 函数 从另外一个文档返回 adapded 节点到当前文档
• document.anchors 属性 集合返回了当前页面的所有超级链接数组
• document.applets 返回对文档中所有 Applet 对象的引用
• document.baseURI 属性 返回 HTML 文档的基础URI
• document.body 属性 返回文档的body元素
• document.close() 用于关闭浏览器窗口
• document.cookie 属性 返回当前文档所有 键/值 对的所有 cookies
• document.createAttribute() 函数 用于创建一个指定名称的属性，并返回Attr 对象属性
• document.createComment() 函数 可创建注释节点
• document.createDocumentFragment() 函数 创建了一虚拟的节点对象，节点对象包含所有属性和方法
• document.createElement() 函数 通过指定名称创建一个元素
• document.createTextNode() 函数 可创建文本节点
• document.doctype 属性 可返回与文档相关的文档类型声明（Document Type Declaration）
• document.documentElement 属性 以一个元素对象返回一个文档的文档元素
• document.documentMode 属性 返回浏览器渲染文档的模式
• document.documentURI 属性 可设置或返回文档的位置
• document.domain 属性 可返回下载当前文档的服务器域
• document.domConfig 属性 返回normalizeDocument()被调用时所使用的配置
• document.embeds 集合 返回文档中所有嵌入的内容（embed）集合
• document.forms 集合 返回当前页面所有表单的数组集合
• document. getElementsByClassName() 函数 返回文档中所有指定类名的元素集合，作为 NodeList 对象
• document.getElementById() 函数 可返回对拥有指定 ID 的第一个对象的引用
• document.getElementsByName() 函数 可返回带有指定名称的对象的集合
• document.getElementsByTagName() 函数 可返回带有指定标签名的对象的集合
• document.images 集合 返回当前文档中所有图片的数组
• document.implementation 属性 可返回处理该文档的 DOMImplementation 对象
• document.importNode() 函数 把一个节点从另一个文档复制到该文档以便应用
• document.inputEncoding 属性 可返回文档的编码（在解析时）
• document.lastModified 属性 可返回文档最后被修改的日期和时间
• document.links 集合 返回当期文档所有链接的数组
• document.normalize() 函数 合并相邻的文本节点并删除空的文本节点
• document.normalizeDocument() 函数 可以移除空文本节点 , 并合并相邻节点
• document.open() 函数 打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容
• document.querySelector() 函数 返回文档中匹配指定 CSS 选择器的一个元素
• document.querySelectorAll() 函数 document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
• document.readyState 属性 返回当前文档的状态（载入中……）
• document.referrer 属性 返回载入当前文档的来源文档的URL
• document.removeEventListener() 函数 用于移除由 document.addEventListener() 方法添加的事件句柄
• document.scripts 集合 返回页面中所有脚本的集合
• document.strictErrorChecking 属性 可设置或返回是否强制进行错误检查（error-checking）
• document.title 属性 可返回当前文档的标题（ HTML title 元素中的文本）
• document.URL 属性 可返回当前文档的 URL
• document.write() 函数 可向文档写入 HTML 表达式或 JavaScript 代码
• document.writeln() 函数 与 write() 方法作用相同，外加可在每个表达式后写一个换行符

HTML DOM 元素 (Element) 对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。所有主流浏览器都支持元素对象和NodeList 对象。

• element.accessKey 属性 可设置或返回访问单选按钮的快捷键
• element.addEventListener() 函数 用于向指定元素添加事件句柄
• element.appendChild() 函数
• element.attributes 属性 返回指定节点属性的集合
• element.childNodes 属性 返回包含被选节点的子节点的 NodeList
• element.classlist 属性 返回元素的类名，作为 DOMTokenList 对象
• element.className 属性 设置或返回元素的 class 属性
• element.clientHeight 属性 在页面上返回内容的可视高度（不包括边框，边距或滚动条）
• element.clientWidth 属性 在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
• element.cloneNode() 函数 可创建指定的节点的精确拷贝，拷贝所有属性和值，该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
• element.compareDocumentPosition() 函数 按照文档顺序，比较当前节点与指定节点的文档位置
• element.contentEditable 属性 用于设置或返回元素的内容是否可编辑
• element.dir 属性 设置或返回元素的文字方向
• element.firstChild 属性 返回被选节点的第一个子节点，如果选定的节点没有子节点则该属性返回NULL
• element.focus() 函数 用于为元素设置焦点（如果可以设置）
• element.getAttribute() 函数 通过名称获取属性的值
• element.getAttributeNode() 函数 从当前元素中通过名称获取属性节点
• element.getElementsByTagName() 函数 可返回带有指定标签名的对象的集合
• element. getElementsByClassName() 函数 返回文档中所有指定类名的元素集合，作为 NodeList 对象
• element.getFeature() 函数 返回指定特征的执行APIs对象
• element.getUserData() 函数 返回一个元素中关联键值的对象
• element.hasAttribute() 函数 通过名称获取属性的值
• element.hasAttributes() 函数 如果某节点有任何属性时返回 true，否则返回 false
• element.hasChildNodes() 函数 可在某节点用于任何子节点时返回 true，否则返回 fals
• element.hasfocus() 函数 返回布尔值，用于检测文档(或文档内的任一元素)是否获取焦点
• element.id 属性 设置或者发回元素的id
• element.innerHTML 属性 设置或返回表格行的开始和结束标签之间的 HTML
• element.insertBefore() 函数 可在已有的子节点前插入一个新的子节点
• element.isContentEditable 属性 返回元素的内容是否可编辑
• element.isDefaultNamespace() 函数 如果指定的命名空间是默认的 ，isDefaultNamespace() 方法返回 true，否则返回 false
• element.isEqualNode() 函数 用于检查两个节点是否相等
• element.isSameNode() 函数 可在某个节点与给定的节点是同一个节点时返回 true，否则返回 false
• element.isSupported() 函数 用于判断当前节点是否支持某个特性
• element.lang 属性 设置或返回元素的语言
• element.lastChild 属性 可返回文档的最后一个子节点
• element.namespaceURI 属性 为被选节点返回命名空间的 URI
• element.nextSibling 属性 可返回某个元素之后紧跟的元素（处于同一树层级中）
• element.nodeName 属性 可依据节点的类型返回其名称
• element.nodeType 属性 属性返回节点类型
• element.nodeValue 属性 根据节点的类型设置或返回节点的值
• element.normalize() 函数 合并相邻的文本节点并删除空的文本节点
• element.offsetHeight 属性 返回任何一个元素的高度包括边框和填充，但不是边距
• element.offsetWidth 属性 返回元素的宽度，包括边框和填充，但不是边距
• element.offsetLeft 属性 返回当前元素的相对水平偏移位置的偏移容器
• element.offsetParent 属性 返回元素的偏移容器
• element.offsetTop 属性 返回当前元素的相对垂直偏移位置的偏移容器
• element.ownerDocument 属性 可返回某元素的根元素
• element.parentNode 属性 可返回某节点的父节点
• element.previousSibling 属性 可返回某节点之前紧跟的节点（处于同一树层级）
• element.querySelector() 函数 返回匹配指定 CSS 选择器元素的第一个子元素
• document.querySelectorAll() 函数 返回匹配指定 CSS 选择器元素的所有子元素节点列表
• element.removeAttribute() 函数 删除指定的属性
• element.removeAttributeNode() 函数 从元素中删除指定的属性节点
• element.removeChild() 函数 可从子节点列表中删除某个节点
• element.removeEventListener() 函数 用于移除由 addEventListener() 方法添加的事件句柄
• element.replaceChild() 函数 可将某个子节点替换为另一个，新节点可以是文本中已存在的，或者是你新创建的
• element.scrollHeight 属性 返回整个元素的高度（包括带滚动条的隐蔽的地方）
• element.scrollLeft 属性 返回当前视图中的实际元素的左边缘和左边缘之间的距离
• element.scrollTop 属性 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
• element.scrollWidth 属性 返回元素的整个宽度（包括带滚动条的隐蔽的地方）
• element.setAttribute() 函数 创建或改变某个新属性，如果指定属性已经存在,则只设置该值
• element.setAttributeNode() 函数 用于添加新的属性节点
• element.setIdAttribute() 函数
• element.setIdAttributeNode() 函数
• element.setUserData() 函数 在元素中为指定键值关联对象
• element.style 属性 设置或返回元素的样式属性
• element.tabIndex 属性 可设置或返回单选按钮的 tab 键控制次序
• element.tagName 属性 返回元素的标签名
• element.textContent 属性 设置或者返回指定节点的文本内容
• element.title 属性 设置或返回元素的标题
• element.toString() 函数 一个元素转换成字符串
• nodelist.item() 函数 返回一个节点列表中指定索引的节点
• nodelist.length 属性 返回节点集合的数目

HTML DOM 属性 (Attr) 对象

在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。所有主流浏览器都支持 Attr 对象和 NamedNodeMap 对象 (在HTML DOM中, NamedNodeMap对象表示一个无顺序的节点列表, 我们可通过节点名称来访问 NamedNodeMap 中的节点)

• attr.isId 属性 如果属性是 ID 类型（例如，包含了其所属的元素的标识符），则 isId 属性返回 true，否则返回 false
• name 属性 返回属性名称
• value 属性 用于设置或者返回属性的值。
• specified 属性 如果在文档中设置了属性值，则specified属性返回 true，如果是 DTD/Schema 中的默认值，则返回 false
• length 属性 可返回集合中节点的选项数目
• getNamedItem() 函数 返回节点列表中指定属性名的值
• item() 函数 可返回节点列表中处于指定索引号的节点
• removeNamedItem() 函数 可删除指定的节点
• setNamedItem() 函数 用于添加指定节点。如果节点已经存在，它将被替换，并返回替换节点的值，否则将返回 null。

HTML DOM 事件 (Event) 对象

事件允许Javascript在HTML文档元素中注册不同事件处理程序。事件通常与函数结合使用，函数不会在事件发生前被执行！

• 鼠标事件
  • onclick 事件会在元素被点击时发生
  • oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
  • ondblclick 事件会在对象被双击时发生
  • onmousedown 事件会在鼠标按键被按下时发生。
  • onmouseenter 事件在鼠标指针移动到元素上时触发
  • onmouseleave 事件在鼠标移除元素时触发
  • onmousemove 事件会在鼠标指针移出指定的对象时发生
  • onmouseover 事件会在鼠标指针移动到指定的元素上时发生
  • onmouseout 事件会在鼠标指针移出指定的对象时发生
  • onmouseup 事件会在鼠标按键被松开时发生
• 键盘事件
  • onkeydown 事件会在用户按下一个键盘按键时发生
  • onkeypress 事件会在键盘按键被按下并释放一个键时发生
  • onkeyup 事件会在键盘按键被松开时发生
• 框架/对象（Frame/Object）事件
  • onabort 事件在用户中止加载 或 元素时触发
  • onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发
  • onerror 事件在加载外部文件（文档或图像）发生错误时触发
  • onhashchange 事件在当前 URL 的锚部分(以 '#' 号为开始) 发生改变时触发
  • onload 事件会在页面或图像加载完成后立即发生
  • onpageshow 事件在用户浏览网页时触发
  • onpagehide 事件在用户离开网页时触发
  • onresize 事件会在窗口或框架被调整大小时发生
  • onscroll 事件在元素滚动条在滚动时触发
  • onunload 事件在用户退出页面时发生
• 表单事件
  • onblur 事件会在对象失去焦点时发生
  • onchange 事件会在域的内容改变时发生
  • onfocus 事件在对象获得焦点时发生
  • onfocusin 事件在一个元素即将获得焦点时触发
  • onfocusout 事件在元素即将失去焦点时触发
  • oninput 事件在用户输入时触发
  • onreset 事件在表单被重置后触发
  • onsearch 事件在用户按下"ENTER（回车）" 按键或点击 type="search" 的 元素的 "x(搜索)" 按钮时触发
  • onselect 事件会在文本框中的文本被选中时发生
  • onsubmit 事件在表单提交时触发
• 剪贴板事件
  • oncopy 事件在用户拷贝元素上的内容时触发
  • oncut 事件在用户剪切元素的内容时触发
  • onpaste 事件在用户向元素中粘贴文本时触发
• 打印事件
  • onafterprint 事件在页面打印后触发，或者打印对话框已经关闭
  • onbeforeprint 事件在页面即将打印时触发 (在打印窗口出现前
• 拖动事件
  • ondrag 事件在元素或者选取的文本被拖动时触发
  • ondragend 事件在用户完成元素或首选文本的拖动时触发
  • ondragenter 事件在拖动的元素或选择的文本进入到有效的放置目标时触发
  • ondragleave 事件在可拖动的元素或选取的文本移出放置目标时执触发
  • ondragover 事件在可拖动元素或选取的文本正在拖动到放置目标时触发
  • ondragstart 事件在用户开始拖动元素或选择的文本时触发
  • ondrop事件在可拖动元素或选取的文本放置在目标区域时触发
• 多媒体（Media）事件
  • onabort 事件在视频/音频（audio/video）终止加载时触
  • oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
  • oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
  • ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发
  • onemptied 当期播放列表为空时触发
  • onended 事件在视频/音频（audio/video）播放结束时触发
  • onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发
  • onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发
  • onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发
  • onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发
  • onpause 事件在视频/音频（audio/video）暂停时触发
  • onplay 事件在视频/音频（audio/video）开始播放时触发
  • onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发
  • onprogress 事件在浏览器下载指定的视频/音频（audio/video）时触发
  • onratechange 事件在视频/音频（audio/video）的播放速度发生改变时触发
  • onseeked 事件在用户重新定位视频/音频（audio/video）的播放位置后触发
  • onseeking 事件在用户开始重新定位视频/音频（audio/video）时触发
  • onstalled 事件在浏览器获取媒体数据，但媒体数据不可用时触发
  • onsuspend 事件在浏览器读取媒体数据中止时触发
  • ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发
  • onvolumechange
  • onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发
• 动画事件
  • animationend 事件在 CSS 动画完成后触发
  • animationiteration 事件在 CSS 动画重新播放时触发
  • animationstart 事件在 CSS 动画开始播放时触发
• 过渡事件
  • transitionend 事件在 CSS 完成过渡后触发
• 其他事件
  • onmessage 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
  • ononline 事件在浏览器开始在线工作时触发
  • onoffline 事件在浏览器离线工作时触发
  • onpopstate 该事件在窗口的浏览历史（history 对象）发生改变时触发
  • onshow 事件当 <menu> 元素在上下文菜单显示时触发
  • onstorage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
  • ontoggle 事件在用户打开或关闭 &lgt;details> 元素时触发
  • onwheel 事件在鼠标滚轮在元素上下滚动时触发