javascript - 在 Javascript 中操作 DOM 的简单方法

Question

我很好奇是否有一个现有的 JavaScript 框架可以让您更轻松地在 JavaScript 中创建 DOM。

目前，我正在这样更改 DOM:

var header_field = document.createElement('h1');
header_field.className = "header";
header_field.innerHTML = "This is the header";
parent_dom.appendChild(header_field);

...作为示例。

是否有一个框架可以解释 javascript 对象并基于该对象操作 DOM？我的设想是这样的:

jQuery.createDOM(
  [
    { element : 'h2', text : "This is the header", class : "header" }
  ]
);

...或类似的风格。

对于复杂的 Ajax 驱动网站，我发现自己需要键入大量重复代码才能创建简单的 HTML。那么，是否有一个框架可以使在 javascript 中操作 DOM 的过程变得更加容易呢？ jQuery 是否已提供此功能而我只是没有听说过？

Answer 1

编写重复代码是完全可以避免的。每当您发现自己多次编写相同的代码时，请将其封装在函数中。

function h1(text) {
    return $("<h1>").addClass("header").text(text);
}

更深入一点:

function el(name, className, text) {
    className = className || "";
    text = text || "";
    return $("<" + name + ">").addClass(className).text(text + "");
}
function h1 (text) {
    return el("h1", "header", text);
}

继续下去，您可以通过调用类似以下内容来创建整篇文章:

function article(titleText, author, postDate, content) {
    return el("div", "article").append(
        h1(titleText),
        authorEl(author),
        dateEl(postDate),
        content);
}
$("#articles").append(article("some title", authors.Joe, new Date(), someContent));

编辑:如果这超出了您的要求，jQuery 确实使创建元素变得更加容易。例如，您可以为页面上的每个弹出对话框创建一个关闭按钮，如下所示:

$("<div>").addClass("close").text("\xd7").prependTo(".dialog").click(function () {
    $(this).closest(".dialog").hide();
});

类似地，使用 .css({ backgroundColor: "#fff", border: "1px Solid blue"}) 添加样式，使用 .attr({ type: "checkbox “})，属性:.prop({checked: true })。这样的例子不胜枚举。