我很好奇是否有一个现有的 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 是否已提供此功能而我只是没有听说过?
最佳答案
编写重复代码是完全可以避免的。每当您发现自己多次编写相同的代码时,请将其封装在函数中。
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 })
。这样的例子不胜枚举。
关于javascript - 在 Javascript 中操作 DOM 的简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9642910/