JavaScript之dom（1）

已于 2023-11-05 13:16:41 修改
阅读量33 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-10-28 14:52:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjialun2003/article/details/134091100
版权

dom简介

 什么是API？
         应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，
         用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
         例如console.log方法。就是JS的一个API。

        文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。
        翻译：对HTML内部的标签进行处理。

如何通过DOM获取元素节点

    <h3 id="c" name="b">我是h3标签</h3>
        <h3 class="a">我是h3标签</h3>
        <h3 class="a">我是h3标签</h3>
        
        <p name="b" class="a">我是p标签</p>
        
        <script>
            //通过DOM节点获取HTML元素的4种方法  每种方法都要掌握.非常相似.
            
            //方法1:通过标签名获取元素
            var a = document.getElementsByTagName("h3");
            //此时就已经获取到了页面上所有的h3标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            //至于怎么去处理,就是后续的任务.
            
            //方法2:通过class名获取元素
            var b = document.getElementsByClassName("a");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            
            //方法3:通过name获取元素
            var c = document.getElementsByName("b");
            //此时就已经获取到了页面上所有的class为a标签 注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.
            
            //方法4:通过id获取元素 因为id是唯一标识符 所以返回的是一个元素,可以直接处理
            var d = document.getElementById("c");
            
        </script>

如何操作节点

    <h3 id="c" name="b">我是h3标签</h3>


        <h3 class="a">我是h3标签1<a href="#">你好</a>  </h3>
        
        <input type="text" id="abc" value="739737680" />
        
        
        <script>
            /*
                    常见的操作节点的三个属性：
                    1.innerText表示给标签内部重新赋值或取值  这里是文本值
                    
                    2.innerHtml表示给标签内部重新赋值或取值  这里是html值
                    
                    
                    注意以上2个方法只能作用于 非表单元素  例如 h标签  a标签   p标签等等
                    
                    //第三个方法只能作用于表单元素
                    例如input  
                    
                    方法3：  value表示给标签内部重新赋值或取值  这里是html值        
                    
            */
            
            // var a = document.getElementsByTagName("h3");
            // for(var i = 0 ;i<a.length;i++){
            //     console.log(a[i].innerText);//表示获取各个h3标签内部的文本值
            //     a[i].innerHTML = "<a href='#'>你好</a>";
            // }
            
            
            // var b = document.getElementsByClassName("a");
            // for(var i = 0 ;i<b.length;i++){
            //     console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值
            // }
            
            var d = document.getElementById("abc");
            // d.value = "账号123";
            console.log(d.value);
            
        </script>
        

如何操作节点的样式

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            
            .abcd{
                color: red;
                background-color: blue;
                font-size: 40px;
            }
            
        </style>
        
    </head>
    <body>
        <p id="abc"  >你好，我是p标签</p>
        
        <script>
            var p = document.getElementById("abc");
            //如何改变一个节点的样式:  
            //步骤1.思考需要修改什么样式
            //步骤2.去css里面查看该样式的单词
            //步骤3.按照提示来
            //步骤4.通过    节点.style.xxx  表示取值或赋值
            
            
            //例如我要修改字体颜色
            // p.style.color = "red";
            // console.log(p.style.color)
            
            //例如我要修改背景色
            // p.style.backgroundColor = "green"
            
            
            
            //以上写法的缺点: 麻烦  每次只能修改一个样式
            
            //所以:  如果样式很多,我们可以先将其封装到一个css里面
            p.className = "abcd";//表示给该元素 赋予一个class为abcd的属性
            
        </script>
        
        
    </body>

js中的事件管理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
			}
		</style>
		
	</head>
	<body>
		<p id="a">你好</p>
		<p>你好</p>
		<p>你好</p>
		<p>你好</p>
		
		<hr>
		<img   src="img/1.PNG" />
		<hr>
		账号：<input type="text" id="aaa" />  <span id="bbb"></span> <!--提示用语 -->
		
		<script>
			//js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
			//例如用户的单击  双击   等等等等
			
			//需求:用户点击id为a的元素  弹出一个窗口
			//步骤1:获取元素   
			// 步骤2:  元素.事件名 = function(){代码体}
			//步骤3 常见的事件名:
			//单击事件 onclick
			
			
			// document.getElementById("a").onclick = function(){
			// 	alert(123);
			// }
			
			
			// //需求2:给所有的p标签加上点击事件  下面的写法是错误的 需要遍历
			// // document.getElementsByTagName("p");.onclick = function(){
			// // 	alert(123);
			// // }
			// var p = document.getElementsByTagName("p");
			// for(var i = 0 ;i<p.length;i++){
				
			// 	p[i].onclick = function(){
			// 		alert(456);
			// 	}
				
			// }
			
			
			//双击事件  
			// document.getElementById("a").ondblclick  = function(){
			// 	alert(123);
			// }
			
			
			//鼠标移入事件 悬浮事件
			//需求:鼠标放上图片   图片就放大2倍  鼠标移出就恢复原状
			
			//鼠标移入事件onmouseover
			// document.getElementsByTagName("img")[0].onmouseover = function(){
			// 	document.getElementsByTagName("img")[0].style.width = "400px";
			// 	document.getElementsByTagName("img")[0].style.height = "400px";
			// }

			
			
			// //鼠标移出事件onmouseout
			// document.getElementsByTagName("img")[0].onmouseout = function(){
			// 	document.getElementsByTagName("img")[0].style.width = "200px";
			// 	document.getElementsByTagName("img")[0].style.height = "200px";
			// }
			
			
			//输入账号,失去焦点就需要数据校验
			
			document.getElementById("aaa").onblur = function(){
				var str = document.getElementById("aaa").value;
				 if(str.length >10){
					 document.getElementById("bbb").innerText = "长度太长了";
					 document.getElementById("bbb").style.color = "red";
				 }else{
					 document.getElementById("bbb").innerText = "数据合格";
					 document.getElementById("bbb").style.color = "green";
				 }
			}
			
			
			
		</script>
		
	</body>
</html>

js的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<a id="a" href="1_dom简介.html">进入1页面</a>
		
		<button id="abc">按钮</button>
		
		
		<img id="b" src="img/1.PNG" />
		
		
		<h3></h3>
		<button id="btn">开始点名</button>
		
		
		
		<script>
			//js获取元素的属性：
			//元素的常见属性:  id   class   src  href
			
			//需求:点击按钮 让这个a标签的href改成跳转到第二个页面
			//需求 点击按钮,进入下一张图片
			document.getElementById("abc").onclick = function(){
				document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");
				document.getElementById('b').setAttribute("src","img/2.PNG");
			}
			
			
			
			//点击开始点名按钮 来回切换
			document.getElementById("btn").onclick = function(){
				if(document.getElementById("btn").innerText=="开始点名"){
					document.getElementById("btn").innerText = "停止点名"
				}else{
					document.getElementById("btn").innerText = "开始点名"
				}
			}	
			
			
			
			
			
		</script>
	</body>
</html>

来杯黑咖啡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript之DOM树
憧憬是碎了满地凉凉的宝石
07-03 1732
一、什么是DOM树？ DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 DOM树是结构，所谓层级结构是指元素和元素之间的关系：父子，兄弟。 文档：DOM中的"D" 如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生了。它把你编写的网页文档转换成为一个文档对象。 对象：DOM中的"O" 对象（object）是一种非常重要的数据类型。对象是自包含的数据集合，包含在对
JavaScript中 DOM 的概念解释
norang的博客
06-04 1858
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JavaScript之DOM
qq_43751200的博客
06-05 1752
DOM
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
Javascript之dom
weixin_51767056的博客
09-03 1051
文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。element . 属性例如：div . idelement . getAttribute('属性') //自己定义的
JavaScript之DOM更改元素
weixin_44827643的博客
06-21 2340
本文主要介绍在利用DOM获取页面的元素之后，如何更改元素的内容、属性以及样式。
Javascript之理解BOM和DOM
pakerder的博客
10-13 1013
一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript、DOM、BOM. ECMAScript: ES规定了JS的变成语法和基础核心知识，是所有浏览器厂商都遵守的JS语法工业标准。 DOM: 文档对象模型（Document Object Model），让我们通过DOM提供的接口来操作网页。DOM中，文档表示的就是整个HTML网页文档；对象表示将网页每个部分转换为一个对象；模型为使用模型表示对象间的关系，方便我们获取对象。通过dom，可以访问、
JavaScript之DOM对象
m0_51892736的博客
08-29 1307
JavaScript之DOM对象
JavaScript DOM操作
好好学习天天向上
03-27 5106
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript之DOM绑定和删除事件
weixin_44827643的博客
06-22 1993
本文主要介绍如何在获取页面元素之后为元素绑定相应的事件，从而完成一些操作。首先需要弄清事件的三要素，简单来说，要弄清给谁绑定事件，绑定什么事件，以及完成什么操作。下面介绍三种方式，后两种类似。第一：通过addEventListener()绑定事件，通过回调函数完成后续操作。通过此法可给同一元素绑定多次事件。通过其第三个参数的设置，可设置事件传播的方式，默认为false,为冒泡模式，true为捕获模式。同时，回调函数可直接书写函数名（注意：不要加括号），在script中定义该函数即可。利用removeEven
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript之DOM事件（源代码）
05-31
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 722
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1064
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 535
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1038
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
JavaScript.DOM高级程序设计指南
"[JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版，这是一本面向初学者和有一定基础的JavaScript开发者的教程，旨在帮助读者深入理解和掌握JavaScript及其DOM操作。书中涵盖JavaScript的基础知识、进阶对象概念，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值