document.querySelector问题

Question

In the following code, why is document.querySelector() returning null?

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

Answer 1

You need to add a .

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

EDIT

You also need to add it to body

document.body.appendChild(element); 

See http://codepen.io/jammer99/pen/dMmXYL

Answer 2

1. The div is not part of the DOM until you append it to a DOM element.
2. You need to add a dot in front to use the querySelector on a class string: document.querySelector("."+element.className)
3. The DOM element you append your div to has to exist before you can access it.

 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); }