使用数组名称ID操作运行时生成的div

Question

这样就可以成功生成带有和数组名称地址的div作为id，例如：

<div id="div1[0]" style="border: 1px solid rgb(0, 255, 0);"></div>

如何使用下面的getElementById()示例获取该ID的句柄不起作用。通过直接访问div，如果通过在构造函数中使用的父类，即数组divArray();

	var divArray = new Array();			// div array "holder"
	var dCount = 0;						// div array counter

	class dyDiv {

		constructor (){	

			var parentDiv = document.getElementById('canvas');
			var div1 = document.createElement('div');
			var div2 = document.createElement('div');

			div1.setAttribute("id", "div1["+dCount+"]");	// id="div1[0]"  id="div1[2]" ... and so on
			div2.setAttribute("id", "div2["+dCount+"]");

			div1.style.border = "1px #f00 solid";	// red border
			div2.style.border = "1px #0f0 solid";	// green border

			parentDiv.appendChild(div1);
			parentDiv.appendChild(div2);
		}

	}

	function addNewDiv(){

		divArray[dCount] = new dyDiv();
		dCount++;

	}

	function modifyTest(){
		// after creation how does one manipulate a div inside an object
		divArray[0].div1[0].style.border = "1px #00f solid";						// does not work
		document.getElementById('div10').style.border = "1px #00f solid";			// does not work	
		document.getElementById('div1')[0].style.border = "1px #00f solid";			// does not work
		document.getElementById(div1[0]).style.border = "1px #00f solid";			// does not work
	}

	function init(){
		addNew.addEventListener("click", addNewDiv,false);
		modTest.addEventListener("click", modifyTest,false);
	}


	window.addEventListener("DOMContentLoaded",init,false);

<button id="addNew">Create Dynamic Div</button>
<button id="modTest">Modify divArray[0]</button>
<div style="padding:50px" id="canvas"></div>

Answer 1

根据您提供的代码，您可以使用this关键字。

  

当函数用作构造函数（使用new关键字）时，其this绑定到正在构造的新对象。

请参阅'this' as a constructor @ MDN 另请参阅Classes Constructor上的示例。

var divArray = new Array(); // div array "holder"
var dCount = 0; // div array counter

class dyDiv {

  constructor() {

    var parentDiv = document.getElementById('canvas');
    this.div1 = document.createElement('div');
    this.div2 = document.createElement('div');

    this.div1.setAttribute("id", "div1[" + dCount + "]"); // id="div1[0]"  id="div1[2]" ... and so on
    this.div2.setAttribute("id", "div2[" + dCount + "]");

    this.div1.style.border = "1px #f00 solid"; // red border
    this.div2.style.border = "1px #0f0 solid"; // green border

    parentDiv.appendChild(this.div1);
    parentDiv.appendChild(this.div2);
  }

}

function addNewDiv() {

  divArray[dCount] = new dyDiv();
  dCount++;

}

function modifyTest() {
  // after creation how does one manipulate a div inside an object
  divArray[0].div1.style.border = "1px #00f solid";
}

function init() {
  addNew.addEventListener("click", addNewDiv, false);
  modTest.addEventListener("click", modifyTest, false);
}


window.addEventListener("DOMContentLoaded", init, false);

<button id="addNew">Create Dynamic Div</button>
<button id="modTest">Modify divArray[0]</button>
<div style="padding:50px" id="canvas"></div>

或者，您可以从构造函数返回一个对象：

  

虽然构造函数的默认值是返回this引用的对象，但它可以返回一些其他对象（如果返回值不是对象，则返回this对象）。

var divArray = new Array(); // div array "holder"
var dCount = 0; // div array counter

class dyDiv {

  constructor() {

    var parentDiv = document.getElementById('canvas');
    var div1 = document.createElement('div');
    var div2 = document.createElement('div');

    div1.setAttribute("id", "div1[" + dCount + "]"); // id="div1[0]"  id="div1[2]" ... and so on
    div2.setAttribute("id", "div2[" + dCount + "]");

    div1.style.border = "1px #f00 solid"; // red border
    div2.style.border = "1px #0f0 solid"; // green border

    parentDiv.appendChild(div1);
    parentDiv.appendChild(div2);

    return {
      'div1': div1,
      'div2': div2
    }

  }

}

function addNewDiv() {

  divArray[dCount] = new dyDiv();
  dCount++;

}

function modifyTest() {
  // after creation how does one manipulate a div inside an object
  divArray[0].div1.style.border = "1px #00f solid";
}

function init() {
  addNew.addEventListener("click", addNewDiv, false);
  modTest.addEventListener("click", modifyTest, false);
}


window.addEventListener("DOMContentLoaded", init, false);

<button id="addNew">Create Dynamic Div</button>
<button id="modTest">Modify divArray[0]</button>
<div style="padding:50px" id="canvas"></div>

Answer 2

你需要像这样访问div：

document.getElementById('div1[0]')

确保包含引号。