得到div下所有的节点 ,存在list中,如何通过数组操作来让节点顺序发生变化
时间: 2023-07-16 14:16:17 浏览: 44
可以使用以下步骤来让节点顺序发生变化:
1. 使用 `querySelectorAll` 方法获取到指定 div 下的所有节点,返回的是一个 NodeList 类型的对象。
```javascript
const nodeList = document.querySelectorAll('div > *');
```
2. 将 NodeList 类型的对象转换为数组类型,可以使用 `Array.from` 方法或者扩展运算符(`...`)来实现。
```javascript
const nodeList = document.querySelectorAll('div > *');
const nodeListArray = Array.from(nodeList); // 或者 const nodeListArray = [...nodeList];
```
3. 对数组进行排序或者其他操作,例如将节点顺序反转,可以使用 `reverse` 方法。
```javascript
const nodeList = document.querySelectorAll('div > *');
const nodeListArray = Array.from(nodeList);
// 将节点顺序反转
nodeListArray.reverse();
```
4. 将处理后的节点数组重新插入到原来的 div 中,可以使用 `appendChild` 方法。
```javascript
const nodeList = document.querySelectorAll('div > *');
const nodeListArray = Array.from(nodeList);
// 将节点顺序反转
nodeListArray.reverse();
// 将处理后的节点数组重新插入到原来的 div 中
const div = document.querySelector('div');
div.innerHTML = '';
nodeListArray.forEach(node => div.appendChild(node));
```