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:文档加载状态(loadinginteractivecomplete)。
  • 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 等:绑定对应事件的处理函数。
    • addEventListenerremoveEventListener 方法常用于替代这些属性。
  • 事件状态

    • 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 的模式(openclosed)。
  • host:Shadow DOM 的宿主元素。

4、DOM访问

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

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

 

posted @   迷糊的我  阅读(40)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示