querySelector

返回文档中匹配指定 CSS 选择器的一个元素。 还是有个例子来说明，一目了然。 

 

<div id="div1">
    <div id="div2">
    </div>
</div>

var elm = document.querySelector("#div1");
console.log("elm: " + elm); 

打印如下： elm: [object HTMLDivElement]

我们可以用elm.outerHTML来打印出元素节点

console.log("elm: " + elm.outerHTML);

 

div1是元素的id标识， 而querySelector 方法的参数要传#div1 。 

我们在VUE使用中我们也是这么干的。 

<div id="app">

</div>

new VUE{

el : "#app",

data: {

    }

}

 

在vue源码中 query方法如下： 

function query (el) {
  if (typeof el === 'string') {
    var selected = document.querySelector(el);
    if (!selected) {
      warn(
        'Cannot find element: ' + el
      );
      return document.createElement('div')
    }
    return selected
  } else {
    return el
  }
}

 

用的document.querySelector(el)   所以我们el : "#app"  不能写成：el : "app"