DOM编程

DOM编程

• 本质上就是利用document对象完成对网页的动态处理
• DOM（Document Object Model）是指文档对象模型，是一种用于表示和操作网页文档结构的编程接口。
• 在Web开发中，DOM编程使用脚本语言（如JavaScript）来访问、修改和更新网页的内容、结构和样式。

DOM结构

• 节点（Nodes）：DOM将文档表示为一个树形结构，其中每个部分都是一个节点，如元素节点、文本节点、属性节点等。
• 元素节点（Element Nodes）：代表HTML元素，如<div>、<p>等。
• 属性节点（Attribute Nodes）：代表HTML元素的属性，如id、class等。
• 文本节点（Text Nodes）：代表HTML元素中的文本内容。

DOM功能

• 获取元素：开发者可以使用JavaScript通过DOM获取页面上的元素，例如通过document.getElementById(‘elementId’)、document.querySelector(‘.className’)等方法。
• 操作元素：通过DOM可以修改元素的内容、样式、属性等，例如修改元素的文本内容、添加样式、改变属性值等。
• 事件处理：DOM允许开发者为页面元素添加事件监听器，以便在特定事件发生时执行相应的操作，如点击事件、鼠标移入事件等。
• DOM操作的性能：在进行DOM操作时，应该尽量减少频繁的DOM操作，可以通过缓存查询结果、使用事件委托等方式来提高性能。
• 跨浏览器兼容性：在进行DOM编程时，需要考虑不同浏览器对DOM标准的支持，可以使用现代的JavaScript库或框架来简化跨浏览器兼容性问题。

DOM编程步骤

1. 获取DOM树
   • document其实是window对象的一个属性可以直接使用
2. 获取元素：
   • 获取要操作的 DOM 元素。这可以通过诸如 document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName() 等方法来实现。
3. 操作元素：
   • 一旦获取了元素，可以对其进行各种操作，如修改内容、样式、属性等。这包括诸如 element.innerHTML, element.style, element.setAttribute() 等方法。

实例

// 获取需要操作的DOM元素
const heading = document.getElementById('heading');
const changeTextBtn = document.getElementById('changeTextBtn');

// 添加事件监听器，点击按钮时改变文本内容
changeTextBtn.addEventListener('click', function() {
    heading.textContent = 'Text Changed!';
    heading.style.color = 'blue';
});

DOM获取元素

• 通过ID获取元素：

var element = document.getElementById("elementId");

• 通过类名获取元素：

var elements = document.getElementsByClassName("className");

• 通过标签名获取元素：

var elements = document.getElementsByTagName("tagName");

• 通过选择器获取元素（使用CSS选择器）：

var element = document.querySelector("selector");
var elements = document.querySelectorAll("selector");

DOM操作元素

操作元素属性：

• 获取元素属性：

const element = document.getElementById('myElement');
const attributeValue = element.getAttribute('attributeName');

• 设置元素属性：

const element = document.getElementById('myElement');
element.setAttribute('attributeName', 'attributeValue');

• 删除元素属性：

const element = document.getElementById('myElement');
element.removeAttribute('attributeName');

操作元素样式：

• 获取元素样式：

const element = document.getElementById('myElement');
const style = element.style;
const backgroundColor = style.backgroundColor;

• 设置元素样式：

const element = document.getElementById('myElement');
element.style.backgroundColor = 'red';

操作元素文本值：

注意，是文本内容，不是表单元素（比如input）的值

• 获取元素文本内容：

const element = document.getElementById('myElement');
const textContent = element.textContent;

• 设置元素文本内容：

const element = document.getElementById('myElement');
element.textContent = 'New Text Content';

增加元素：

// 创建一个新的元素
var newElement = document.createElement('div');

// 给新元素添加文本内容
newElement.textContent = '这是一个新的元素';

// 将新元素添加到页面中的特定位置
document.body.appendChild(newElement);

替换元素：

// 获取要被替换的元素
var oldElement = document.getElementById('oldElementId');

// 创建一个新的元素
var newElement = document.createElement('div');
newElement.textContent = '这是一个新的元素';

// 用新元素替换旧元素
oldElement.parentNode.replaceChild(newElement, oldElement);

删除元素：

// 获取要删除的元素
var elementToRemove = document.getElementById('elementToRemove');

// 从其父元素中移除该元素
elementToRemove.parentNode.removeChild(elementToRemove);