Node之节点操作：让前端开发得心应手

2023-09-06 12:04:24

1. 元素操作

元素操作是Node中最基本的操作，包括创建元素、获取元素、修改元素和删除元素。

创建元素

创建元素可以使用document.createElement()方法，该方法接受一个参数，指定要创建的元素类型。例如，要创建一个div元素，可以使用以下代码：

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

获取元素

获取元素可以使用document.querySelector()和document.querySelectorAll()方法。document.querySelector()方法接受一个CSS选择器，返回第一个匹配的元素。document.querySelectorAll()方法接受一个CSS选择器，返回所有匹配的元素。例如，要获取id为"container"的div元素，可以使用以下代码：

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

修改元素

修改元素可以使用element.setAttribute()和element.removeAttribute()方法。element.setAttribute()方法接受两个参数，第一个参数是属性名称，第二个参数是属性值。element.removeAttribute()方法接受一个参数，指定要删除的属性名称。例如，要给div元素添加一个class属性，可以使用以下代码：

div.setAttribute('class', 'container');

删除元素

删除元素可以使用element.remove()方法。element.remove()方法没有参数。例如，要删除div元素，可以使用以下代码：

div.remove();

2. 属性操作

属性操作是Node中另一个重要的操作，包括获取属性、修改属性和删除属性。

获取属性

获取属性可以使用element.getAttribute()方法。element.getAttribute()方法接受一个参数，指定要获取的属性名称。例如，要获取div元素的class属性，可以使用以下代码：

const className = div.getAttribute('class');

修改属性

修改属性可以使用element.setAttribute()方法。element.setAttribute()方法接受两个参数，第一个参数是属性名称，第二个参数是属性值。例如，要给div元素的class属性添加一个container值，可以使用以下代码：

div.setAttribute('class', 'container');

删除属性

删除属性可以使用element.removeAttribute()方法。element.removeAttribute()方法接受一个参数，指定要删除的属性名称。例如，要删除div元素的class属性，可以使用以下代码：

div.removeAttribute('class');

3. 文本操作

文本操作是Node中另一个基本的操作，包括获取文本、修改文本和删除文本。

获取文本

获取文本可以使用element.textContent和element.innerText方法。element.textContent方法返回元素及其所有子元素的文本内容。element.innerText方法返回元素及其子元素的可见文本内容。例如，要获取div元素的文本内容，可以使用以下代码：

const text = div.textContent;

修改文本

修改文本可以使用element.textContent和element.innerText方法。element.textContent方法可以修改元素及其所有子元素的文本内容。element.innerText方法可以修改元素及其子元素的可见文本内容。例如，要修改div元素的文本内容，可以使用以下代码：

div.textContent = 'Hello World!';

删除文本

删除文本可以使用element.textContent和element.innerText方法。element.textContent方法可以删除元素及其所有子元素的文本内容。element.innerText方法可以删除元素及其子元素的可见文本内容。例如，要删除div元素的文本内容，可以使用以下代码：

div.textContent = '';

4. 注释操作

注释操作是Node中另一个基本的操作，包括创建注释、获取注释和删除注释。

创建注释

创建注释可以使用document.createComment()方法，该方法接受一个参数，指定注释内容。例如，要创建一个注释，可以使用以下代码：

const comment = document.createComment('This is a comment');

获取注释

获取注释可以使用element.childNodes和element.firstChild方法。element.childNodes属性返回元素的所有子节点，包括注释节点。element.firstChild属性返回元素的第一个子节点，包括注释节点。例如，要获取div元素的注释节点，可以使用以下代码：