DOM相关知识

最新推荐文章于 2024-03-28 23:55:28 发布

PumuMindu

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量107

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46597384/article/details/118333012

版权

title: DOM
date: 2021-06-19 16:52:05
tags:

DOM

目标

能够说出什么是DOM

能够获取页面元素

能够给元素注册事件

能够操作DOM元素的属性

能够创建元素

能够操作DOM节点

1. DOM简介

1.1 什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口。

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

1.2 DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeXfA9NT-1624943302725)(DOM_md_files%5CD2483331411E1D592619315A325D5AE9.png?v=1&type=image)]

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

DOM把以上内容都看作是对象

2. 获取元素

2.1 如何获取页面元素

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

2.2 根据ID获取

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

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

2.3 根据标签名获取

使用geTElementsByTagName()方法可以返回带有指定标签名的对象集合。

<ul>
    <li>1231314123</li>
    <li>1231314123</li>
    <li>1231314123</li>
    <li>1231314123</li>
    <li>1231314123</li>
</ul>
<script>
    // 1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
		// 2. 依次打印里面的愿随对象可以采取遍历的方式
		for(var i = 0l i < lis.length; i++) {
				console.log(lis[i]);
		} 
		// 3. 如果页面中只有一个li 返回的还是伪数组的形式
		// 4. 如果页面中没有这个元素，返回的是空的伪数组
		// 5. element.getElementsByTagName('标签名');

</script>

因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历。得到的对象是动态的。

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

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

2.4 通过HTML5新增的方法获取

document.getElementsByClassName(‘类名’); // 根据类名获得某些元素集合
document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对象切记里面的选择器需要加符号 .box #nav
document.querySelectorAll(‘选择器’); //返回指定选择器的所有元素对象集合

2.5 获取特殊元素（body, html）

获取body元素

document.body //返回body元素对象

获取html元素

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

事件基础

3.1 事件概述

JavaScript是我们有能力创建动态页面，而时间是可以被JavaScript检测到的行为。

简单理解：触发—-响应机制。

页面中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点解某按钮时产生一个时间，然后去执行某些操作。

<button id = "btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件三要素：事件源   事件类型   事件处理程序
        // (1) 事件源  事件被触发的对象
        var btn = document.getElementById('btn');
        // (2) 事件类型  如何处罚  什么事件  如鼠标点击（onclick） 鼠标经过   键盘按下
        // (3) 事件处理程序  通过一个函数赋值的方式完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>

3.2 执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

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

3.3 常见的鼠标事件

常见的鼠标事件

4. 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意一下都是属性

4.1 改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

<button>显示当前系统事件</button>
    <div>某个时间</div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function(){
            div.innerText = getDate();
            
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var mouth = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
            var day = date.getDay();
            return '今天是：' + year + '年' + mouth + '月' + dates + '日' + arr[day];
        }
    </script>

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText和innerHTML的区别

innerText不识别html标签非标准

innerHTML识别html标签标准

4.2 常用元素的属性操作

innerText、innerHTML
src、href
id、ale、tltle

4.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

<button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件  处理程序
        btn.onclick = function() {
            // input.innerHTML = '点击了'; 这个是普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过value来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用，不再能点击disabled 我们想要这个按钮 button 禁用
            // btn.disabled = ture;
            this.disabled = ture;
            // this 指向的是事件函数的调用者 btn
        }
    </script>

4.4 样式属性操作

通过JS修改元素的大小、颜色、位置等样式。

element.style 行内样式操作

注意：

JS里面的样式采取驼峰命名法比如 fontSize、backgroundColor

JS修改style样式操作，产生的是行内样式，css权重比较高

<style>
        input {
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if(text.value === '手机') {
                text.value = '';
            }
            this.style.color = '#333';
        }
        text.onblur = function() {
            if(this.value === '') {
                this.value = '手机';
            }
            this.style.color = '#999';
        }
    </script>
</body>

element.className 类名样式操作

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .change{
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式，适合样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';

            //将元素的类名改为了change
            // 2. 通过修改元素的className更改元素的样式  适合于样式比较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以使用多类名选择器
            this.className = 'change';
            this.className = 'first change';
        }
    </script>

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

4. 5 操作元素总结

操作元素是DOM核心内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uRyOKz7l-1624943302727)(DOM_md_files%5CUntitled.png?v=1&type=image)]

4.6 排他思想

如果由一组元素，我们想要某个元素实现某种样式，需要用到循环的排他思想：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

<button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for(var i = 0; i < btns.length; i++){
            btns[i].onclick = function() {
                for(var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'pink';
            }
        }
    </script>

4.7 自定义属性的操作

获取属性值
- element.属性获取内置属性值（本身自带的属性）
- element.getAttribute(‘属性’); 主要获得自行一的属性（标准）程序员自定义的属性
自定义属性的操作
- element.属性设置内置属性值
- element.setAttribute(‘属性’); 主要设置自定义的属性（标准）
移除属性
- element.removeAttribute(‘属性’);

4.8 H5自定义属性

自定义属性的目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’)获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5新增了自定义属性：

设置H5自定义属性

比如

或者使用JS设置element.setAttribute(‘data-index’,2);
获取H5自定义属性

兼容性获取 element.getAttribute(‘data-index’);

H5新增element.dataset.index或者element.dataset[‘index’] ie 11才支持

//dataset是一个集合里面存放了所有以data开头的自定义属性

//如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法

data-list-name → element.dataset.listName

5. 节点操作

5.1 为什么学节点操作

获取元素通常使用两种方式：

利用DOM提供的方法获取元素

document.getElementById()
document.getElementByTagName()
document.querySelector等
逻辑性不强、繁琐

利用节点层级关系获取元素

利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差

5.2 节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），再DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

5.3 节点层次

利用DOM树可以把节点划分为不同地层次关系，常见的是父子兄层级关系

父级节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

<div class="box">
        <span class="erweima">x</span>
    </div>
    <script>
        var erweima = document.querySelector('.erweima');
        var box = erweima.parentNode;
    </script>

子节点
1. parentNode.childNodes(标准)
  
  parentNode.childNodes返回包含指定节点地子节点的结合，该集合为及时更新的集合。
  
  返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
2. parentNode.children(非标准)
  
  parentNode.children是一个只读属性，返回所有的字元素节点。它只返回子元素节点，其与节点不返回（重点掌握）。
  
  虽然children是非标准，但是得到了各个浏览器的支持。
3. parentNode.firstChild
  
  firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4. parentNode.lastChild
  
  lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
5. parentNode.firstElementChild
  
  firstElementChild返回第一个元素节点，找不到则返回null。
6. parentNode.lastElementChild
  
  lastElementChild返回最后一个元素节点，找不到则返回null。
  
  注意：这两个方法有兼容性问题，IE9以上才支持
  
  实际开发中，firstChild和lastChild包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
  
  解决方案：
  1. 如果想要第一个子元素节点，可以使用parentNode.children[0]
  2. 如果想要最后一个元素节点，可以使用parentNode.children(parentNode.children.length-1]
兄弟节点
1. node.nextSibling
  
  nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有节点。
2. node.previouSibling
  
  previousSibling返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有节点。
3. node.nextElementSibling
  
  nextElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。
4. node.previousElementSibling
  
  previousElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null。
  
  注意：这两个方法有兼容性问题，IE9以上才支持
  
  如何解决兼容性问题？
  
  解决方案：
  
  答：自己封装一个兼容性的函数
```
function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if(el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }
```

5.4 创建节点

document.createElement(‘tagName’);

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

<ul></ul>
    <script>
        // 1. 创建节点元素节点
        var li  = document.createElement('li');
        // 2. 添加节点 node.appendChild(childe)  node 父级    child 子级
        var ul = document.querySelector('ul');
        ul.appendChild(li); 
    </script>

5.5 添加节点

node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似css里面的after伪元素。
node.insertBefore(child,指定元素)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表前面。类似css里面的before伪元素。

5.6 删除节点

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。

组织链接跳转需要添加javascript:void(0);或者javascript:;

5.7 复制节点（克隆节点）

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。也成为克隆节点/拷贝节点

注意：

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为true，则是深拷贝，会复制节点本身以及里面的所有子节点。

案例：

<style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
        // for(var k in obj) {
        //     k 得到的是属性名
        //     obj[k] 得到是属性值
        // }
    </script>

5.8 三种动态创建元素区别

document.write()
element.innerHTML
doucument.createElement()

区别：

document.write是直接将内容写入页面的内容流，但是文档执行完毕，则它会导致页面全部重绘
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
createElement()创建多个元素效率低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率要比createElement高

6. DOM重点核心

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

6.1 创建

document.write
innerHTML
creatElement

6.2 增

appendChild
insertBefore

6.3 删

removeChild

6.4 改

主要修改dom的元素属性，dom元素的内容、属性，表单的值等

修改元素属性：src、href、title等
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disabled等
修改元素样式：style、className

6.5 查

主要获取查询dom的元素

DOM提供的API方法：getElementById、getElementsByTagName 古老用法不太推荐
H5提供的新方法：querySelector、querySelectorAll 提倡
利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

6.6 属性操作

主要针对自定义属性。

setAttribute：设置dom的属性值
getAttribute：得到dom的属性值
removeAttribute移除属性

6.7 事件操作

给元素注册事件，采取事件源.事件类型 = 事件处理程序

常见的鼠标事件

PumuMindu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM相关知识

title: DOMdate: 2021-06-19 16:52:05tags:DOM目标能够说出什么是DOM能够获取页面元素能够给元素注册事件能够操作DOM元素的属性能够创建元素能够操作DOM节点1. DOM简介1.1 什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。1.2 DOM.
复制链接

扫一扫