js 创建dom(使用JS动态生成页面结构)

什么是DOM

DOM，全称为文档对象模型（Document Object Model），是一种用于描述HTML和XML文档的对象模型。HTML和XML文档都可以通过DOM解析器转换为一棵节点树，节点树中的每个节点都是一个对象，可以通过JavaScript动态地修改文档内容和结构。

使用JavaScript动态生成页面结构

JavaScript可以使用DOM API动态操作HTML和XML文档。通过创建、添加、删除、修改HTML元素或属性，JavaScript可以实现无需刷新页面的动态效果。

如何创建DOM节点

DOM通过节点树的形式来描述文档结构，因此在动态生成页面时就需要创建节点。通常我们使用createElement()方法来创建节点并赋值。例如：

// 创建一个div节点
var div = document.createElement('div');
// 设置div节点的类名
div.className = 'container';
// 将div节点添加到body节点中
document.body.appendChild(div);

上述代码中，我们首先使用createElement()方法创建了一个div节点，接着通过设置className属性设置div节点的类名为"container"，最后将div节点添加到body节点中。通过这种方式，我们就可以在页面中动态创建元素。

如何获取和修改DOM节点

在动态生成页面时，我们通常需要获取已有的元素并进行修改。为了获取DOM节点，我们可以使用getElementsByTagName()、querySelector()、querySelectorAll()等方法。例如：

// 获取所有class为box的元素节点
var boxes = document.querySelectorAll('.box');
// 遍历boxes数组并将所有元素宽度设置为200px
for (var i = 0; i < boxes.length; i++) {
  boxes[i].style.width = '200px';
}

上述代码中，我们使用querySelectorAll()方法获取所有class名为"box"的节点，并使用for循环遍历所有节点，将它们的宽度设置为200px。

节点操作的效率

当我们在使用DOM操作界面元素时，往往需要频繁地添加、删除、替换、移动元素。这时候就需要考虑节点操作的效率问题。一般来说，通过innerHTML属性批量操作节点元素要比通过DOM API单个操作要更快一些。

例如，在上节中，我们通过querySelectorAll()方法获取了所有class名为"box"的节点，并通过for循环将它们的宽度设置为200px。实际上，我们可以将这个循环操作封装在一个函数中，然后使用innerHTML属性一次性修改所有节点样式。例如：

function setWidth(elements) {
  var html = '';
  for (var i = 0; i < elements.length; i++) {
    html += '
';

  }
  document.body.innerHTML = html;
}

上述代码中，我们定义了一个setWidth()函数，接收一个元素数组作为参数。然后我们使用for循环将每个元素的宽度设置为200px，并将所有元素拼接成一个HTML字符串，最后使用innerHTML属性一次性修改所有节点样式。使用这种方式，我们可以避免频繁的节点操作，从而提高节点操作的效率。

总结

在使用JavaScript动态生成页面结构时，DOM提供了丰富的API供我们使用。通过创建节点和修改属性，我们可以在页面中动态添加、删除和替换元素。需要注意的是，在操作节点时，我们应该尽量减少频繁的操作，以提高效率。