渲染 - Javascript

渲染是将数据转化为页面的过程。在 Javascript 中，通常通过操作 DOM 对象来实现渲染效果。以下是关于渲染的一些介绍和实例代码。

DOM 渲染

DOM （文档对象模型）是一个表示 HTML 文档的树形结构。通过 JavaScript 代码操作 DOM 对象，可以实现动态的页面渲染效果。

创建 DOM 元素

可以通过 JavaScript 代码创建 DOM 元素，例如创建一个 div 元素，并将其添加到页面中：

let elem = document.createElement("div");
elem.innerHTML = "Hello World";
document.body.appendChild(elem);

以上代码，创建了一个 div 元素，并将其内容设置为 "Hello World"，最后将其添加到页面中。

更新 DOM 元素

可以通过 JavaScript 代码更新 DOM 元素的内容，例如在按钮点击事件中，将文本框的内容更新到页面中：

let btn = document.querySelector("#btn");
let input = document.querySelector("#input");

btn.addEventListener("click", function() {
  let value = input.value;
  let elem = document.createElement("div");
  elem.innerHTML = value;
  document.body.appendChild(elem);
});

以上代码，当按钮被点击时，将文本框的值取出，创建一个 div 元素，并将其添加到页面中。

删除 DOM 元素

可以通过 JavaScript 代码删除 DOM 元素，例如在按钮点击事件中，删除特定的元素：

let btn = document.querySelector("#btn");
let elem = document.querySelector("#elem");

btn.addEventListener("click", function() {
  elem.parentNode.removeChild(elem);
});

以上代码，当按钮被点击时，将取得要删除的元素的父元素，通过父元素的 removeChild 方法，将子元素（要删除的元素）从 DOM 树中删除。

模板引擎渲染

模板引擎是一个将数据和模板结合起来，生成 HTML 页面的工具。常见的模板引擎有 Mustache、Handlebars 等。

以下是使用 Handlebars 模板引擎渲染数据的示例：

let data = { title: "Hello", content: "World" };
let template = document.querySelector("#template").innerHTML;
let render = Handlebars.compile(template);
let html = render(data);
document.body.innerHTML += html;

以上代码，首先准备数据，然后取得 Handlebars 模板，并编译为可以使用的函数，最后将数据和编译后的模板结合，生成 HTML 页面，并将其添加到页面中。

总结

以上是 DOM 渲染和模板引擎渲染的介绍和实例代码。渲染是网页制作过程中不可或缺的一部分，掌握它对于网页制作者和开发者来说都是很重要的。