Mr笔记

Appearance

Element ​

[TOC]

索引 ​

Element ​

属性：

基本属性

  • el.attributes：NamedNodeMap，只读，返回包含相应 HTML 元素的指定属性。
  • el.classList：DOMTokenList，只读，返回该元素包含的所有 class 属性。
  • el.className：string，表示这个元素的类名。
  • el.id：string，表示此元素的 id 值。
  • el.tagName：string，只读，返回当前元素的标签名。
  • el.innerHTML：string，读取或修改 HTML 元素内容的属性。可以操作元素内部的 HTML 结构（包括标签和文本）。
  • el.outerHTML：string，只读，代表元素的标记（包括其内容）。作为 setter 使用时，将用从给定字符串解析出的节点替换元素。

元素导航：

尺寸位置


方法：

插入元素：

  • el.append()：(...nodesOrStrings)，用于向 DOM 节点的子节点列表末尾插入一个或多个节点或字符串的方法。
  • el.prepend()：(...nodesOrStrings)，用于向 DOM 节点的子节点列表开头插入一个或多个节点或字符串的方法。
  • el.before()：(...nodesOrStrings)，用于在指定节点的前面插入一个或多个节点或字符串的方法。
  • el.after()：(...nodesOrStrings)，用于在指定节点的后面插入一个或多个节点或字符串的方法。
  • el.replaceWith()：(...nodesOrStrings)，用于替换 DOM 节点的方法，它可以将当前节点替换为一个或多个新节点或字符串。

移除元素：

  • el.remove()：()，用于从 DOM 树中移除当前元素节点的方法。直接作用于目标元素，无需通过父节点操作。

滚动：

  • el.scrollTo() / window.scrollTo()：(x, y)或({left,top,behavior})，用于控制可滚动元素滚动位置的方法。适用于overflow设置为 scroll 或 auto 的元素。
  • el.scrollBy() / window.scrollBy()：(x, y)或({left,top,behavior})，用于控制可滚动元素相对当前位置滚动的方法。
  • el.scrollIntoView()：(alignToTop)或({behavior,block,inline})，用于将元素滚动到浏览器窗口或可滚动容器可视区域的方法。

属性操作：

  • el.getAttribute()：(attributeName)，从当前节点获取指定属性的值，并以字符串形式返回。
  • el.setAttribute()：(name, value)，设置当前节点的指定属性值，若属性不存在则创建。
  • el.hasAttribute()：(attributeName)，返回一个布尔值，表示元素是否具有指定属性。
  • el.removeAttribute()：(attrName)，从当前节点删除指定属性。

classList:

HTMLElement ​

属性：

  • el.dataset：DOMStringMap，用于访问和操作 HTML 元素的自定义数据属性（data-*） 的属性。
  • el.draggable：boolean，设置/获取元素是否可以拖拽。
  • el.hidden：boolean，获取/设置元素是否隐藏。
  • el.style：CSSStyleDeclaration，获取/设置元素的 style 属性。

Element ​

属性 ​

基本属性

  • el.attributes：NamedNodeMap，只读，返回包含相应 HTML 元素的指定属性。
  • el.classList：DOMTokenList，只读，返回该元素包含的所有 class 属性。
  • el.className：string，表示这个元素的类名。
  • el.id：string，表示此元素的 id 值。
  • el.tagName：string，只读，返回当前元素的标签名。
  • el.innerHTML：string，读取或修改 HTML 元素内容的属性。可以操作元素内部的 HTML 结构（包括标签和文本）。
  • el.outerHTML：string，只读，代表元素的标记（包括其内容）。作为 setter 使用时，将用从给定字符串解析出的节点替换元素。

元素导航：

  • el.previousElementSibling：Node|null，只读，返回与该节点前一个兄弟元素。
  • el.nextElementSibling：Node|null，只读，返回与该节点下一个兄弟元素。
  • el.firstElementChild：Node|null，只读，返回该节点的第一个子元素。
  • el.lastElementChild：Node|null，只读，返回该节点的最后一个子元素。
  • el.children：HTMLCollection，只读，返回一个包含了该节点所有子元素的动态集合。

尺寸位置

元素尺寸：

  • el.clientWidth / el.clientHeight：内容 + padding (不包含滚动条)
  • el.offsetWidth / el.offsetHeight：内容 + padding + border (包含滚动条)
  • el.scrollWidth / el.scrollHeight：可见内容 + 滚动出去的内容

元素位置：

  • el.offsetLeft / el.offsetTop：与当前元素最近的定位父级元素之间的距离
  • el.scrollLeft / el.scrollTop：盒子内容滚动出去的距离（包括边框）

元素其他：

  • el.clientLeft / el.clientTop：左/上边框的宽度

image-20250428155348036

innerHTML ​

el.innerHTML：string，读取或修改 HTML 元素内容的属性。可以操作元素内部的 HTML 结构（包括标签和文本）。

  • 语法：

    js
    // 1. 读取元素的 HTML 内容
const htmlContent = element.innerHTML;

// 2. 设置元素的 HTML 内容
element.innerHTML = newHtmlString;

  • 核心特性：

    • 支持HTML解析：设置 innerHTML 时，字符串中的 HTML 标签会被浏览器解析并渲染。

    • 覆盖原有内容：直接赋值会完全替换元素内的原有内容。

    • 隐式字符串转换：非字符串类型的值（如数字、对象）会被自动转换为字符串。

  • 注意：

    1. 频繁操作DOM有性能问题：多次修改 innerHTML（尤其在循环中）会触发多次页面重排（Reflow）和重绘（Repaint）。

      优化方案：先拼接完整字符串，再一次性赋值。

      js
      let html = "";
for (let i = 0; i < 100; i++) {
  html += `<div>${i}</div>`;
}
container.innerHTML = html;

    2. 直接插入用户输入可能导致脚本注入：若未对用户输入的内容进行转义，攻击者可能注入恶意代码。

      js
      // 危险操作！用户输入可能包含 <script>...</script>
const userInput = "<img src='x' onerror='alert(1)'>";
div.innerHTML = userInput; // 触发 onerror 中的 JavaScript 代码

      解决方案：使用 textContent 代替，或对用户输入进行转义。

      js
      // 1. 安全方式：仅显示文本
div.textContent = userInput;

// 2. 转义 HTML 特殊字符（如 < → &lt;）
function escapeHtml(text) {
  return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
div.innerHTML = escapeHtml(userInput);

    3. 某些元素（如 <table>）的子元素限制：直接设置 table.innerHTML = "<tr>...</tr>" 可能无效（需通过 tbody 插入）。

      js
      // 正确操作
const tbody = document.createElement("tbody");
tbody.innerHTML = "<tr><td>单元格</td></tr>";
table.appendChild(tbody);

  • 示例：

    1. 动态插入列表项

      js
      const list = document.getElementById("myList");
list.innerHTML = `
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
`;

    2. 结合模板字符串动态生成内容

      js
      const userName = "Alice";
document.body.innerHTML = `
  <h1>欢迎, ${userName}!</h1>
  <p>当前时间：${new Date().toLocaleTimeString()}</p>
`;

方法 ​

插入元素 ​

append() ​

el.append()：(...nodesOrStrings)，用于向 DOM 节点的子节点列表末尾插入一个或多个节点或字符串的方法。

  • ...nodesOrStrings：Node|string，需要插入的元素节点、文本节点、注释节点等。

  • 公共特性：

    • 不会解析HTML标签：字符串参数会被隐式转换为 TextNode。

    • 移动已有节点：如果传入的节点已存在于文档中，会先被移除原位置再插入到新位置。

    • 性能优化：操作多个节点时，优先使用 DocumentFragment 减少重排次数。

  • 示例：

    1. 基础用法

      js
      const list = document.createElement("ul");

// append()
const lastItem = document.createElement('li')
lastItem.textContent = 'lastItem'
list.append(lastItem)
prepend() ​

el.prepend()：(...nodesOrStrings)，用于向 DOM 节点的子节点列表开头插入一个或多个节点或字符串的方法。

  • ...nodesOrStrings：Node|string，需要插入的元素节点、文本节点、注释节点等。

  • 公共特性：

    • 不会解析HTML标签：字符串参数会被隐式转换为 TextNode。

    • 移动已有节点：如果传入的节点已存在于文档中，会先被移除原位置再插入到新位置。

    • 性能优化：操作多个节点时，优先使用 DocumentFragment 减少重排次数。

  • 示例：

    1. 基础用法

      js
      const list = document.createElement("ul");

// prepend()
const lastItem = document.createElement('li')
firstItem.textContent = 'firstItem'
list.append(firstItem)
before() ​

el.before()：(...nodesOrStrings)，用于在指定节点的前面插入一个或多个节点或字符串的方法。

  • ...nodesOrStrings：Node|string，需要插入的元素节点、文本节点、注释节点等。

  • 公共特性：

    • 不会解析HTML标签：字符串参数会被隐式转换为 TextNode。

    • 移动已有节点：如果传入的节点已存在于文档中，会先被移除原位置再插入到新位置。

    • 性能优化：操作多个节点时，优先使用 DocumentFragment 减少重排次数。

  • 示例：

    1. 基础用法

      js
      const list = document.createElement("ul");

// before()
const prevSibling = document.createElement('div')
prevSibling.textContent = 'prevSibling'
list.before(prevSibling)
after() ​

el.after()：(...nodesOrStrings)，用于在指定节点的后面插入一个或多个节点或字符串的方法。

  • ...nodesOrStrings：Node|string，需要插入的元素节点、文本节点、注释节点等。

  • 公共特性：

    • 不会解析HTML标签：字符串参数会被隐式转换为 TextNode。

    • 移动已有节点：如果传入的节点已存在于文档中，会先被移除原位置再插入到新位置。

    • 性能优化：操作多个节点时，优先使用 DocumentFragment 减少重排次数。

  • 示例：

    1. 基础用法

      js
      const list = document.createElement("ul");

// after()
const nextSibling = document.createElement('p')
nextSibling.textContent = 'nextSibling'
list.after(nextSibling)
replaceWith() ​

el.replaceWith()：(...nodesOrStrings)，用于替换 DOM 节点的方法，它可以将当前节点替换为一个或多个新节点或字符串。

  • ...nodesOrStrings：Node|string，需要插入的元素节点、文本节点、注释节点等。

  • 公共特性：

    • 不会解析HTML标签：字符串参数会被隐式转换为 TextNode。

    • 移动已有节点：如果传入的节点已存在于文档中，会先被移除原位置再插入到新位置。

    • 性能优化：操作多个节点时，优先使用 DocumentFragment 减少重排次数。

  • 示例：

    1. 基础用法

      js
      const list = document.createElement("ul");

// replaceWith()
const olEl = document.createElement('ol')
list.replaceWith(olEl)

移除元素 ​

remove() ​

el.remove()：()，用于从 DOM 树中移除当前元素节点的方法。直接作用于目标元素，无需通过父节点操作。

  • 示例：

    1. 基础用法：调用 element.remove() 后，元素会立即从 DOM 树中移除。

      js
      // 原结构：<div id="parent"><span id="child">内容</span></div>

const child = document.getElementById("child");
child.remove();

    2. 对比removeChild()：与传统的 parentNode.removeChild() 不同，remove() 直接通过元素自身调用。

      js
      // 1. 传统方式
const parent = child.parentNode;
parent.removeChild(child);

// 2. 现代方式
child.remove(); // 更简洁

滚动 ​

scroll()【 ​
scrollTo()【 ​

el.scrollTo() / window.scrollTo()：(x, y)或({left,top,behavior})，用于控制可滚动元素滚动位置的方法。适用于overflow设置为 scroll 或 auto 的元素。

scrollBy()【 ​

el.scrollBy() / window.scrollBy()：(x, y)或({left,top,behavior})，用于控制可滚动元素相对当前位置滚动的方法。

scrollIntoView()【 ​

el.scrollIntoView()：(alignToTop)或({behavior,block,inline})，用于将元素滚动到浏览器窗口或可滚动容器可视区域的方法。

传统方法 ​

insertAdjacentElement()【 ​
insertAdjacentHTML()【 ​
insertAdjacentText()【 ​
replaceChildren()【 ​

属性操作 ​

getAttribute()【 ​

el.getAttribute()：(attributeName)，从当前节点获取指定属性的值，并以字符串形式返回。

setAttribute()【 ​

el.setAttribute()：(name, value)，设置当前节点的指定属性值，若属性不存在则创建。

hasAttribute()【 ​

el.hasAttribute()：(attributeName)，返回一个布尔值，表示元素是否具有指定属性。

removeAttribute()【 ​

el.removeAttribute()：(attrName)，从当前节点删除指定属性。

classList【 ​

el.classList：DOMTokenList，只读，返回元素 class 属性可迭代的动态集合。可用于操作 class 集合。

classList.add()【 ​

el.classList.add()：(className)，添加一个类。

classList.remove()【 ​

el.classList.remove()：(className)，移除一个类。

classList.toggle()【 ​

el.classList.toggle()：(className)，如果类不存在就添加类，存在就移除该类。

classList.contains()【 ​

el.classList.contains()：(className)，检查是否存在指定类。

classList.replace()【 ​

el.classList.replace()：(oldClass, newClass)，将旧类名替换成新类名。

HTMLElement ​

属性 ​

  • el.dataset：DOMStringMap，用于访问和操作 HTML 元素的自定义数据属性（data-*） 的属性。
  • el.draggable：boolean，设置/获取元素是否可以拖拽。
  • el.hidden：boolean，获取/设置元素是否隐藏。
  • el.style：CSSStyleDeclaration，获取/设置元素的 style 属性。