DOM 节点 CURD 和属性——优雅 JS 手工艺人

2023-11-03 04:19:20

好久不见，我是云牧，今天咱们继续聊聊 JS 高级中的 DOM 知识。DOM 作为前端开发的基石，是成为前端高手的必经之路。今天的文章，我会带大家深入探索 DOM 常用操作，以及一些容易混淆的属性。

DOM 节点 CURD 操作

1. 创建节点

// 使用 createElement() 方法创建新元素
const newElement = document.createElement('div');

// 使用 insertBefore() 方法插入新元素
const parentElement = document.getElementById('parent');
parentElement.insertBefore(newElement, parentElement.firstChild);

2. 读取节点

// 使用 querySelector() 方法选择元素
const element = document.querySelector('.element');

// 使用 getAttribute() 方法获取元素属性
const attributeValue = element.getAttribute('id');

3. 更新节点

// 使用 setAttribute() 方法更新元素属性
element.setAttribute('id', 'new-id');

// 使用 innerHTML 属性更新元素内容
element.innerHTML = 'New content';

4. 删除节点

// 使用 removeChild() 方法删除元素
parentElement.removeChild(element);

容易混淆的 DOM 属性

1. class 和 className

class 属性用于为元素指定 CSS 类名，而 className 属性返回元素的类名。

// 设置元素的类名
element.className = 'new-class';

// 获取元素的类名
const className = element.className;

2. id 和 name

id 属性用于为元素指定一个唯一的标识符，而 name 属性用于为元素指定一个名称。

// 设置元素的 ID
element.id = 'new-id';

// 获取元素的 ID
const id = element.id;

// 设置元素的名称
element.name = 'new-name';

// 获取元素的名称
const name = element.name;

3. value 和 innerHTML

value 属性用于获取或设置元素的文本值，而 innerHTML 属性用于获取或设置元素的 HTML 内容。

// 获取元素的文本值
const value = element.value;

// 设置元素的文本值
element.value = 'new-value';

// 获取元素的 HTML 内容
const htmlContent = element.innerHTML;

// 设置元素的 HTML 内容
element.innerHTML = 'new-html-content';