javascriptDOM

2022/4/10 11:12:28

编程Tag： 元素 var 获取 console document log JavaScriptDOM

本文主要是介绍javascriptDOM，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

　　DOM简介

1文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口，可以通过DOM接口改变网页的内容、结构和样式。\

1.2Dom树状图

1.2.1文档：一个页面就是一个文档，DOM中使用document表示

1.2.2元素:页面中的所有的标签都是元素，DOm中使用element表示

1.2.3节点:网页中所有的元素都是节点，DOM中使用node表示

　　获取元素

1.根据元素的id获取

1.1使用getelementById（）进行获取元素对象

基本语法为：　

<body>
      <div id="time"></div>
      <script>
        // 1.get获取  element元素  by通过  驼峰命名法
        //2参数id是大小写敏感的字符串
        //3返回元素是一个对象objcet
         var timer=document.getElementById('time')
         console.log(timer);
      </script>
</body>

2.根据标签的名获取

2.1使用getelementsByTagName（）方法可以返回带有指定标签的对象集合

<body>
     <ol>
       <li>燕子，没有你我怎么活啊</li>
       <li>燕子，没有你我怎么活啊</li>
       <li>燕子，没有你我怎么活啊</li>
       <li>燕子，没有你我怎么活啊</li>
       <li>燕子，没有你我怎么活啊</li>
     </ol>
     <script>
       //1返回的是获取过来的元素对象的集合，以伪数组的形式存储的，如果页面中没有对应的元素直接返回[]空的伪数组
      var listEBT=document.getElementsByTagName('li')
      console.log(listEBT);
     </script>
</body>

3.通过html5新增的方法获取

3.1getElementsByClassName根据类名获得某些元素的集合

<body>
  <div class="box">盒子</div>
  <div class="box">盒子</div>
</body>
<script> 
//1getElementsByClassName根据类名获得某些元素的集合
 var  getBox=document.getElementsByClassName('box')
      console.log('getBox');
</script>

3.2document.querySelector('选择器')根据指定选择器返回第一个元素对象

<body>
  <div class="box">盒子</div>
  <div class="box">盒子</div>
<div id="nav">
  <li>首页</li>
  <li>我的</li>
</div>
</body>
<script> 
//querySelector返回指定选择器的第一个元素对象切记里面的选择器需要加符号.box,#nav
      var boxs=  document.querySelector('.box')
      console.log(boxs);

</script>

3.3querySelectorAll()返回指定选择器的所有元素的集合

<body>
  <div class="box">盒子</div>
  <div class="box">盒子</div>
<div id="nav">
  <li>首页</li>
  <li>我的</li>
</div>
</body>
<script> 
//querySelectorAll()返回指定选择器的所有元素的集合
     var listBox =document.querySelectorAll('.box')
     console.log(listBox);
</script>

4.特殊元素获取

4.1获取body元素

<body>
<script> 
    //获取body元素
    var bodyEle=document.body;
    console.log(bodyEle);
  </script>
</body>

4.2获取html元素

<script> 
    //获取body元素
    var htmlEle=document.documentElement;
    console.log(htmlEle);
  </script>

这篇关于javascriptDOM的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

javascriptDOM

相关编程文章