DOM 简介+案例

最新推荐文章于 2024-07-26 11:41:15 发布

李song

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量834

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_51003607/article/details/114660420

版权

什么是 DOM
文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言(html 或XML)的标准编程接口
DOM 树
在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

如何获取页面元素
DOM 在我们实际开发中主要用来操作元素。
获取页面中的元素可以使用以下几种方式

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

根据 ID 获取
使用 getElementById( ) 方法可以获取带有 ID 的元素对象。

<body>
      <div id="box">我是div标签</div>
      <p id="pp"></p>
      <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
      </ul>
</body>
<script>
      // 1、通过ID 获取元素   在文档里面，用id名为 box的方式来获取这个元素
      // 1)因为我们文档从上往下加载，所以先得有标签，所以script 写到标签下面
      // 2）get 获得    element 元素   by 用/通过   驼峰命名
      // 3）参数 id 是大小写敏感的字符串
      // 4）返回的是元素对象   
      var box = document.getElementById('box');
      console.log(box);
      console.log(typeof box);

      // 5、后台打印我们返回的元素对象，更好的查看里面的属性和方法。
      console.dir(box);

      var p = document.getElementById('p');
      // console.log(p);

</script>

根据标签名获取
使用 getElementsByTagName( ) 方法可以返回带有指定标签名的对象的集合

<body>
    <ul>
        <li>诲女知之乎！</li>
        <li>知之为知之，</li>
        <li>不知为不知，</li>
        <li>是知也。</li>
        <li>知否知否，应是等你好久。</li>
    </ul>
    <ol id="ol">
        <li>诲女知之乎！</li>
        <li>知之为知之，</li>
        <li>不知为不知，</li>
        <li>是知也。</li>
        <li>知否知否，应是等你好久。</li>
    </ol>
</body>
<script>
    // 1、通过标签名获取 某个元素 内部所有指定标签名的子元素
    // var lis = document.getElementsByTagName('li');
    // console.log(lis);  
    // console.log(lis[0]);  

    // 2、我们要依次打印里面的元素对象，我们可以采取遍历的方式
    // for (var i = 0; i < lis.length; i++){
     
        // console.log(lis[i]);
    // }

    // 3、如果页面里面只有一个 li,返回的还是伪数组的形式
    // 4、如果页面中没有这个元素，返回的是 空的伪数组


    
    // 5、element.getElementsByTagName('标签名') 父元素必须是指定的单个元素
    // var ol = document.getElementsByTagName('ol');
    // console.log(ol[0].getElementsByTagName('li'));
    
    var ol = document.getElementById('ol');
    console.log(ol.getElementsByTagName('li'));


</script>

通过 HTML5 新增方法获取
还可以获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName(‘标签名’)；
注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
在这里插入图片描述

<body>

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

</body>
<script>
    // 1、 getElementsByClassName() 根据类名获取元素集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs);

    // 2、document.querySelector()  返回指定选择器的第一个元素
    // 切记，切记：里面的选择器需要加符号 .box   #nav
    var firstBox = document.querySelector('.box');
    console.log(firstBox);

    var nav = document.querySelector('#nav');
    console.log(nav);

    var li = document.querySelector('li');
    console.log(li);

    // 3、document.querySelectorAll() 返回指定选择器的所有对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);

    var lis = document.querySelectorAll('li');
    console.log(lis);
    
</script>

特殊元素获取

 // 1、获取body 元素
        var body = document.body;
        console.log(body);
        console.dir(body);

        
        // 2、获取html
        var html = document.documentElement;
        console.log(html);

执行事件的步骤
1、获取事件源。
2、注册事件（绑定事件）。
3、添加事件处理程序（采取函数赋值形式）。

常见的鼠标事件
在这里插入图片描述

<body>
    <button>唐伯虎</button>
</body>
<script>
    // 点击一个按钮，弹出对话框
    // 1、事件是由三个部分组成  事件源   事件类型  事件处理程序，以上就是我们称为的事件三要素
    // 1）事件源: 事件被谁触发的对象  谁  如：按钮
    var btn = document.querySelector('button');
    // 2)事件类型：如何触发，什么事件,  比如：鼠标点击  onclick、还是鼠标滚动、还是键盘按下
    // 3）事件处理程序： 通过一个函数赋值的方式  完成
    btn.onclick = function () {
     
        alert('点秋香');
    }

</script>

改变元素内容
element.innerText 从起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去除。
element.innerHTML 起始位置到终止位置的全部内容包括 html 标签，同时保留空格和换行。

<body>
    <div class="box">我是           div 
        标签</div>
</body>
<script>
    // 1、获取元素
    var box = document.querySelector('div');
    console.log(box.innerText);
    console.log(box.innerHTML);

    var html = document.body;
    console.log(html.innerText

最低0.47元/天解锁文章

李song

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM 简介+案例

什么是 DOM文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言(html 或XML)的标准编程接口DOM 树文档：一个页面就是一个文档，DOM中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示如何获取页面元素DOM 在我们实际开发中主要用来操作元素。获取页面中的元素可以使用以下几种方式根
复制链接

扫一扫