JS中的DOM元素操作

 获取页面中的DOM元素
     document.getElementById  在整个文档中通过元素的ID 属性值，获取到这个元素对象
     getElementById  是获取元素的方法，而document 限定了获取元素的范围，我们把这个范围称之为“上下文【context】”
    
     1..通过getElementById 获取的元素是一个对象数据类型的值（里面包含很多内置属性）
     typeof oBox =>"object"
    
     2..分析包含属性
       className 存储的值是一个字符串，代表当前元素的样式类名
    
     id：存储的是当前元素ID值（字符串）
    
     innerHTML:存储当前元素中所有的内容（包含HTML标签）
     innerText：存储当前元素中所有的文本内容（没有元素标签）
     onclick:元素的一个事件属性，基于这个属性，可以给当前元素绑定点击事件
键盘事件  
     onkeydown(键盘按下)  onkeyup(键盘抬起)  onkeypress(按键事件)
表单事件
      onfocus(获得焦点)   onblur（失去焦点）
鼠标事件
      onclick（单击）  ondbclick  onmouseleave(水平离开)  onmouseout（离开）
onmousemove（鼠标移动） onmouseenter（鼠标进入）  onmouseover（鼠标悬停） onmousewheel(鼠标滚轮事件)
浏览器事件
     window事件  onload（加载完成事件） onresize(窗口变化事件)   onerror（报错事件）  onscroll(滑动事件)
触屏事件
     touch（触屏）  touchstart （开始触屏 ）  touchmove（触屏移动） touchend(触屏结束)
    
    style:存储当前元素所有的‘行内样式’值（获取和操作的都只能是写在标签上的行内样式，
     写在样式表中的样式，无法基于这个属性获取到）

 var oBox= document.getElementById('box');
   想要修改BOX的样式
     通过style 修改行内样式
   oBox.style.backgroundColor='pink';
    基于CLASS-NAME 属性修改BOX的样式，从而改变样式
   oBox['className']='box bgcolor';
   oBox['className']+=' bgcolor';

  获取元素集合
  [context].getElementsByTagName
   在指定的上下文中，通过元素的标签名 获取一组元素集合
    上下文是我们自己指定的
  var  boxList = oBox.getElementsByTagName('li');
    console.dir(boxList);
    获取的结果是一个元素集合（HTMLCollection）
    1.首先它也是对象数据类型，结构和数组非常相似（数字作为索引，length代表长度）但是不是数组，我们把它叫做‘类数组’
    boxList[0] 获取当前集合中的第一个LI （通过索引获取到具体的某一个LI即可）
    boxList.length 获取集合中LI的数据
    2.集合中的每一项存储的值又是一个元素对象（对象数据类型，包含很多的内置属性,例如：
      id/className...)
     boxList[1].style.color='red';修改集合中第二个LI的文字颜色
 操作dom元素的属性和行为（事件）
      js不能操作一组对象  只能分开操作
      操作元素的属性 
    var btn=document.getElementsByTagName("button");
    修改属性     -----js操作的属性都是行内的  (设置或者获取)
    btn[0].style.background="red";
    btn[0].style.width="200px";

    获取对象的属性
    console.log(btn[0].style.width);
    js获取非行内样式
    console.log(window.getComputedStyle(btn[0]).height);