DOM API

月亮慢慢圆
64 阅读5分钟

总结DOM API的一些常用的方法

1.如何获取DOM节点

  • getElementById: 根据元素的 ID 获取元素。
document.getElementById('myID');
  • getElementsByClassName: 根据类名获取一组元素，会把有该类名的所有DOM节点都返回，得到的是一个节点数组。
document.getElementsByClassName('myClass');
  • getElementsByTagName: 根据标签名获取一组元素，会把所有该标签的DOM节点都返回，得到的是一个节点数组。
document.getElementsByTagName('p');
  • querySelector: 根据 CSS 选择器获取单个元素，这里可以通过类名，id，或者标签名去选择节点，只不过只会返回第一个被选择的。
document.querySelector('.myClass');  // 类名  前面加 .
document.querySelector('#my');  // 类名  前面加 #
document.querySelector('p');  // 标签名  前面什么都不加
  • querySelectorAll: 和querySelector差不多，只不过会返回全部选择的节点，得到的是一个节点数组。
document.querySelectorAll('.myClass');  // 类名
document.querySelectorAll('p');  // 标签名

2.创建DOM节点

  • createElement: 创建一个新的 HTML 元素。
const newDiv = document.createElement('div');
  • createTextNode: 创建一个新的文本节点。
const newText = document.createTextNode('Hello World!');
  • createDocumentFragment: 创建一个新的文档碎片。

document.createDocumentFragment()是一个用于创建一个新的DocumentFragment对象的方法。DocumentFragment是一种特殊的DOM节点，常用于批量操作DOM元素，以提高页面性能和减少重排（re-layout）和重绘（repainting）的次数。

DocumentFragment对象主要用于下面两个场景:

批量插入元素:可以先在一个DocumentFragment中创建和配置多个DOM元素，然后再一次性插入到文档中，从而减少页面重排和重绘的次数。

临时存储元素：可以将一组元素暂时存储在DocumentFragment中，以便稍后进行统一处理或插入。

DocumentFragment对象本身也具有一些方法，可以通过这些方法来操作它所包含的子节点：

  1. appendChild: 将一个节点添加到DocumentFragment的子节点列表的末尾。
  2. removeChild: 从DocumentFragment中移除一个子节点。
  3. insertBefore: 在指定的子节点之前插入一个新的子节点。

示例

创建并插入多个元素

// 创建 DocumentFragment
const fragment = document.createDocumentFragment();

// 创建一些元素并添加到 DocumentFragment 中
const div1 = document.createElement('div');
div1.textContent = 'Div 1';
fragment.appendChild(div1);

const div2 = document.createElement('div');
div2.textContent = 'Div 2';
fragment.appendChild(div2);

const div3 = document.createElement('div');
div3.textContent = 'Div 3';
fragment.appendChild(div3);

// 将 DocumentFragment 插入到页面中的某个元素
const container = document.getElementById('container');
container.appendChild(fragment);

批量操作元素

// 创建 DocumentFragment
const fragment = document.createDocumentFragment();

// 创建多个元素
const elements = [
  { tag: 'p', content: 'Paragraph 1' },
  { tag: 'span', content: 'Span 1' },
  { tag: 'div', content: 'Div 1' }
];

// 将元素添加到 DocumentFragment 中
elements.forEach(({ tag, content }) => {
  const element = document.createElement(tag);
  element.textContent = content;
  fragment.appendChild(element);
});

// 将 DocumentFragment 插入到页面中的某个元素
const body = document.body;
body.appendChild(fragment);

DocumentFragment的主要优点在于性能的提升，在DocumentFragment中创建和配置多个元素，然后再一次性插入到文档中，可以减少页面的重排和重绘次数，从而提高性能。

3.插入，删除和替换元素

  • appendChild: 在父元素的子元素列表末尾添加新的子元素。
parent.appendChild(newDiv);
  • insertBefore: 在指定的子元素之前插入新的子元素。
parent.insertBefore(newDiv, existingChild);
  • removeChild: 移除父元素中的一个子元素。
parent.removeChild(existingChild);
  • replaceChild: 替换父元素中的一个子元素。
parent.replaceChild(newDiv, oldDiv);

4.修改元素的属性和样式

  • setAttribute: 设置或更改元素的属性。
element.setAttribute('属性名', '属性值');
  • getAttribute: 获取元素的属性值。
const value = element.getAttribute('属性名');
  • removeAttribute: 删除元素的属性。
element.removeAttribute('属性名');
  • style: 获取或者设置元素的样式，这里获取或者设置的样式只能是在行内式的样式，写在css里的获取不到。
element.style.color = 'red';

5.修改内容

  • innerHTML: 获取或设置元素的 HTML 内容。
element.innerHTML = '<p>New content</p>';
  • textContent: 获取或设置元素的纯文本内容。
element.textContent = 'New text content';

6.事件处理

  • addEventListener: 添加事件监听器。
element.addEventListener('click', function(event) {
  console.log('Clicked!');
});
  • removeEventListener: 移除事件监听器。
element.removeEventListener('click', function(event) {
  console.log('Clicked!');
});

7.查询和操作表单数据

  • value: 获取或设置输入框的值。
inputElement.value = 'New Value';
  • checked: 获取或设置复选框的状态。
checkboxElement.checked = true;

8.遍历 DOM 树

遍历 DOM 树的常见属性：

  • parentNode: 获取元素的父节点。
  • childNodes: 获取元素的子节点列表。
  • firstChild: 获取元素的第一个子节点（包含文本节点）。
  • firstElementChild：获取元素的第一个子非文本节点。
  • lastChild: 获取元素的最后一个子节点（包含文本节点）。
  • lastElementChild：获取元素的最后一个子非文本节点。
  • nextSibling: 获取元素的下一个兄弟节点。
  • previousSibling: 获取元素的上一个兄弟节点。

9.DOM节点比较常用的属性

  • className: 元素节点的类名。
  • baseURI： 页面URL。
  • childElementCount：非文本子节点数量。
  • childNodes：子节点列表（包含文本节点）。
  • children：分文本子节点列表。
  • classList：类名列表。
  • className：类名。
  • clientHeight：节点的高度（内容高度+padding）。
  • clientWidth：节点的宽度（内容宽度+padding）。
  • offsetHeight：节点的高度（内容高度+padding+border+水平滚动条）。
  • offsetWidth：节点的宽度（内容宽度+padding+border+垂直滚动条）。
  • scrollHeight：节点的高度（内容实际高度（因为有可能内容会溢出）+padding）。
  • scrollWidth：节点的宽度（内容实际宽度（因为有可能内容会溢出）+padding）。
  • clientLeft：节点左边框宽度。
  • clientTop：节点上边框宽度。
  • offsetLeft：左边框距离定位元素(没有的话就可视窗口)的距离。
  • offsetTop：上边框距离定位元素(没有的话就可视窗口)的距离。
  • scrollLeft：元素被卷起的宽度。
  • scrollTop：元素被卷起的高度。
avatar
文章
阅读
粉丝