本文共 1999 字，大约阅读时间需要 6 分钟。

DOM操作详解

一、DOM节点创建

DOM节点是网页中的基本单元，通常对应 HTML 标签、文本或属性。每个节点都有 nodeType 属性，表示节点类型：

• Element（元素）：对应 HTML 标签
• Attribute（属性）：对应 HTML 属性
• Text（文本）：对应标签内的文本内容

创建 DOM 节点的主要方法是 document.createElement 和 document.createTextNode：

var node1 = document.createElement('div');var node2 = document.createTextNode('hello world!');

二、DOM查询

DOM 提供多种方法查询文档中的元素：

• 单个元素查询：

  • document.getElementById('xxx')：根据 id 查询元素
  • document.querySelector(".myclass")：根据类名查询元素
  • document.getElementsByClassName('highlight')：根据类名查询所有元素

• 多个元素查询：

  • document.querySelectorAll("div.note, div.alert")：同时查询多个类名的元素
  • document.getElementsByTagName('td')：根据标签名查询所有元素

DOM 也提供了导航方法查询父子节点：

• 父节点：

  • ele.parentElement：返回父节点
  • ele.parentNode：返回父节点（不考虑兼容性）
  • ele.offsetParent：返回最近有定位的父节点

• 子节点：

  • ele.children：返回所有子节点（包含文本节点）
  • ele.firstChild、ele.lastChild：返回第一个或最后一个子节点
  • ele.firstElementChild、ele.lastElementChild：返回第一个或最后一个子元素

• 元素属性：

  • ele.attributes：获取所有属性
  • ele.getAttribute('class')：获取指定属性
  • ele.setAttribute('class', 'highlight')：设置属性
  • ele.hasAttribute('class')：判断是否有属性
  • ele.removeAttribute('class')：移除属性

三、DOM更改

DOM 操作允许对文档进行实时修改：

• 添加子元素：

  ele.appendChild(el);

• 删除子元素：

  ele.removeChild(el);

• 替换子元素：

  ele.replaceChild(el1, el2);

• 插入子元素：

  parentElement.insertBefore(newElement, referenceElement);

• 克隆元素：

  ele.cloneNode(true); // 包括所有属性和子节点

四、属性操作

处理元素属性的方法：

• 获取属性：

  var attrs = el.attributes; // 返回属性数组 [{name, value}]var c = el.getAttribute('class'); // 获取指定属性值

• 设置属性：

  el.setAttribute('class', 'highlight'); // 设置属性值

• 判断属性：

  el.hasAttribute('class'); // 是否存在属性el.removeAttribute('class'); // 移除属性

• 判断是否有属性：

  el.hasAttributes(); // 是否有任何属性

innerHTML 与 outerHTML

innerHTML 和 outerHTML 都用于获取或设置元素的 HTML 内容，但有以下区别：

• innerHTML：

  • 只返回元素内的 HTML 内容
  • 示例：<div></div> 内部 HTML 为 content<div></div>（假设 content 是 div 内的内容）

• outerHTML：

  • 返回包括元素本身在内的 HTML 内容
  • 示例：<div></div> 包含所有嵌套的内容
  • outerHTML 通常用于获取完整的元素结构

jQuery 的 html() 方法

jQuery 的 html() 方法与普通的 innerHTML 有区别：

• html()：调用 innerHTML 来获取内容，但处理异常时会使用 .empty() 和 .append() 进行重建
• 注意事项：在 IE8 中，由于某些元素（如 input）的 innerHTML 是只读属性，直接调用可能会失败

通过以上方法，DOM 操作为开发者提供了强大的工具，能够实时修改网页内容，提升用户体验。

转载地址：http://bzsuz.baihongyu.com/