DOM

最新推荐文章于 2025-07-27 20:22:41 发布

旺仔小薯条

最新推荐文章于 2025-07-27 20:22:41 发布

阅读量181

点赞数

CC 4.0 BY-SA版权

分类专栏： DOM 文章标签： js javascript dom

本文链接：https://blog.youkuaiyun.com/begin_glory/article/details/113810723

DOM 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了DOM文档对象模型的基本操作，包括通过ID、标签名获取元素，以及HTML5新增的获取元素方法。还探讨了事件处理，包括事件源、事件类型和事件处理程序的概念，并提供了实例代码进行演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM

DOM 文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

获取元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

1.根据ID获取：用getElementById()方法可以获取带有ID的元素

<body>
    <div id="time">2021-2-10</div>
    <script>
    //因为文档页面从上往下加载，所以得先有标签，script写到标签下面
    var timer = document.getElementById('time');
    console.log(timer);
    //返回的是一个元素对象
    console.log(typeof timer);
    //console.dir() 打印返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
  </script>
</body>

2.根据标签名获取：使用geyElementsByTagName()方法可以返回带有标签名的对象的集合

<body>
  <ul>
    <li>你在我的耳机里陪我到任何地方1</li>
    <li>你在我的耳机里陪我到任何地方2</li>
    <li>你在我的耳机里陪我到任何地方3</li>
  </ul>
    <script>
    //返回的是获取过来元素对象的集合，以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    //如果想要依次打印里面的元素对象，可以采取遍历的方式
    for (var i = 0; i < lis.length; i++){
      console.log(lis[i]);
    }
    //如果页面中只有一个li，返回的还是伪数组的形式
    //如果页面中没有这个元素，返回空的伪数组
  </script>
</body>

还可以获取某个元素（父元素）内部所有指定标签名的子元素

语法：element.getElementsByTagName(‘标签名’);

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己

<body>
  <ol id='ol'>
    <li>月亮不会奔你而来1</li>
    <li>月亮不会奔你而来2</li>
    <li>月亮不会奔你而来3</li>
  </ol>
    <script>
    //var ol = document.getElementsByTagName('ol');
    //console.log(ol[0].getElementsByTagName('li'));
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));
  </script>
</body>

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

①document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合

②document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象

<body>
    <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);
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);
    //querySelectorAll()返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
    var lis = document.querySelectorAll('li');
    console.log(lis);
  </script>
</body>

4.获取body元素：document.body

5.获取html元素：document.documentElement

函数

1.语法结构：

function函数名(){

//函数体

}

例如：

<script>
       function sayHi(){
           console.log('hi~');
       } 
       //函数是做某件事，函数名一般是动词
       //函数不调用自己不会执行
       //调用函数
       sayHi();//调用函数时不要忘记加小括号
    </script>