DOM中通过方法获取节点

• 系统方法获取
  （1）getElementById 这种方法访问速度最快
  （1）getElementsByClassName
  （1）getElementsByName
  （1）getElementsByTagName

  <div id="box1">1</div>
    <div class="box2">2</div>
    <div name="box3">3</div>
    <div class="box2">4</div>
    <p>5</p>
    <p>6</p>
    <script>
        //getElementById  这种方法访问速度最快
    box1=document.getElementById("box1")//函数里面的参数必须写字符串，不然会被认为是变量
    box11=document.getElementById("box11")//没有该id返回null
    console.log(box1,box11)
    //getElementsByClassName
    classboxs=document.getElementsByClassName('box2')//返回的是装有所以类名为box2的标签元素的伪数组
    classboxs1=document.getElementsByClassName('box21')//没有这个类名返回的是空的伪数组
    console.log(classboxs,classboxs1)
    // getElementsByName
    box3=document.getElementsByName('box3')//返回的是装有所以name属性为box2的标签元素的伪数组
    box31=document.getElementsByName('box31')////没有这个name的属性值返回的是空的伪数组
    console.log(box3,box31)
    //getElementsByTagName
     ps=document.getElementsByTagName('p')//获取所有p标签的类数组
     span1=document.getElementsByTagName('span')//没有span标签会返回空的伪数组
     console.log(ps,span1)
    </script>

• 系统提供的直接获取的方式 (1)document.body ==> 获取body标签
  (2)document.forms==> 获取form表单们(1)document.anchors 获取a标签们(3)document.images==>获取图片们
  (4)document.links ==>获取链接们
  (5)document.links ==>获取链接们

• H5出的新方法 相当于选择器
  (1)querySelector
  (2)document.querySelectorAll

   let  class3=document.querySelector(".boxclass3")
   let  class4=document.querySelector(".boxclass4")//不符合返回null
   console.log(class3,class4)
   let  class1=document.querySelector(".boxclass1")//如果有两个一样的选择器，只会打印第一个标签
   console.log(class1)
   let class2=document.querySelectorAll(".boxclass2")//打印所以类选择器为boxclass2的标签伪数组
   let class5=document.querySelectorAll(".boxclass5")//不符合返回[]
   console.log(class2,class5)