DOM

DOM 是 Document Object Model（文档对象模型）的缩写。

 

1、DOM节点

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

节点父（parent）、子（child）和同胞（sibling）：

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

2、DOM方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

文档操作方法 (Document Methods)

查找元素：

  • getElementById(id)：通过元素的 ID 查找元素。
  • getElementsByClassName(className)：通过类名查找元素集合。
  • getElementsByTagName(tagName)：通过标签名查找元素集合。
  • querySelector(selector)：返回匹配选择器的第一个元素。
  • querySelectorAll(selector)：返回匹配选择器的所有元素。

创建和操作节点：

  • createElement(tagName)：创建指定标签的元素。
  • createTextNode(data)：创建一个文本节点。
  • createDocumentFragment()：创建一个文档片段。
  • importNode(node, deep)：从其他文档导入节点。
  • cloneNode(deep)：克隆节点。

文档信息：

  • documentElement：返回文档的根元素。
  • body：返回文档的 <body> 元素。
  • head：返回文档的 <head> 元素。

元素操作方法 (Element Methods)

属性和内容：

  • getAttribute(name) / setAttribute(name, value)：获取/设置元素属性。
  • removeAttribute(name)：移除属性。
  • hasAttribute(name)：检查是否存在属性。
  • innerHTML：获取或设置 HTML 内容。
  • outerHTML：获取或设置元素的整个 HTML 结构。
  • textContent：获取或设置元素的文本内容。

类名操作：

  • lassList.add(className)：添加类名。
  • classList.remove(className)：移除类名。
  • classList.toggle(className)：切换类名。
  • classList.contains(className)：检查类名是否存在。

节点操作方法 (Node Methods)

添加和移除节点：

  • appendChild(node)：添加子节点。
  • insertBefore(newNode, referenceNode)：在参考节点前插入新节点。
  • removeChild(node)：移除子节点。
  • replaceChild(newNode, oldNode)：用新节点替换旧节点。

节点信息：

  • childNodes：获取所有子节点。
  • firstChild / lastChild：获取第一个/最后一个子节点。
  • parentNode：获取父节点。
  • nextSibling / previousSibling：获取下一个/上一个兄弟节点。

事件处理方法 (EventTarget Methods)

添加和移除事件监听：

  • addEventListener(type, listener, options)：为事件类型添加监听器。
  • removeEventListener(type, listener, options)：移除事件监听器。

触发事件：

  • dispatchEvent(event)：触发事件。

样式操作方法

直接操作样式：

  • style：通过 element.style.property 操作内联样式。

获取计算样式：

  • getComputedStyle(element)：获取元素的计算样式。

高级方法

DOM 遍历和查询 (NodeIterator 和 TreeWalker)：

  • createNodeIterator(root, whatToShow, filter)：创建一个节点迭代器。
  • createTreeWalker(root, whatToShow, filter)：创建一个树遍历器。

范围操作 (Range)：

  • createRange()：创建一个 Range 对象。
  • Range.selectNode(node)：选择一个节点。
  • Range.deleteContents()：删除范围内的内容。

其他实用方法

滚动相关：

  • scrollTo(x, y)：滚动到指定位置。
  • scrollBy(dx, dy)：相对滚动。
  • scrollIntoView()：滚动元素到可视范围。

焦点控制：

  • focus()：聚焦元素。
  • blur()：移除元素焦点。

全屏操作：

  • requestFullscreen()：请求全屏。
  • exitFullscreen()：退出全屏。

扩展功能

Shadow DOM：

  • attachShadow({ mode })：创建 Shadow DOM。
  • shadowRoot：访问 Shadow DOM。

模板内容：

  • content：获取 <template> 的内容。

3、DOM属性

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

文档属性 (Document Properties)

基本信息：

  • documentElement：指向文档的根元素（通常是 <html>）。
  • body：指向文档的 <body> 元素。
  • head：指向文档的 <head> 元素。
  • title：获取或设置文档的标题。
  • URL：当前文档的完整 URL。
  • domain：当前文档的域名。
  • referrer：引用当前文档的 URL。
  • cookie：获取或设置与文档关联的 Cookie。

查找节点：

  • activeElement：当前活动（聚焦）的元素。
  • forms：文档中所有 <form> 元素的集合。
  • images：文档中所有 <img> 元素的集合。
  • links：文档中所有 <a> 元素（带 href 属性）的集合。
  • scripts：文档中所有 <script> 元素的集合。
  • styleSheets：文档中所有样式表的集合。

文档状态：

  • readyState：文档加载状态（loading、interactive 或 complete）。
  • lastModified：文档上次修改的时间。
  • characterSet：文档的字符集。

元素属性 (Element Properties)

基本结构：

  • tagName：元素的标签名（大写形式，如 DIV）。
  • id：元素的 ID。
  • className：元素的类名。
  • classList：表示类名的动态列表，支持添加、移除、切换等操作。

内容和属性：

  • innerHTML：获取或设置元素的 HTML 内容。
  • outerHTML：获取或设置元素的整个 HTML 结构。
  • textContent：获取或设置元素的文本内容。
  • attributes：元素的属性集合。
  • dataset：包含元素所有 data-* 属性的键值对。

样式相关：

  • style：内联样式对象。
  • clientHeight / clientWidth：元素的可见区域高度和宽度（包括内边距，不包括边框和滚动条）。
  • offsetHeight / offsetWidth：元素的整体高度和宽度（包括边框和内边距）。
  • scrollHeight / scrollWidth：元素内容的高度和宽度（包括被隐藏的部分）。

位置信息：

  • offsetTop / offsetLeft：元素相对于包含块的偏移量。
  • scrollTop / scrollLeft：元素的滚动条位置。

节点属性 (Node Properties)

节点信息：

  • nodeName：节点名称（元素的标签名、文本节点为 #text 等）。
  • nodeType：节点类型（1 表示元素，3 表示文本节点，9 表示文档）。
  • nodeValue：节点值（文本节点的内容）。

节点关系：

  • parentNode：父节点。
  • childNodes：所有子节点的集合。
  • firstChild / lastChild：第一个/最后一个子节点。
  • previousSibling / nextSibling：前一个/后一个兄弟节点。

子元素快捷属性：

  • children：所有子元素的集合。
  • firstElementChild / lastElementChild：第一个/最后一个子元素。
  • childElementCount：子元素的数量。

事件相关属性

  • 事件绑定：

    • onclick / onmouseover / onkeydown 等：绑定对应事件的处理函数。
    • addEventListener 和 removeEventListener 方法常用于替代这些属性。

  • 事件状态：

    • isTrusted：事件是否由用户触发（而非脚本）。
    • defaultPrevented：事件的默认操作是否被阻止。

文本节点属性 (Text Node Properties)

  • data：文本节点的内容。
  • length：文本节点内容的长度。
  • wholeText：完整的文本内容。

样式和计算属性

  • style：内联样式对象。
  • currentStyle（仅限 IE）：元素的当前样式。
  • getComputedStyle(element)：获取元素的计算样式。

范围属性 (Range Properties)

  • commonAncestorContainer：范围内所有节点的共同祖先节点。
  • startContainer / endContainer：范围起点/终点的节点。
  • startOffset / endOffset：起点/终点的偏移量。

Shadow DOM 属性

  • shadowRoot：元素的 Shadow DOM。
  • mode：Shadow DOM 的模式（open 或 closed）。
  • host：Shadow DOM 的宿主元素。

4、DOM访问

通过DOM的方法和属性进行访问

示例：document.getElementById("main").getElementsByTagName("p");

 

posted @ 2024-12-13 11:58  迷糊的我  阅读(241)  评论(0)    收藏  举报