1. querySelector only returns the first matching element. If there is no matching item, it returns null.
2. querySelectorAll returns the set of matched elements, if there is no match, returns an empty nodelist (node array).
3. The returned result is static, and subsequent changes to the document structure will not affect the previously obtained results.
Both of these methods can accept three types of parameters: id(#), class(.), label, much like jQuery's selector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init ();
mui.plusReady (function () {
var btnBaidu=document.getElementById('btnGoBaidu');
btnBaidu.addEventListener('tap',function(){
document.location.href="https://www.baidu.com";
});
var list_container=document.querySelector('.mui-table-view');
var list=document.querySelector('.mui-table-view-cell');
list_container.addEventListener('tap',function(){
list.innerHTML+='<div>';
list.innerHTML+='666';
list.innerHTML+='</div>';
list_container.appendChild(list);
});
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">测试</h1>
</header>
<div class="mui-content">
<button id="btnGoBaidu">jump to Baidu</button>
<ul class="mui-table-view">
<li class="mui-table-view-cell"></li>
</ul>
</div>
</body>
</html>