Question

我想用一种易于理解的方式创建几个元素，设置属性并将它们与Vanilla js一起放置在DOM中。

我现在的操作方式是使用正常的函数来进行所有DOM编辑，但是一个约束是我需要跟踪当前元素并在继续创建下一个元素之前附加它。

我刚刚开始学习班级，并试图将其转换为班级结构，但无法使它生效。

这里的最佳做法是什么？如果类可以做到这一点，那么创建和附加div的基本代码是什么？

下面是我的代码（可以正常工作），但是我想改善逻辑

let body = document.querySelector("body");

// keeping track of the current div
let currentDiv;

// create and add attr
function createDiv(){
  let newDiv = document.createElement("div");
  currentDiv = newDiv;
}
function size(el, x, y){
  el.style.height = y;
  el.style.width = x;
}
function paintBG(el, clr){
  el.style.backgroundColor = clr;
}
function append(parent){
  parent.append(currentDiv);
}

// and then run the functions
createDiv();
size(currentDiv, "100%", "100px")
paintBG(currentDiv, "red");
append(body);

Answer 1

您在混淆概念。

DOM中的类将具有相似功能的项目组合在一起，因此可以批量查询/更新它们，也可以以相同方式对其进行样式设置。

元素是元素，因此需要这样创建。

<div class="header" />和<span class="header" />可以共享一个类，但是它们始终是不同的元素，因此，您不能“按类”动态创建它们。

在您的示例中，我建议使用CSS而不是单独操作元素样式。

Answer 2

将这些方法添加到 HTMLElement 。下面是一个小例子。

let body = document.querySelector("body");
//create element with any tag  like create('tagname')
function create(tag){
	return document.createElement('div');
}
//append any number of child like body.append(elm1,elm2,elm3)
HTMLElement.prototype.append = function(...children){
	children.forEach(child => {
		this.appendChild(child);
	})
	return this;
}
//append the element to any other element 
HTMLElement.prototype.appendTo = function(parent){
	parent.appendChild(this);
	return this;
}
//change the size
HTMLElement.prototype.size = function(x,y){
	this.style.height = x;
	this.style.width = y;
	return this;
}
//changes color and background color
HTMLElement.prototype.paint = function(bgColor,textColor){
	this.style.backgroundColor = bgColor;
	if(textColor) this.style.color = textColor;
	return this;
}
let myDiv = create('div').size('100px','100%').paint('blue','black').appendTo(body);

我可以使用类在DOM中创建/放置元素吗？

2 个答案: