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

Question

这成功生成了 div 和数组名称地址作为 id 例如:

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

然后如何使用下面的 getElementById() 示例获取该 id 的句柄不起作用。如果通过在构造函数中使用的父级数组 divArray();

直接访问 div

	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

您需要像这样访问 div:

document.getElementById('div1[0]')

确保包含引号。