document.querySelector问题

Question

在下面的代码中，为什么document.querySelector（）返回null？

var element = document.createElement('div');
element.classList.add('abc');
var test = document.querySelector("." + element.className);

Answer 1

您需要添加.

var test = document.querySelector("."+element.className);

修改

您还需要将其添加到正文

document.body.appendChild(element); 

请参阅http://codepen.io/jammer99/pen/dMmXYL

Answer 2

1. 在将DOM附加到DOM元素之前，div不是DOM的一部分。
2. 您需要在前面添加一个点才能在类字符串上使用querySelector：document.querySelector("."+element.className)
3. 您附加div的DOM元素必须存在才能访问它。

window.onload=function() { // body exists
  var element = document.createElement('div');
  element.classList.add('abc');
  var test = document.querySelector("."+element.className);
  console.log(test,element.className);
  document.body.appendChild(element); // NOW the DIV exists in DOM
  test = document.querySelector("."+element.className);
  console.log(test);
}