APl DOM文档对象模型

最新推荐文章于 2021-06-26 17:39:14 发布

浩哥学习编程之路

最新推荐文章于 2021-06-26 17:39:14 发布

阅读量239

点赞数

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

本文链接：https://blog.csdn.net/m0_46978034/article/details/110190352

版权

这篇博客详细介绍了DOM的基本概念，包括DOM树的结构以及通过ID、标签名等方法获取元素。还涵盖了事件基础，如事件概述、执行事件的步骤和常见鼠标事件。此外，讲解了如何操作元素内容、属性、样式以及节点，包括自定义属性和H5自定义属性的处理，最后讨论了节点层级关系和操作，如父级、子级、兄弟节点的处理方法。

摘要由CSDN通过智能技术生成

一.DOM简介

1.什么是DOM

文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。

2.DOM 树

在这里插入图片描述

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
文档树(Dom树)：以html为根节点，形成的一颗倒立的树状结构，我们成为DOM树；这个树上所有的东西都叫节点，节点有很多类，比如文本节点，元素节点等等，这些节点如果我们通过DOM方法去获取或者其他的操作去使用就叫做DOM对象，所有节点都是DOM对象

二.获取元素的方法

1.获取页面中的元素可以使用以下几种方式

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

1.根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象
getElementByld()，是document下的一个方法

代码演示

<body>
    <div id="time">2020-11-26</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们的script写在标签下面
        // 2.    document文档    get 获得 element 元素 by 通过 驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个对象
        var timer = document.getElementById('time');
        console.log(timer);
        // 5.console.dir 打印我们返回得的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

2.根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
语法如下

document.getElementsByTagName('标签名')

注意：

1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历
得到元素对象是动态的

代码演示

<body>
    <ul>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
    </ul>
    <ul id="nav">
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li')
        console.log(lis);
        // 2.如果想要依次打印里面的元素对象我们可以采取遍历方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签
        var nav1 = document.getElementById('nav') //这个获取nav元素
        var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签  要先获取 nav元素在获取里面的li
        console.log(navli);
    </script>
</body>

3.通过 HTML5 新增的方法获取(注意兼容)

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

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

3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合

注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

代码演示

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. 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. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>

4.获取特殊元素(body,html)

获取body元素

 - doucumnet.body // 返回body元素对象

获取html元素

. document.documentElement // 返回html元素对象

代码演示

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

三.事件基础

1.事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个
事件，然后去执行某些操作。

代码演示

<body>
    <button id="btn">浩哥</button>
    <script>
        // 点击一个按钮，弹出一个对话框
        // 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序 也称为事件三要素
        // (1).事件源 事件被触发的对象  
        var but = document.getElementById('btn')
            // (2).事件类型   如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过还是？？？？
            // (3).事件处理程序 通过一个函数赋值的方式 完成  因为函数就是实现某种功能的
        but.onclick = function() {
            alert('浩哥爱编程')
        }
    </script>
</body>

在这里插入图片描述

2.执行事件的步骤

1. 获取事件源DOM对象(意思是你要获取那个元素)
2. 注册事件(绑定事件意思是通过什么方式来处理比如是鼠标经过还是鼠标点击等等行为)
3. 添加事件处理程序(采取函数赋值形式意思是你想做啥)

代码演示

<body>
    <div>123</div>
    <script>
        // 事件执行步骤   点击div 控制台输出我被选中了
        // 1.获取事件源
        var div = document.querySelector('div')
            // 2.绑定事件 注册事件
            // div.onclick
            // 3.添加事件处理程序
        div.onclick = function() {
            console.log('我被点击了');
        }
    </script>
</body>

在这里插入图片描述

3.常见

最低0.47元/天解锁文章

浩哥学习编程之路

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
APl DOM文档对象模型

文章目录一.DOM简介一.DOM简介1.什么是DOM文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。2.DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示...
复制链接

扫一扫