[JS DOM&BOM]DOM获取元素

Posted 2021-09-08 鱼竿钓鱼干

[JS DOM&BOM]DOM元素操作

获取元素

document.getElementById()

返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
id是大小写敏感的字符串

 <div id="time">2019-9-9</div>
 <script>
   var timer=document.getElementById('time');
   console.dir(timer);//打印返回的元素对象，更好的查看里面的属性和方法
 </script>

Document.getElementsByTagName()

返回带有指定标签名的对象的集合，以伪数组的形式存储

  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
  </ul>
  <ol>
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
  </ol>
  <script>
    //得到对象集合
    var lis=document.getElementsByTagName('li');
    console.log(lis);
    //遍历输出每个对象
    for(var i=0;i<lis.length;i++){
      console.log(lis[i]);
    }
    //获取某个元素（父元素）内部所有指定标签名的子元素
    var ol=document.getElementsByTagName('ol');//[ol]
    //父元素必须是单个对象（指定哪个元素对象）获取的时候不包括父元素自己
    console.log(ol[0].getElementsByTagName('li'));
</script>

Document.getElementsByClassName()

返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
  <script>
    var boxs=document.getElementsByClassName('box');
    console.log(boxs);    
  </script>

querySelector()

html5,返回指定选择器的第一个元素对象，里面的选择器要加符号

  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
  <script> 
    var firstBox=document.querySelector('.box');//.为类选择器
    console.log(firstBox);
    var nav=document.querySelector('#nav');//#为id选择器
    console.log(nav);
    var li=document.querySelector('li');
    console.log(li);
  </script>

querySelectorAll()

HTML5,返回指定选择器的所有元素对象Document.getElementsByClassName()等价，更简便。

  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div id="nav">
    <ul>
      <li>首页</li>
      <li>产品</li>
    </ul>
  </div>
  <script> 
    var allBox=document.querySelectorAll('.box');
    console.log(allBox);
  </script>

获取body元素和html元素

  <script> 
  //获取body
    var bodyEle=document.body;
    console.log(bodyEle);
    console.dir(bodyEle);
  //获取html
    var htmlEle=document.documentElement;
    console.log(htmlEle);
  </script>