认识DOM

最新推荐文章于 2024-09-13 08:33:26 发布
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量87 收藏
点赞数
分类专栏： 前端 javascript js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no_name_sky/article/details/118305808
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
js
9 篇文章 0 订阅
订阅专栏
javascript
3 篇文章 0 订阅
订阅专栏

什么是DOM

Document Object Model 文档对象模型，可以理解为代表网页文档的一颗树（模型）。document对象是树根，html，head，body都是树节点。在DOM中一切都是节点（或者元素），元素、节点表示的就是标签对象。

DOM用来干什么

  1. 找对象（元素节点）（获取DOM）
  2. 设置标签的属性值
  3. 设置标签的样式
  4. 设置标签的值
  5. 动态创建元素和删除元素
  6. 事件的触发响应：事件源、事件、事件的驱动程序

获取DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="box" class="box"></div>
<div id="box2" class="box"></div>

<script type="text/javascript">
	// 获取文档对象
	console.log(document);
	// 获取html
	console.dir(document.documentElement);
	// 获取body
	console.log(document.body);
	
	// 获取body中元素节点对象的三种方式
	// 通过 id 获取
	var oDiv = document.getElementById('box')
	console.log(oDiv)
	// 通过类名获取
	var oDivs = document.getElementsByClassName('box')
	console.log(oDivs)
	// 通过标签名获取
	var oDivs2 = document.getElementsByTagName('div')
	console.log(oDivs2)
	// 获取第二个div节点
	console.log(oDivs2[1])
	
</script>
</body>
</html>

事件

常用事件

鼠标事件
onclick：点击某个对象时触发
ondblclick：双击某个对象时触发
onmouseover：鼠标移入某个元素时触发
onmouseout：鼠标移出某个元素时触发
onmouseenter：鼠标进入某个元素时触发
onmouseleave：鼠标离开某个元素时触发
onmousedown：鼠标按下时触发
onmouseup：鼠标抬起时触发
onmousemove：鼠标被移动时触发
onwheel：鼠标滚轮滚动时触发
oncontextmenu：点击鼠标右键时触发

键盘事件
onkeydown：键盘的键按下时触发
onkeyup：键盘的键放开时触发
onkeypress：按下或按住键盘键时触发

框架/对象事件
onresize：浏览器窗口大小改变时触发
onabort：图形的加载被中断时触发
onload：元素加载完时触发
onerror：当加载文档或者图片时（没找到）发生的错误时触发
onscroll：文档滚动时触发
onpageshow：用户访问页面时触发
onunload：用户退出页面时触发

表单事件
onfocus：元素获得焦点时触发
onblur：元素失去焦点时触发
onchange：元素内容改变时触发
oninput：元素获取用户输入时触发
onsubmit：提交按钮时触发
onreset：重置按钮时触发
onselect：文本被选中时触发

拖动事件
ondrag：元素正在拖动时触发
ondragend：用户完成元素拖动时触发

多媒体事件
onplay：在视频/音频开始播放时触发
onended：在视频/音频播放结束时触发
onpause：在视频/音频暂停时触发

绑定事件

直接绑定匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:green;
        }
    </style>
</head>
<body>
<div id="box" class="box"></div>
<script>
    // onload 入口函数为window.onload()
    // window.onload特点：1.等待文档和图片资源加载完成之后，会触发onload事件 2.window.onload()有事件覆盖现象，后写的覆盖前面写的
    window.onload = function() {
        // 1.获取事件源
        var oDiv = document.getElementById('box');
        // 事件
        oDiv.onclick = function(){
            // 3.事件驱动
            alert(1);
        };
    };
</script>
</body>
</html>

效果：
在这里插入图片描述

节点样式属性操作

点击红色标签后，div标签颜色更改，此处更改的原因是，行内样式的优先级大于内接样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var oDiv = document.getElementByClass('box');
    oDiv.onclick = function() {
        // 获取的是行内样式的值，与内接和外接样式没有任何关系
        console.log(oDiv.style.backgroundColor)  // 行内样式没有设定background-color,所以获取不到。
        oDiv.style.backgroundColor = 'green';
        console.log(oDiv.style.backgroundColor)
    }
</script>
</body>
</html>

节点（标签）值的操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.box{
			width:100px;
			height:100px;
			background-color:red;
		}
	</style>
</head>
<body>
<button id="btn">设置文本</button>
<div id="box" class="box">
	wu
	<h2>hh</h2>
</div>
<input type="text" value="123" id="name">

<script type="text/javascript">
	window.onload = function(){
		/* 使用函数简化代码，解决冗余
		var oBtn = document.getElementById('btn');
		var oDiv = document.getElementById('box');
		var oInput = document.getElementById('name');
		*/
		function $(id){
			return document.getElementById(id);
		}
		
		// oBtn.onclick = function (){
		$('btn').onclick = function (){
			console.log($('box').innerText);  // 只获取文本

			
			console.log($('box').innerHTML); // 获取当前节点下的所有节点（文本、标签、换行）,既有文本又有标签
			// 修改div标签之间的文本内容的设定
			$('box').innerText = 'hello';
			
			/*单闭合标签修改文本值，即修改其value属性值*/
			console.log($('name').value)  // 有value属性的标签
			$('name').value = '456';
		}
	}
</script>
</body>
</html>

在这里插入图片描述

节点属性值的操作

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.box{
			background-image:url(./icon-slides.png);
			width:41px;
			height:69px;
			
		}
	</style>
</head>
<body>
<a href=""><img src="pre1.PNG" alt="上一张" id="pic"></a>
<script>
	window.onload = function(){
		oImg = document.getElementById('pic')
		oImg.onmouseover = function(){
			// console.log(oImg)
			// 好比是python中的self，谁调用的事件this就值得就是谁
			console.log(this) // this指oImg节点对象，因为是oImg绑定事件
			console.log(this.getAttribute('src'))  // 获取相对路径
			console.log(this.src)  // 获取的是绝对路径
			
			// 修改属性
			this.setAttribute('src', 'pre2.PNG')
			
			//修改属性的简便方式，建议使用。
			// this.src = 'pre2.PNG'
			//修改class的值时特殊
			// this.className = 'c1 '
		}
		oImg.onmouseout = function(){
			this.setAttribute('src', 'pre1.PNG')
		}
	}
</script>
</body>
</html>

效果：
在这里插入图片描述

DOM节点操作

新节点的父子插入、兄弟插入。创建新节点，删除新节点，查找节点的父节点，查找节点的儿子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<button id="create">创建</button>
<button id="destroy">移除</button>
<div id="box" class="box">
    <p id="hh">哈哈哈</p>
</div>
<script>
    window.onload = function(){
        function $(id){
            return document.getElementById(id);
        }

        var oP = null;
        // 创建-->销毁，页面性能会有损耗。如果页面中出现频繁的切换，不要使用这种方式。建议通过控制类的样式属性（隐藏/显示）来进行切换。

        $('create').onclick = function(){
            // 创建p节点元素
            oP = document.createElement('p');
            // 设置文本内容
            oP.innerText = 'hello';

            //追加元素， 父元素.appendChild(子元素)
            $('box').appendChild(oP);

            // 兄弟之间插入新节点。父元素.insertBefore(新的子节点，作为参考的节点)
            // $('box').insertBefore(oP, $('hh'))
            
            /*
                获取父节点：节点对象.parentNode
                获取子节点(亲儿子)集合：节点对象.children()
            */
        }

        $('destroy').onclick = function(){
            //父元素.removeChild(子节点)
            $('box').removeChild(oP)
        }
    }

</script>
</body>
</html>
no_name_sky
关注
专栏目录
dom的基础认识
qq_53162045的博客
01-23 418
文章目录什么是DOM一、DOM框架体系DOM在html中的节点二、如何获取元素节点1.页面中所有的元素节点2.利用document对象获取节点 什么是DOM DOM：Document Object Model，文档对象模型。 1、D，表示文档，通常是指HTML文档和XML文档。 整个DOM体系分为两种：HTML DOM、XML DOM。 2、O，表示对象，是指D中所包含的对象，即HTML文档中的对象。 HTML文档中的对象统称为“节点”（Node）。 3、M，表示模型，对D中的O进行操作的整套结构体系..
关于DOM
thwr1881的博客
06-11 210
关于DOM
HTML DOM(一)：认识DOM
web开发
07-18 391
什么是DOM？ 通过 JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在 1998 年，W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HT...
DOM的初步认识
m0_55673399的博客
08-23 146
hello world我是节点
Web前端开发技术-认识DOM对象.pptx
07-07
【Web前端开发技术-认识DOM对象】 在Web前端开发中，DOM（Document Object Model）对象是至关重要的概念，它是一个标准的编程接口，允许开发者通过JavaScript等脚本语言操作HTML和XML文档。DOM将HTML或XML文档解析...
DOM初体验，认识DOM
12-19
DOM可以视为一种API的应用 将文件视为一个文件对象，通过程序语言调用DOM对象，来对该文件的某些特定数据做访问操作，并且利用程序将获取的对象数据做更进一步的应用。 HTML DOM 定义了访问和操作HTML文档的标准...
重新认识 dom 中的 appendChild
I_m_Groot的博客
04-28 379
重新认识 dom 中的 appendChild 在进行一些 dom 操作的时候发现一些问题，比如给某个元素添加一个新父元素，需要调用 appendChild 接口，结果出错，看下面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na...
认识DOM 反选特效 确认框 改变 HTML 样式 显示和隐藏（display属性）
精灵码农
06-04 636
认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HTML文档可以说由节点构成的集合，三种常见的DOM节点: 1. 元素节点：上图中<html>、<body>、&l...
认识Dom 、获取元素方式
m0_61700036的博客
11-21 677
一、Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。 1.Web API 与API的关系 API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调..
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2792
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 832
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 413
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 858
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1274
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 346
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
JS的输出语句
最新发布
J3259392566的博客
09-13 184
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 502
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
"深入认识DOM对象及Web API的前端开发技术
Web前端开发技术-认识DOM对象.pptx是一份关于DOM对象的学习材料，通过这份资料，我们可以学习到DOM对象的应用，以及掌握获取元素的方式、操作元素的方式、元素的属性和DOM节点操作、事件的绑定和事件对象的使用、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值