DOM总结

最新推荐文章于 2022-11-01 17:55:57 发布

s_meng_

最新推荐文章于 2022-11-01 17:55:57 发布

阅读量285

点赞数

分类专栏：前端 DOM 文章文章标签： javascript dom html5

本文链接：https://blog.csdn.net/s_meng_/article/details/117600559

版权

前端同时被 3 个专栏收录

39 篇文章 2 订阅

订阅专栏

DOM

8 篇文章 0 订阅

订阅专栏

文章

8 篇文章 1 订阅

订阅专栏

	DOM我看视频看完了，然后就在这里做个总结吧。

文章目录

DOM是什么？
伪数组
获取元素
获取属性
- 获取元素自带属性
- 获取自定义属性
修改属性
元素节点
创建节点
- 创建元素节点
- 将创建的节点插入某个文档的节点树中
事件
事件流
鼠标事件对象
键盘事件

DOM是什么？

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM主要针对于元素的操作，主要有对元素的增、删、改、查、属性操作和事件操作。

伪数组

伪数组并不是真正意义的数组，知识具有数组的某些属性。

具有数组的length属性
按照索引的方法进行储存和调用
它没有真正数组可以使用的一些方法

获取元素

获取元素有3种方法，通过id、class、和标签来获得属性。

通过id获得元素

document.getElementById() 通过id来获取元素

<body>
    
    <div id="box"></div>

    <script>
        // 通过id来获取元素
        // 文档.id ID需要用引号引起来
        var box = document.getElementById('box'); 
        console.log(box);
        console.log(typeof box);
    </script>
</body>

通过ID获得的属性，会返回一个对象。

在这里插入图片描述

通过类名（class）获得元素

document.getElementByClassName() 通过类名来获取元素

<body>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>

    <script>
        var div = document.getElementsByClassName('div');
        console.log(div);
    </script>
</body>

通过ID获得的属性，会返回一个数组对象，以伪数组的形式储存。

访问第3个元素就是div[3-1]，下标的访问从0开始。
在这里插入图片描述

通过标签获得属性

document.getElementByTagName()

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        var div = document.getElementsByTagName('div');
        console.log(div);
        console.log(div[0]);
    </script>
</body>

返回一个数组对象，以伪数组的形式储存。
在这里插入图片描述

通用型的获取元素的方法

document.querySelector()

document.querySelector()方法返回第一个查找到的元素。

可以通过id，class，和标签来获得属性，参数需要用引号包起来，参数需要调用的符号。

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="box"></div>
    <div id="bo"></div>

    <script>
        let div = document.querySelector('div');
        console.log(div);
        let box = document.querySelector('.box');
        console.log(box);
        let bo = document.querySelector('#bo');
        console.log(bo);
    </script>
</body>

会返回第一个匹配的元素。
在这里插入图片描述
当我们需要获取到所有的元素怎么办？

获取所有的匹配元素

document.querySelectorAll(),返回一个数组对象，包含所有匹配的元素。

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div id="bo"></div>

    <script>
        let div = document.querySelectorAll('div');
        console.log(div);
        let box = document.querySelectorAll('.box');
        console.log(box);
        let bo = document.querySelector('#bo');
        console.log(bo);
    </script>
</body>

在这里插入图片描述

获取特殊的元素（body、html）

body和html是属于特殊的元素，当我们想获取到它时，可直接使用document.body返回body元素对象 document.documentElement返回html元素对象。

获取属性

获取属性有两种方法：一种针对于元素自带的属性，一种针对于自定义的属性。

获取元素自带属性

element.属性

<body>
    <img src="./images/1.jpg" alt="">

    <script>
    	//获得img元素
        let img = document.querySelector('img');
        // 获得img的src属性
        let sr = img.src;
        console.log(sr);
    </script>
</body>

获取自定义属性

getAttribute()只有一个参数，将要查询的属性的名字。

<body>
    <img src="./images/1.jpg" alt="" index="index_1">

    <script>
        let img = document.querySelector('img');
        let sr = img.getAttribute('index');
        console.log(sr);
    </script>
</body>

使用这个函数也可以获得元素自带的属性。

修改属性

修改属性有两种方法：一种针对于元素自带的属性，一种针对于自定义的属性。

修改元素自带属性的值

element.属性=‘值’

<body>
    <img src="./images/1.jpg" alt="" index="index_1">

    <script>
        let img = document.querySelector('img');
        img.src = './images/2.jpg';
    </script>
</body>

修改自定义属性的值

setAttribute()

<body>
    <img src="./images/1.jpg" alt="" index="index_1">

    <script>
        let img = document.querySelector('img');
        img.src = './images/2.jpg';
        // 获取index属性
        let sr = img.getAttribute('index');
        console.log(sr);
        // 修改index的值
        sr = 'index_2';
        console.log(sr);
    </script>
</body>

移除属性

element.removeAttribute(属性)
直接将元素的某个属性移除。

<body>
    <img src="./images/1.jpg" alt="" index="index_1">

    <script>
        let img = document.querySelector('img');
        img.src = './images/2.jpg';
        let sr = img.getAttribute('index');
        console.log(sr);
        // 移除index属性
        img.removeAttribute('index');
        console.log(sr);
    </script>
</body>

元素节点

nodetype

node.nodetypenodetype的用法。
notype返回元素节点的返回值。
常用的3个返回值：
元素节点返回值为1；
属性节点返回值为2；
文本节点返回值为3；

获取节点

childNodes （不常用）

在一个节点树上，吃了点Nodes可以获得任何一个元素的所有子元素，他是一个包含了这个元素所有子元素的数组。

返回的数组包含父元素下所有节点。

children（常用）

获取所有元素的子元素节点。

firstChild（不常用）
获取元素的第一个子节点。

lastChild（不常用）
获取元素的最后一个子节点。

以下两个有兼容性问题：

firstElementChild
获取元素的第一子元素节点。

lastElementChild
获取元素的最后一个子节点。

以下两个是常用的做法，没有兼容性问题：

Childer[0]
获取元素的第一子元素节点。

Childer[element.length-1]
获取元素的最后一个子节点。

兄弟元素的获取

previousElementSibling
返回元素的上一个兄弟元素节点。

nextElementSibling
返回元素的下一个兄弟元素节点。

获取文本节点的内容

Element.innerHTML用来获取文本节点的内容。

<body>
    <img src="./images/1.jpg" alt="" index="index_1">
    <p>这是一个p标签</p>

    <script>
        let p = document.querySelector('p');
        console.log(p.innerHTML);
    </script>
</body>

修改文本节点内的内容

element.innerHTML = '修改的内容'

<body>
    <img src="./images/1.jpg" alt="" index="index_1">
    <p>这是一个p标签</p>

    <script>
        let p = document.querySelector('p');
        console.log(p.innerHTML);
        p.innerHTML = '这是修改后的p标签'；
    </script>
</body>

创建节点

创建元素节点

document.createElement('元素')

<body>
    <div></div>

    <script>
        // 创建一个p标签
        let p = document.createElement('p');
    </script>
</body>

将创建的节点插入某个文档的节点树中

element.appendChild()在元素的后边添加元素。

<body>
    <div></div>

    <script>
        let div = document.querySelector('div');
        // 创建一个p标签
        let p = document.createElement('p');
        // 将p标签插入div中
        div.appendChild(p);
    </script>
</body>

在这里插入图片描述
insertBedore在已有的元素前边添加一个元素。
parentElement.insertBefore(newElement,targetElement);
目标元素的父元素.insertBefore（想要插入的新元素，目标元素）；

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        // 在li2的前面插入一个新的元素
        let ul = document.querySelector('ul');
        let lis = document.querySelectorAll('li');
        let lite = document.createElement('li');
        lite.innerHTML = '我是插入的元素';
        ul.insertBefore(lite, lis[1]);
    </script>
</body>

在这里插入图片描述

事件

注册事件（绑定事件）

给元素添加事件，称为注册事件或（绑定事件）。
注册事件的方法分两种：

传统方式
方法监听注册方式

传统方式

利用on开头的事件，如：onclick onfocus
特点：注册事件的唯一性
同一个元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面的处理函数。

方法监听注册方式

W3C的标准方式；
addEventListener(type,listener[useCaputre])是一个方法；
有3个参数，type表示类型：如鼠标点击‘click’，鼠标经过‘mouseover’，不需要前面加‘on’；
listener表示事件处理函数，事件发生时，会调用该监听函数；
useCapture表示可选参数，是一个布尔值，用来确定事件流处于什么阶段，默认为false。

特点：用一个元素同一事件可以注册多个监听器（类似处理函数），按注册的顺序执行。

<body>
    <button>按钮</button>

    <script>
        let btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('你点击了按钮！');
        })
    </script>
</body>

删除事件（解绑事件）

传统方式

element.事件=null;

方法监听

<body>
    <button>按钮</button>

    <script>
        let btn = document.querySelector('button');
        btn.addEventListener('click', fu); // 这里调用函数不用加()
        function fu() {
            alert('你点击了按钮');
            // 弹出一次后删除事件
            btn.removeEventListener('click',fu);
        }
    </script>
</body>

事件流

事件流这点嗯，太多了，我就直接放笔记上去吧，字有点丑，请勿见怪。
在这里插入图片描述

事件对象

<body>
    <button>按钮</button>

    <script>
        let btn = document.querySelector('button');
        btn.onclick = function(e) { // e就是事件对象
            alert('wo dian ji le ta !');
        }
        btn.addEventListener('click', function(e) {
            alert('dian ji');
        }); 
        
    </script>
</body>

函数内参数e就是事件对象。
事件发生后，跟事件相关的一系列信息数据的集合，都会放在这个对象里，这个对象就是事件对象e，它有很多的属性和方法。

如：

谁绑定这个事件
若是鼠标事件，会得到鼠标相关的信息，如鼠标位置…
若是键盘事件，会得到键盘的相关信息，如按了那个键…

<body>
    <button>按钮</button>
    <script>
        let btn = document.querySelector('button');
        btn.onclick = function(e) { // e就是事件对象
            alert('wo dian ji le ta !');
            console.log(e);
        }
    </script>
</body>

鼠标点击触发，获得鼠标的各种信息：
在这里插入图片描述

e就是一个形参，不用传递参数，是系统为我们设定的事件对象。
当事件注册时，e对象就会被自动创建，并依次传递给事件监听器（事件处理函数）

常见事件对象的属性和方法

e.target和this的区别：

e.target返回触发事件的对象（元素）

this返回绑定事件的对象

** 区别：**

e.target：当你点击了那个对象，就返回你点击的那个对象；

this：当你点击了对象，会执行冒泡事件，返回绑定事件的对象（元素）；

<body>
    
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        lis = ul.children;
        ul.addEventListener('click', function(e) {
            console.log('我点击了li');
            console.log('e.target的返回');
            console.log(e.target);
            console.log('----------------');
            console.log('this的返回');
            console.log(this);
        })
    </sc

在这里插入图片描述

返回事件的类型

e.type返回对象（元素）做了什么操作；

鼠标事件对象

在这里插入图片描述

键盘事件

在这里插入图片描述

键盘事件可以通过keyCode获得用户按下键的ASCLL码值，以此来得到用户按下了那个键。
可以看下笔记，有详细的方法。

关于鼠标事件，我做了一个简单的小案例，图片随着鼠标的移动而移动，有兴趣的可以看看，那个案例等明天再发吧。今天真的太累了，到这里也就算是结束了吧。后边写的确实有点虎头蛇尾了，以后有机会的话，我把后边两个事件在详细的写一篇博客出来。然后是一天的经历：蓝桥杯比赛，上午9-下午1点，然后3点去图书馆，写了一个网页设计的作业，2个小时，然后就一直在整理笔记，写了这篇博客，这是我写博客以来第一次整理这么多，然后写一篇比较完整的博客。

s_meng_

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM总结

DOM我看视频看完了，然后就在这里做个总结吧。文章目录DOM是什么？伪数组获取元素通过id获得元素通过类名（class）获得元素通过标签获得属性通用型的获取元素的方法document.querySelector()获取所有的匹配元素获取特殊的元素（body、html）获取属性获取元素自带属性获取自定义属性修改属性修改元素自带属性的值修改自定义属性的值移除属性元素节点nodetype获取节点获取文本节点的内容修改文本节点内的内容创建节点创建元素节点将创建的节点插入某个文档的节点树中事件注册事件（绑定事件.
复制链接

扫一扫