HTML DOM - 技术栈

一、HTML DOM的简单介绍以及特点

DOM（文档对象模型）是HTML和XML文档的编程接口，HTML DOM定义了操作和访问HTML的方法和属性。

1、特点

DOM将文档表示为一个由节点和对象组成的树形结构：

2、节点类型

文档节点：整个文档；
元素节点：HTML标签；
文本节点：元素内的文本内容；
属性节点：元素的属性；
注释节点：HTML注释

二、DOM基本操作

1、DOM元素的方法

（1）节点查询方法

javascript 复制代码

// 通过ID查找
document.getElementById('id')

// 通过类名查找（返回HTMLCollection）
document.getElementsByClassName('class')

// 通过标签名查找（返回HTMLCollection）
document.getElementsByTagName('div')

// CSS选择器查找（返回第一个匹配）
document.querySelector('.container')

// CSS选择器查找所有（返回NodeList）
document.querySelectorAll('.item')

// 遍历查找
parentNode.childNodes          // 所有子节点
parentNode.children            // 所有子元素
element.nextElementSibling     // 下一个兄弟元素
element.previousElementSibling // 上一个兄弟元素

（2）节点操作方法

javascript 复制代码

// 创建节点
document.createElement('div')        // 创建元素
document.createTextNode('text')      // 创建文本节点
document.createDocumentFragment()    // 创建文档片段

// 插入节点
parent.appendChild(child)            // 末尾添加
parent.insertBefore(new, reference)  // 指定位置插入
element.insertAdjacentHTML(position, html) // 四种位置插入

// 删除和替换
parent.removeChild(child)            // 移除子节点
parent.replaceChild(new, old)        // 替换子节点
element.remove()                     // 移除自身

// 克隆节点
node.cloneNode(true)                 // 深度克隆（包含子节点）

（3）属性操作方法

javascript 复制代码

// 创建节点
document.createElement('div')        // 创建元素
document.createTextNode('text')      // 创建文本节点
document.createDocumentFragment()    // 创建文档片段

// 插入节点
parent.appendChild(child)            // 末尾添加
parent.insertBefore(new, reference)  // 指定位置插入
element.insertAdjacentHTML(position, html) // 四种位置插入

// 删除和替换
parent.removeChild(child)            // 移除子节点
parent.replaceChild(new, old)        // 替换子节点
element.remove()                     // 移除自身

// 克隆节点
node.cloneNode(true)                 // 深度克隆（包含子节点）

其中insertAdjacentHTML相关内容：

其参数position有四种位置选项

beforebegin：元素之前

afterbegin：元素内部开头

beforeend：元素内部结尾

afterend：元素之后

与innerHTML比较：

与appendChild比较：

与insertBefore比较：

2、DOM元素的属性

（1）节点属性

（2）节点关系属性

（3）尺寸和位置属性

（4）表单相关属性

三、DOM内容操作

1、文本内容操作

javascript 复制代码

// 文本内容
element.textContent                  // 获取/设置文本
element.innerText                    // 获取/设置可见文本（考虑CSS）

// HTML内容
element.innerHTML                    // 获取/设置HTML
element.outerHTML                    // 包含自身的HTML

// 表单值
input.value                          // 获取/设置表单值




//使用示例
// textContent（推荐）
element.textContent = '新的文本内容';
const text = element.textContent;

// innerText（考虑CSS样式）
element.innerText = '可见文本';

// innerHTML（可包含HTML标签）
element.innerHTML = '<strong>加粗文本</strong>';

2、创建和添加元素

javascript 复制代码

// 创建新元素
const newDiv = document.createElement('div');
const newText = document.createTextNode('Hello World');

// 添加元素
parentElement.appendChild(newDiv); // 末尾添加
parentElement.insertBefore(newDiv, referenceElement); // 指定位置
parentElement.prepend(newDiv); // 开头添加

// 克隆元素
const clonedElement = element.cloneNode(true); // true表示深度克隆

// 替换元素
parentElement.replaceChild(newElement, oldElement);

3、删除元素

四、DOM样式操作

内联样式：

css类操作：

五、DOM事件处理

https://blog.csdn.net/qq_62857071/article/details/157255728?spm=1011.2124.3001.6209

六、实际应用

图片懒加载的实现伪代码：

javascript 复制代码

// 图片懒加载实现
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img.lazy');
  
  // 使用Intersection Observer（现代方式）
  if ('IntersectionObserver' in window) {
    const imageObserver = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.classList.remove('lazy');
          imageObserver.unobserve(img);
        }
      });
    });

    lazyImages.forEach(img => imageObserver.observe(img));
  } 
  // 降级方案
  else {
    let lazyLoadThrottle;
    
    function lazyLoad() {
      if (lazyLoadThrottle) clearTimeout(lazyLoadThrottle);
      
      lazyLoadThrottle = setTimeout(() => {
        const scrollTop = window.pageYOffset;
        
        lazyImages.forEach(img => {
          if (img.offsetTop < (window.innerHeight + scrollTop)) {
            img.src = img.dataset.src;
            img.classList.remove('lazy');
          }
        });
        
        // 如果所有图片都加载了，移除事件监听
        if (lazyImages.length === 0) {
          document.removeEventListener('scroll', lazyLoad);
        }
      }, 20);
    }
    
    document.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    lazyLoad(); // 初始加载
  }
});