老生常谈jacascript DOM节点获取

<div class="test abc"></div>
  <script>
   var oTest = document.getElementsByClassName('test')[0];
   var oTestAbc = document.getElementsByClassName('test abc')[0];
   var oAbc = document.getElementsByClassName('abc')[0];
   console.log(oTest === oTestAbc);//true
   console.log(oAbc === oTestAbc);//true
   console.log(oAbc === oTest);//true
   
   console.log(oTest.classList);//["test", "abc", value: "test abc"] 
   console.log(oTest.classList[0]);//"test" 
   console.log(typeof oTest.classList[0]);//"string" 
   console.log(oTest.classList.item(0));//"test" 
   
   //add()将给定的字符串值添加到列表中，没有返回值，如果值已存在，则不添加;
   oTest.classList.add('def');
   console.log(oTest.classList);//["test", "abc", "def", value: "test abc def"] 
   
   //contains()表示列表中是否存在给定的值，如果存在则返回true，否则返回false;
   console.log(oTest.classList.contains('def'));//true
   console.log(oTest.classList.contains('abcde'));//false
   
   //remove()从列表中删除给定的字符串，没有返回值；
   oTest.classList.remove('abc');
   console.log(oTest.classList);//["test", "def", value: "test def"]
   
   //toggle()如果列表中已经存在给定的值，删除它并返回false；如果列表中没有给定的值，添加它并且返回true;
   console.log(oTest.classList.toggle('hello'));//true
   console.log(oTest.classList);//["test", "def", "hello", value: "test def hello"]
   console.log(oTest.classList.toggle('test'));//false
   console.log(oTest.classList);//["def", "hello", value: "def hello"]
  </script>

<div id="wrapper">
   <ul class="box">
    <li class="no1">第一行</li>
    <li class="no2">第二行</li>
    <li class="no3">第三行</li>
    <li class="no4">第四行</li>
    <li class="no5">第五行</li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiNo1 = oWrapper.querySelector('.no1');
   //obj.querySelector(selector) 方法接收一个CSS选择符，返回与该模式匹配的第一个元素，
   var oLiFirst = oWrapper.querySelector('li');
   var oFirstLi = oWrapper.querySelector('ul > li');
   console.log(oLiNo1 === oLiFirst);//true
   console.log(oLiNo1 === oFirstLi);//true
   console.log(oLiFirst === oFirstLi);//true
   console.log(oLiNo1.innerHTML , oLiFirst.innerHTML , oFirstLi.innerHTML);//第一行 第一行 第一行
   
   //obj.querySelectorAll(selector) 接收一个CSS选择符，返回一个类数组对象
   var oWrapperAll = document.querySelectorAll('#wrapper');
   console.log(oWrapperAll);//[div#wrapper]
   console.log(oWrapperAll[0] === oWrapper);//true
   
   var oWrapperArray = oWrapperAll[0];
   var oLiFirstAll = oWrapperArray.querySelectorAll('li');
   var oLiFirstArrayNo1 = oWrapperArray.querySelectorAll('li')[0];
   console.log(oLiFirstArrayNo1 === oLiNo1);//true
   console.log(oLiFirstAll[1].innerHTML);//第二行
   
//   console.log(oWrapperArray.matchesSelector('#wrapper'));
   //TypeError: oWrapperArray.matchesSelector is not a function
   
   console.log(oWrapperArray.webkitMatchesSelector('#wrapper'));//true
   //obj.matchesSelector(selector) 有兼容性问题，
   //IE9+浏览器支持 msMatchesSelector() 方法，
   //firefox 支持 mozMatchesSelector() 方法，
   //safari 和 chrome 支持webkitMatchesSelector() 方法。
  </script>

<div id="wrapper">
   <ul class="box">
    <li class="no1">第一行</li>
    <li class="no2">第二行</li>
    <li class="no3">第三行</li>
    <li class="no4">第四行</li>
    <li class="no5">第五行</li>
   </ul>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('#wrapper');
   var oUl = oWrapper.querySelector('ul');
   
   var oLiLast = oUl.querySelector('li:last-of-type');
   var oLiAll = oUl.querySelectorAll('ul > li');
   console.log(oLiLast.innerHTML);//第五行
   console.log(oLiAll.length);//5
   
   var newLi = document.createElement('li');
   newLi.innerHTML = '新加的Li，放到最后面';
   oUl.appendChild(newLi);
   //querySelectorAll() 方法得到的类数组对象是非动态实时的；
   console.log(oLiLast.innerHTML);//第五行
   console.log(oLiAll.length);//5
   console.log(oUl.querySelector('li:last-of-type').innerHTML);//新加的Li，放到最后面
   console.log(oUl.querySelectorAll('ul > li').length);//6
  </script>
  
  
  
  <div class="wrapper">
   <div class="test1"></div>
   <div class="test2"></div>
  </div>
  <script type="text/javascript">
   var oWrapper = document.querySelector('.wrapper');
   //selector 类方法在元素上调用时，指定的选择器仍然在整个文档中进行匹配，然后过滤出结果集，以便它只包含指定元素的后代元素。
   //这看起来是违反常规的，因为它意味着选择器字符串能包含元素的祖先而不仅仅是所匹配的元素
   console.log(oWrapper.querySelectorAll('div div'));//[div.test1, div.test2]
   //这句代码我的理解是获取oWrapper内部子孙元素中，div里嵌套的div，这里没有这种情况，所以应该弹出一个空数组
   
   //如果出现后代选择器，为了防止该问题，可以在参数中显式地添加当前元素的选择器
   console.log(oWrapper.querySelectorAll('.wrapper div div'));//[]
   console.log(oWrapper.querySelectorAll('.wrapper div'));//[div.test1, div.test2]
  </script>