前端程序员-Cloud

# DOM、BOM

DOM、BOM相关的一些概念以及属性

# 0、window

window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM 文档 。

使用 document.defaultView 属性可以获取指定文档所在窗口。

代表了脚本正在运行的窗口的 window 全局变量，被暴露给 Javascript 代码。

Window 接口是各种函数、命名空间、对象和构造函数的家，它们不一定与用户界面窗口的概念直接相关。然而，Window 接口是一个可以包含这些需要全局可用的项目的合适的地方

# 1 EventTarget

EventTarget 接口由可以接收事件、并且可以创建侦听器的对象实现。换句话说，任何事件目标都会实现与该接口有关的这三个方法。 Element 及其子项、document 和 window 是最常见的事件目标，但其他对象也可以是事件目标。比如 XMLHttpRequest、AudioNode 和 AudioContext 等等。

EventTarget

# 2、Node (extends EventTarget)

Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如, 继承同一组方法，或者用同样的方式测试。 以下接口都从 Node 继承其方法和属性：

Document (opens new window), Element (opens new window), Attr (opens new window), CharacterData (opens new window) (which Text (opens new window), Comment (opens new window), and CDATASection (opens new window) inherit), ProcessingInstruction (en-US) (opens new window), DocumentFragment (opens new window), DocumentType (opens new window), Notation, Entity, EntityReference

常用属性:

  1. Node.childNodes 获得所有的子节点， 包括文本节点

  2. children 获得所有的Node.ELEMENT_NODE，也就是元素节点

  3. Node.firstChild

  4. Node.lastChild

  5. Node.nextSibling

  6. Node.previousSibling

  7. Node.isConnected 只读属性，返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上

  8. Node.nodeName 返回一个包含该节点名字的DOMString

  9. Node.nodeType 可能是如下的静态值：Node.ELEMENT_NODE、Node.TEXT_NODE等等

  10. Node.parentNode parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element)节点,也可能是一个文档(Document)节点,或者是个文档碎片(DocumentFragment)节点.

  11. Node.parentElement 返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素 (opens new window)，则返回 null

  12. Node.textContent 返回或设置一个元素内所有子节点及其后代的文本内容。

  13. HTMLElement.innerText 属性表示一个节点及其后代的“渲染”文本内容

    • textContent 会获取所有元素的内容，包括<script>, <style>元素，然而 innerText 只展示给人看的元素。textContent会返回节点中的每一个元素。 相反，innerText受 CSS 样式的影响，并且不会返回隐藏元素的文本，

      此外，由于 innerText 受 CSS 样式的影响，它会触发回流（ reflow (opens new window) ）去确保是最新的计算样式。（回流在计算上可能会非常昂贵，因此应尽可能避免。）

    • 与 textContent 不同的是, 在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。

  14. Node.appendChild()

  15. Node.removeChild()

  16. Node.replaceChild() parentNode.replaceChild(newChild, oldChild);

  17. Node.cloneNode()

  18. Node.insertBefore() parentNode.insertBefore(newNode, referenceNode);

# 3、HTMLDocument

HTMLDocument 是 DOM (opens new window) 的一个抽象接口，它提供了 XML 文档里没有出现的特殊属性和方法。 它的属性和方法实现包含在 Document (opens new window) 接口

# 4、Document

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树 (opens new window)。DOM 树包含了像<head>、<body>这样的元素，以及大量其他元素 (opens new window)。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。

常用属性：

  1. Document.body

  2. Document.doctype

  3. Document.documentElement 对于 HTML 文档，HTMLHtmlElement (opens new window) 对象一般代表该文档的html (opens new window)元素。

  4. 下面是HTMLDocument 的扩展

  5. Document.cookie

    document.cookie = "favorite_food=tripe";

    cookie的值字符串可以用encodeURIComponent() (opens new window)来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).

  6. Document.defaultView 返回对window的引用

  7. Document.title

常用方法：

  1. document.createAttribute()

    const wrapper = document.querySelector('.wrapper');
const attr = document.createAttribute('data-name');
attr.value = 'wrapper';
wrapper.setAttributeNode(attr)

  2. document.createElement()

  3. document.createEvent()

    // 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'.
event.initEvent('build', true, true);

// 监听事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);
// 触发一个Input的input事件
const event = document.createEvent('HTMLEvents')
event.initEvent('input')
e.target.dispatchEvent(event)

  4. Document.getElementBy...

  5. Document.querySelector...

  6. 还有各种事件 scroll visibilityChange wheel drag key... 等等

# 5、Element (extends Node)

Element => Node => EventTarget

Element 是一个通用性非常强的基类，所有 Document (opens new window) 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement (opens new window) 接口是所有 HTML 元素的基本接口，而 SVGElement (opens new window) 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级（hierarchy）的接口中被进一步制定的

常用属性

1、Element.attributes (opens new window) 只读 返回一个与该元素相关的所有属性集合 NamedNodeMap (opens new window)。

2、Element.classList (opens new window) 只读 返回该元素包含的 class 属性，是一个 DOMTokenList (opens new window)。

3、Element.className (opens new window) 一个 DOMString (opens new window)，表示这个元素的 class。

4、Element.clientHeight (opens new window) 只读 返回Number (opens new window) 表示内部相对于外层元素的高度。

5、Element.clientLeft (opens new window) 只读 返回Number (opens new window)表示该元素距离它左边界的宽度。

6、Element.clientTop (opens new window) 只读 返回 Number (opens new window) 表示该元素距离它上边界的高度。

7、Element.clientWidth (opens new window) 只读 返回Number (opens new window) 表示该元素内部的宽度。

8、Element.id (opens new window) 是一个DOMString (opens new window) 表示这个元素的id。

9、Element.innerHTML (opens new window) 是一个DOMString (opens new window) 表示这个元素的内容文本。

10、Element.scrollHeight (opens new window) 只读 返回类型为： Number (opens new window)，表示元素的滚动视图高度。 Element.scrollWidth (opens new window) 只读 返回类型为： Number (opens new window) ，表示元素的滚动视图宽度。

11、Element.scrollLeft (opens new window) 返回类型为：Number (opens new window)，表示该元素横向滚动条距离最左的位移.

12、Element.scrollTop (opens new window) 返回类型为：Number (opens new window) ，表示该元素纵向滚动条距离

13、Element.tagName (opens new window) 只读 Returns a String (opens new window) with the name of the tag for the given element.

14、Element.scroll() (opens new window)

Scrolls to a particular set of coordinates inside a given element.

15、Element.scrollBy() (opens new window)

Scrolls an element by the given amount. 滚动的是一个相对目前滚动位置的值

16、Element.scrollIntoView() (opens new window)

Scrolls the page until the element gets into the view.

17、Element.scrollTo() (opens new window)

Scrolls to a particular set of coordinates inside a given element. 滚动到一个固定的值

18、Element.append

  • Element.append() 允许附加字符串对象，而 Node.appendChild() 只接受 Node (opens new window) 对象。
  • Element.append() 没有返回值，而 Node.appendChild() 返回附加的 Node (opens new window) 对象。
  • Element.append() 可以附加多个节点和字符串，而 Node.appendChild() 只能附加一个节点。

。。。

还有很多添加事件，滚动， 设置属性

# HTMLElement

HTMLElement 接口表示所有的 HTML (opens new window) 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.

提示

基本全部整理自MDN

上次更新: 1/22/2025, 9:39:13 AM

错误Error处理 →