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 属性对其进行访问。

HTML DOM 元素 (Element) 对象

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

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事件在页面即将打印时触发 (在打印窗口出现前
  • 拖动事件
  • 多媒体(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//techbrood.com/jsref?p=event-onvolumechange
    • onwaiting事件在视频由于要播放下一帧而需要缓冲时触发
  • 动画事件
  • 过渡事件
  • 其他事件
    • onmessage该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
    • ononline事件在浏览器开始在线工作时触发
    • onoffline事件在浏览器离线工作时触发
    • onpopstate该事件在窗口的浏览历史(history 对象)发生改变时触发
    • onshow事件当 <menu> 元素在上下文菜单显示时触发
    • onstorage该事件在 Web Storage(HTML 5 Web 存储)更新时触发
    • ontoggle事件在用户打开或关闭 &lgt;details> 元素时触发
    • onwheel事件在鼠标滚轮在元素上下滚动时触发