在网页开发中，DOM（文档对象模型）操作是非常重要的技能。以下是一些基本的DOM操作教程。

常用DOM操作

  1. 获取元素

    • 使用 getElementById() 获取ID为指定值的元素
    • 使用 getElementsByClassName() 获取所有类名为指定值的元素
    • 使用 getElementsByTagName() 获取所有标签名为指定值的元素

  2. 修改元素内容

    • 使用 .innerHTML 修改元素内部HTML内容
    • 使用 .innerText 修改元素内部文本内容

  3. 添加元素

    • 使用 .appendChild() 将元素添加到指定元素的子元素列表末尾
    • 使用 .insertBefore() 在指定元素之前插入新元素

  4. 删除元素

    • 使用 .removeChild() 删除指定元素
    • 使用 .parentNode.removeChild() 删除指定元素的父元素

  5. 事件监听

    • 使用 .addEventListener() 为元素添加事件监听器

示例代码

// 获取元素
var element = document.getElementById('myElement');

// 修改内容
element.innerHTML = '<p>这是一个新的段落。</p>';

// 添加元素
var newElement = document.createElement('p');
newElement.innerText = '这是一个新添加的段落。';
element.appendChild(newElement);

// 删除元素
element.parentNode.removeChild(element);

扩展阅读

想要了解更多关于DOM操作的知识，可以阅读本站的DOM操作高级教程。

JavaScript DOM