`HTMLDivElement` 对象接口和方法总结

`HTMLDivElement` 对象可以使用多种接口和方法来操作。

以下是完整的接口和方法总结：

## 1. 核心接口和属性

### 基础元素接口

```javascript

const div = document.querySelector('div');

// Element 接口

div.id;                    // 获取/设置ID

div.className;             // 获取/设置class

div.classList;             // classList API

div.innerHTML;             // 获取/设置内部HTML

div.outerHTML;             // 获取/设置外部HTML

div.tagName;               // 标签名 ("DIV")

div.attributes;            // 属性集合

// HTMLElement 接口

div.title;                 // 标题属性

div.lang;                  // 语言

div.dir;                   // 文本方向

div.hidden;                // 隐藏状态

div.tabIndex;              // Tab索引

div.accessKey;             // 访问键

div.dataset;               // data-* 属性

div.style;                 // 样式对象

div.contentEditable;       // 可编辑状态

```

## 2. 样式和类操作

### classList API

```javascript

const div = document.getElementById('myDiv');

// 类操作

div.classList.add('new-class');                    // 添加类

div.classList.remove('old-class');                 // 移除类

div.classList.toggle('active');                    // 切换类

div.classList.contains('some-class');              // 检查类

div.classList.replace('old', 'new');               // 替换类

// 批量操作

div.classList.add('class1', 'class2', 'class3');

```

### 样式操作

```javascript

// 通过style属性

div.style.color = 'red';

div.style.backgroundColor = '#fff';

div.style.fontSize = '16px';

div.style.display = 'none';

// 使用cssText批量设置

div.style.cssText = 'color: red; background: blue;';

// 使用setProperty

div.style.setProperty('border-radius', '5px');

div.style.setProperty('--custom-property', 'value');

// 获取计算样式

const computedStyle = window.getComputedStyle(div);

const width = computedStyle.width;

const color = computedStyle.color;

```

## 3. 内容操作

### 文本内容

```javascript

// 获取/设置文本

div.textContent = '新的文本内容';

const text = div.textContent;

// innerText (考虑样式)

div.innerText = '可视文本';

const visibleText = div.innerText;

// 创建文本节点

const textNode = document.createTextNode('动态文本');

div.appendChild(textNode);

```

### HTML内容

```javascript

// 获取/设置HTML

div.innerHTML = '<span>HTML内容</span>';

const html = div.innerHTML;

// 插入HTML

div.insertAdjacentHTML('beforeend', '<p>插入的内容</p>');

// 创建元素

const newElement = document.createElement('span');

newElement.textContent = '新元素';

div.appendChild(newElement);

```

## 4. 尺寸和位置

### 几何属性

```javascript

// 元素尺寸

div.offsetWidth;           // 包含边框的宽度

div.offsetHeight;          // 包含边框的高度

div.clientWidth;           // 包含内边距的宽度

div.clientHeight;          // 包含内边距的高度

div.scrollWidth;           // 滚动内容宽度

div.scrollHeight;          // 滚动内容高度

// 元素位置

div.offsetTop;             // 相对于offsetParent的顶部位置

div.offsetLeft;            // 相对于offsetParent的左侧位置

div.offsetParent;          // 定位父级

// 视口位置

const rect = div.getBoundingClientRect();

rect.top;                  // 相对于视口的顶部

rect.left;                 // 相对于视口的左侧

rect.right;                // 相对于视口的右侧

rect.bottom;               // 相对于视口的底部

rect.width;                // 元素宽度

rect.height;               // 元素高度

```

### 滚动相关

```javascript

// 滚动位置

div.scrollTop;             // 垂直滚动位置

div.scrollLeft;            // 水平滚动位置

// 滚动方法

div.scrollTo(0, 100);                    // 滚动到指定位置

div.scrollBy(0, 50);                     // 滚动指定距离

div.scrollIntoView();                    // 滚动到可视区域

div.scrollIntoView({ behavior: 'smooth' }); // 平滑滚动

// 检查元素是否在视口中

function isInViewport(element) {

   const rect = element.getBoundingClientRect();

   return (

       rect.top >= 0 &&

       rect.left >= 0 &&

       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

       rect.right <= (window.innerWidth || document.documentElement.clientWidth)

   );

}

```

## 5. 事件处理

### 事件监听

```javascript

// 添加事件监听

div.addEventListener('click', handleClick);

div.addEventListener('mouseover', handleMouseOver, { once: true });

// 移除事件监听

div.removeEventListener('click', handleClick);

// 事件对象

function handleClick(event) {

   event.target;          // 触发事件的元素

   event.currentTarget;   // 绑定事件的元素

   event.preventDefault(); // 阻止默认行为

   event.stopPropagation(); // 阻止事件冒泡

}

```

### 常用事件

```javascript

// 鼠标事件

div.addEventListener('click', fn);

div.addEventListener('dblclick', fn);

div.addEventListener('mouseenter', fn);

div.addEventListener('mouseleave', fn);

div.addEventListener('mousemove', fn);

// 键盘事件

div.addEventListener('keydown', fn);

div.addEventListener('keyup', fn);

// 焦点事件

div.addEventListener('focus', fn);

div.addEventListener('blur', fn);

// 触摸事件

div.addEventListener('touchstart', fn);

div.addEventListener('touchend', fn);

div.addEventListener('touchmove', fn);

```

## 6. 数据属性

### dataset API

```javascript

// HTML: <div id="myDiv" data-user-id="123" data-user-role="admin"></div>

const div = document.getElementById('myDiv');

// 获取data属性

const userId = div.dataset.userId;        // "123"

const userRole = div.dataset.userRole;    // "admin"

// 设置data属性

div.dataset.userStatus = 'active';

div.dataset.customValue = 'hello';

// 删除data属性

delete div.dataset.userRole;

// 检查data属性

if ('userId' in div.dataset) {

   console.log('有userId属性');

}

```

## 7. 子元素操作

### 节点操作

```javascript

// 获取子节点

div.children;              // 子元素集合

div.firstElementChild;     // 第一个子元素

div.lastElementChild;      // 最后一个子元素

div.childElementCount;     // 子元素数量

// 遍历子元素

Array.from(div.children).forEach(child => {

   console.log(child);

});

// 查询子元素

const found = div.querySelector('.some-class');

const allFound = div.querySelectorAll('.some-class');

```

### 动态修改

```javascript

// 添加子元素

const newChild = document.createElement('span');

div.appendChild(newChild);

div.prepend(newChild);                  // 添加到开头

div.insertBefore(newChild, reference);  // 插入到指定位置

// 替换子元素

div.replaceChild(newChild, oldChild);

// 移除子元素

div.removeChild(childToRemove);

childToRemove.remove();                 // 直接移除

// 清空所有子元素

div.innerHTML = '';

while (div.firstChild) {

   div.removeChild(div.firstChild);

}

```

## 8. 实用工具方法

### 元素状态检查

```javascript

// 检查可见性

function isVisible(element) {

   return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);

}

// 检查是否包含另一个元素

div.contains(otherElement);

// 检查是否匹配选择器

div.matches('.some-selector');

div.closest('.parent-selector');

```

### 动画和过渡

```javascript

// 监听过渡结束

div.addEventListener('transitionend', function(event) {

   console.log('过渡结束');

});

// 监听动画结束

div.addEventListener('animationend', function(event) {

   console.log('动画结束');

});

// 强制重绘

div.offsetHeight; // 读取属性强制重绘

```

## 9. 完整的操作示例

```javascript

class DivElementManager {

   constructor(selector) {

       this.element = document.querySelector(selector);

   }

   // 样式操作

   setStyles(styles) {

       Object.assign(this.element.style, styles);

       return this;

   }

   // 类操作

   addClasses(...classes) {

       this.element.classList.add(...classes);

       return this;

   }

   // 内容操作

   setContent(content) {

       this.element.innerHTML = content;

       return this;

   }

   // 事件管理

   on(event, handler, options) {

       this.element.addEventListener(event, handler, options);

       return this;

   }

   // 数据属性

   setData(key, value) {

       this.element.dataset[key] = value;

       return this;

   }

   // 显示/隐藏

   show() {

       this.element.style.display = '';

       return this;

   }

   hide() {

       this.element.style.display = 'none';

       return this;

   }

   // 获取位置信息

   getPosition() {

       return this.element.getBoundingClientRect();

   }

}

// 使用示例

const divManager = new DivElementManager('#myDiv');

divManager

   .setStyles({ color: 'red', fontSize: '16px' })

   .addClasses('active', 'highlight')

   .setContent('<span>新内容</span>')

   .on('click', () => console.log('点击了'))

   .setData('status', 'loaded');

```

## 10. 性能优化建议

```javascript

// 批量DOM操作

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {

   const div = document.createElement('div');

   fragment.appendChild(div);

}

container.appendChild(fragment);

// 使用requestAnimationFrame进行动画

function animate() {

   requestAnimationFrame(() => {

       element.style.transform = `translateX(${pos}px)`;

   });

}

// 避免强制同步布局

// 不好：读取 -> 写入 -> 读取 -> 写入

// 好：读取 -> 读取 -> 写入 -> 写入

```

`HTMLDivElement` 继承了所有 `HTMLElement`、`Element` 和 `Node` 的接口，因此具有非常丰富的方法和属性可供使用。根据具体需求选择合适的接口和方法即可。