Javascript—DOM

DOM (Document Object Model) 操作是指使用JavaScript操作HTML文档中的元素。DOM是将HTML文档表示为树状结构的方式，每个HTML元素都是树中的一个节点，可以通过JavaScript来访问和修改这些节点。

以下是一些常见的DOM操作：

获取元素：
可以使用document.getElementById()通过元素的ID获取单个元素，或者使用document.querySelector()和document.querySelectorAll()通过选择器获取元素集合。

// 通过ID获取单个元素 
const myElement = document.getElementById('myElement'); 
// 通过选择器获取单个元素 
const myElement = document.querySelector('.myClass'); 
// 通过选择器获取元素集合 
const myElements = document.querySelectorAll('.myClass');

获取父元素和子元素

获取父元素：
- 使用parentNode属性获取元素的直接父节点。
- 使用parentElement属性获取元素的直接父元素节点。

const childElement = document.getElementById('childElement'); 
// 获取直接父节点 
const parentNode = childElement.parentNode; 
// 获取直接父元素节点 
const parentElement = childElement.parentElement;

获取子元素：
- 使用childNodes属性获取元素的所有子节点（包括文本节点和元素节点）。
- 使用children属性获取元素的所有子元素节点。
- 使用querySelector()和querySelectorAll()方法在元素的子孙节点中查找符合选择器的元素。

const parentElement = document.getElementById('parentElement'); 
// 获取所有子节点 
const childNodes = parentElement.childNodes; 
// 获取所有子元素节点 
const children = parentElement.children; 
// 使用选择器获取子元素 
const childElement = parentElement.querySelector('.childClass'); 
const childElements = parentElement.querySelectorAll('.childClass');

需要注意的是，childNodes返回的是一个 NodeList 对象，而children返回的是一个 HTMLCollection 对象。它们都是类数组对象，可以通过索引访问其中的元素。

如果你只需要获取第一个或最后一个子元素，你可以使用firstElementChild和lastElementChild属性：

const firstChild = parentElement.firstElementChild; 
const lastChild = parentElement.lastElementChild;

Node和Element的区别

在JavaScript中，Node 和 Element 是两个不同的概念，它们表示文档对象模型（DOM）中的不同类型的节点。

Node（节点）：

Node 是 DOM 中的基本构建块，表示文档中的一个节点。
所有 DOM 节点类型都继承自 Node 类型，包括元素节点（Element）、文本节点、注释节点等。
Node 类型有一些常用的属性和方法，如 parentNode、childNodes、appendChild() 等。

Element（元素）：

Element 是 Node 的一种特殊类型，表示文档中的元素节点。
元素节点是 HTML 文档中的标签，如 <div>、<p>、<span> 等。
Element 类型继承自 Node 类型，因此它具有 Node 类型的属性和方法，同时还有一些特定于元素的属性和方法，如 tagName、innerHTML、setAttribute() 等。

因此，Element 是 Node 的一种具体类型，表示文档中的元素节点。Node 类型更广泛，包括了文档中的所有节点类型，而 Element 类型是其中的一种特殊类型。

在使用 JavaScript 操作 DOM 时，你可以通过获取节点的类型来判断它是一个 Node 还是一个 Element。例如，使用 nodeType 属性可以获取节点的类型，其中 1 表示元素节点（Element Node），3 表示文本节点（Text Node），8 表示注释节点（Comment Node）等。

const node = document.getElementById('myNode');

if (node.nodeType === 1) {
  // 元素节点
  console.log('This is an element node');
} else if (node.nodeType === 3) {
  // 文本节点
  console.log('This is a text node');
} else if (node.nodeType === 8) {
  // 注释节点
  console.log('This is a comment node');
} else {
  console.log('This is another type of node');
}

总结：Node 是 DOM 中的基本节点类型，而 Element 是 Node 的一种特殊类型，表示文档中的元素节点。

修改元素内容：

可以使用element.innerHTML属性来设置或获取元素的HTML内容，或者使用element.textContent属性来设置或获取元素的文本内容。

// 设置元素的HTML内容 

myElement.innerHTML = '<h1>Hello, World!</h1>'; 

// 获取元素的文本内容 

const textContent = myElement.textContent;

修改元素样式：

可以使用element.style属性来设置元素的样式，例如element.style.color = 'red'可以将元素的文本颜色设置为红色。

// 设置元素的样式 myElement.style.color = 'red'; myElement.style.fontSize = '20px'; // 获取元素的样式 const color = myElement.style.color;

添加和删除元素：

可以使用document.createElement()创建一个新的元素，然后使用element.appendChild()将其添加到父元素中。可以使用element.remove()方法从文档中删除元素。

// 创建新的元素 
const newElement = document.createElement('div'); 
newElement.textContent = 'New Element'; 
// 将新元素添加到父元素中 
myElement.appendChild(newElement); 
// 从文档中删除元素 
myElement.remove();

添加和移除事件监听器：

可以使用element.addEventListener()方法来添加事件监听器，例如element.addEventListener('click', myFunction)可以在点击元素时调用myFunction函数。可以使用element.removeEventListener()方法来移除事件监听器。

// 添加点击事件监听器 
myElement.addEventListener('click', handleClick); 
// 点击事件处理函数 
function handleClick() { console.log('Element clicked!'); } 
// 移除点击事件监听器 
myElement.removeEventListener('click', handleClick);

遍历和修改元素属性：

可以使用element.getAttribute()和element.setAttribute()方法来获取和设置元素的属性值，例如element.getAttribute('src')可以获取图片元素的src属性

// 获取元素的属性值 
const src = myElement.getAttribute('src'); 
// 设置元素的属性值 
myElement.setAttribute('src', 'image.jpg');

Node和Element的区别

发表回复 取消回复

发表回复取消回复