DOM编程

最新推荐文章于 2024-07-30 10:27:19 发布
最新推荐文章于 2024-07-30 10:27:19 发布
阅读量84 收藏
点赞数
文章标签： javascript 后端 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33712987/article/details/85069723
版权

一、DOM简介


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

可以将每个HTML标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。



选择器：

  • document.getElementById('id')

  • document.getElementsByName('name')

  • document.getElementsByTagName('tagname')


实例演示一、修改单个标签中的文本内容。

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 通过标签ID获取到标签对象 -->
var name1 = document.getElementById('n1');
<!-- 修改标签文本内容为'tuchao' -->
name1.innerText = 'tuchao';
</script>


实例演示二、通过标签name修改多个标签的内容

<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
<!-- 通过标签name获取到标签对象 -->
var name2 = document.getElementsByName('n2');
<!-- 当获取到多个同name标签时，则通过序号来区别，name2[0]表示第一个，name2[1]则表示第二个 -->
name2[0].innerText = 'tuchao';
name2[1].innerText = 'tuchao';
</script>

页面效果：

wKioL1bEMIDT76I9AAAG4wS6txc583.png


实例演示三、通过标签tag修改多个标签的内容

<div id="n1">
<p>hello aaaaaa</p>
</div>
<hr/>
<div name="n2"> <p>heheheheeeeeee</p></div>
<hr/>
<div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
<!-- 通过标签tag获取到标签对象 -->
var name3 = document.getElementsByTagName('div');
<!-- 对该对象进行循环，逐一取出每个对象进行修改 -->
for (var item in name3){

    name3[item].innerText = 'elephant'
	}
</script>

页面效果：

wKioL1bEMqyi1N_jAAAEH6wzSMg981.png

常用函数：

  • 创建标签

       document.createElement('a')

  • 获取或者修改样式

        obj.className

  • 获取或设置属性

        setattribute(key,val)    getattribute(key)

  • 获取或修改样式中的属性

        obj.style.属性

  • 提交表单

        document.geElementById('form_id').submit()


实例演示四、在标签中加入内容

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 创建一个a标签 -->
var tag = document.createElement("a");
<!-- 给创建的标签赋予链接 -->
tag.href = '
 <!-- 给标签设置文本字符 -->
tag.innerText = '点希望';

var id1 = document.getElementById('n1');
<!-- 给id1对象添加标签 -->
id1.appendChild(tag);

</script>

页面效果：

wKiom1bEOjWxVENhAAAC5BDH8aE193.png


实例演示五、标签替换

<div id="n1">
<p>hello aaaaaa</p>
</div>

<script type="text/javascript">
<!-- 创建标签对象 -->
var tag = "<a href='http://www.baidu.com'>百度一下</a>"
var id1 = document.getElementById('n1');
<!-- 替换标签 -->
id1.innerHTML = tag;
</script>

页面效果会显示原id="n1"的div标签消失了，替换成了自定义的超链接标签。


实例演示六、修改标签的Class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>js_st1</title>
    <style type="text/css">
    	.hide {display: none;}
    	.n22 {color:red;}

    </style>

</head>
<body>
    <div class="n22" name="n2"> <p>heheheheeeeeee</p></div>
    <hr/>
    <div name="n2"> <p>bbabababbabab</p></div>

<script type="text/javascript">
var id2 = document.getElementsByName('n2');
<!-- 将原样式n22替换为hide样式 -->
id2[0].className = 'hide'
</script>      
</body>
</html>

此时第一个div在页面中将不会显示了


实例演示七、修改标签的name值

<div id="n3" name="dog"> </div>

<script type="text/javascript">
<!-- 通过id获取到标签对象 -->
var id3 = document.getElementById('n3');
<!-- 使用log打印原name值 -->
console.log(id3.getAttribute('name'));
<!-- 修改标签的name值为'cow' -->
id3.setAttribute('name','cow');
console.log(id3.getAttribute('name'));
</script>

页面效果：

wKioL1bERcHC_WC5AAAtAWRMTsw355.png


实例演示八、修改标签样式

<div style="width:500px; height:300px; border:solid black 1px" id="n3" name="dog"> </div>

<script type="text/javascript">
var id3 = document.getElementById('n3');
<!-- 获取该标签的宽度 -->
var w = id3.style.width;
console.log(w);
<!-- 修改样式 -->
id3.style.width = '200px'
</script>

页面效果：修改前

wKioL1bESOSRizCOAAAM3SpJY_o215.png

页面效果：修改后

wKioL1bESO-ijmHyAAAEdRqevg8430.png


常用事件：

wKiom1bEbrPChngOAAOLKOkh7Gc125.png


实例演示九、创建按钮点击事件

<form id="F1" action='https://www.baidu.com/s?' method="GET">
    <!-- 这里的wd是传给后端程序的value -->
    <input type='text' name='wd' />
  <!-- 定义点击事件，对应Foo()函数 -->  
	<input type='button' value='按钮提交' οnclick='Foo();' />

</form>

<script type="text/javascript">
<!-- 定义点击函数内容，提交'F1'对象表单 -->
function Foo (){

	document.getElementById('F1').submit()
}
</script>


常用方法：

  • 定义一个函数每隔一定的时间自动执行一次，括号中左边写执行的函数名逗号分割，右边写间隔的时长单位为毫秒。

        setInterval('Foo()',20)

  • 用于停止setInterval的循环执行，这个函数括号中接受的参数为setInterval函数返回的值。

        clearInterval(interval)

  • 定义一个函数间隔一定的时间自动执行，与setInterval函数不同的是这个方法只让函数执行一次。

        setTimeout('Go()',10000)

  • 用于取消setTimeout函数的执行，函数接受的参数是setTimeout函数返回的值。

        clearTimeout()


搜索框实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>搜索框实例</title>
    <style type="text/css">
    .gray{color: gray;
    	height: 30px;
    	width: 220px;
   }

   .black{
   	color: black;
   	height: 30px;
	width: 220px;
   }

    </style>
</head>
<body>
 
<input type='text' class='gray' id='tip' value='请输入关键词' οnfοcus='Enter();' οnblur='Leave();' />

 <script type="text/javascript">
 	function Enter(){
 		var id = document.getElementById('tip');
 		id.className = 'black'

 		if(id.value=='请输入关键词' || id.value.trim()==''){
 			id.value = ''
 		}
 	}

 	function Leave(){

 		var id = document.getElementById('tip');

 		if(id.value=='请输入关键词' || id.value.trim()==''){
 			
 			id.value='请输入关键词'
 			id.className='gray'

 		}else{
 			id.className='black'
 		}
 	}
 
 </script>
</body>
</html>


跑马灯实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>跑马灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</title>
    <style type="text/css">
    </style>

</head>
<body>
<script type="text/javascript">

    function Go(){

    <!-- 获取title文本内容 -->
	var content = document.title;
	<!-- 获取内容的第一个字符 -->
	var firstChar = content.charAt(0)
	<!-- 获取title的第二个至最后一个字符 -->
	var sub = content.substring(1,content.length)
	document.title = sub + firstChar;
}

setInterval('Go()',1000);
</script>
</body>
</html>


进度条实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" charset="UTF-8" content="text/html">
    <title>跑马灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</title>
    <style type="text/css">
    </style>

</head>
<body>
	<div style="width:1000px;background-color:gray">
		<div id='jindu' style="width:10%;background-color:red;height:20px;"></div>

	</div>

	<div>
		<input type='button' value='点击停止' οnclick='Stop();' />
	</div>

<script type="text/javascript">

pro = 10
function Foo(){
	var id = document.getElementById('jindu');
	pro = pro + 1;
	if(pro > 100){
		clearInterval(interval)
	}else{	
		id.style.width = pro+'%';
	}
}
interval = setInterval('Foo()',20)

<!-- 定义停止函数，用于停止进度条 -->
function Stop(){

	clearInterval(interval)
}


</script>
</body>
</html>
weixin_33712987
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript个人学习笔记 （五）
Roxannekkk的博客
11-08 206
DOM（将HTML文档表达为树的结构）：Document Object Model文档对象模型；将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言进行CRUD（增删改查）的动态操作。
DOM编程实例
GAStudio
07-28 1737
DOM编程步骤： 1、 定义数据封装的标签（定义界面，通过html将数据封装） 2、 定义一些静态的样式（通过css） 3、 确定事件源 4、 注册事件 5、 事件处理 注：在处理过程中需要明确被处理的区域 动态改变字体的大小、颜色、背景属性：
【DHTML+DOM+BOM】网页编程——掌握基本编程思想进阶
虚妄狼
08-21 393
DHTML+DOM+BOM，网页编程——掌握基本编程思想进阶，就不必担心大量的 API 代码不会用。
我过去的那些编程思想
ZZY1078689276的专栏
05-03 3943
我从开始工作,直至现在已经可以说有好几年了,所以说谈谈我过去的那些编程的思想,算是个人工作历程的一段总结吧. 在过去做过的项目中曾经发生过这样的事情,那就是项目中有茫茫多的js,一个页面,dom元素没有多少,但是与其相关的js到是有很多,可能是上百行亦或是上千行,可是不幸的是,写这些代码的人离职了,而项目又没有留下什么开发文档之类的技术手册,结果可想而知,就这是一个大大的坑,由于新接手的
JavaScript+DOM编程艺术（清晰中文版）.pdf
08-29
一本我喜欢的书
javascript Dom 编程艺术
08-11
本 书在简洁明快地讲述JavaScript和DOM的基本知识之后，通过几个实例演示了专业水准的网页开发技术，透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践，并全面探讨了HTML5以及jQuery等JavaScript库...
JSDOM编程艺术代码.7z
10-30
《JavaScript.DOM编程艺术》是JavaScript开发者必读的经典之作，它深入浅出地介绍了如何使用JavaScript操作DOM（Document Object Model）来构建动态、交互式的Web页面。第二版更是对第一版的内容进行了更新和完善，...
JavaScript DOM编程艺术源代码
10-06
【JavaScript DOM编程艺术】是一本深受开发者欢迎的书籍，它主要介绍了如何使用JavaScript语言来操作和改变网页的Document Object Model（DOM）。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式来访问和修改...
js DOM编程
11-09
以下是一些关于DOM编程的关键知识点： 1. **DOM树**：DOM将HTML或XML文档解析为一棵由节点构成的树，其中每个元素、属性、文本等都是一个独立的节点。根节点通常是`document`对象，其他所有节点都挂载在其下。 2. ...
JavaScript的DOM
rbx508780的博客
10-13 746
JavaScript的DOM ---DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。
DOM入门（一）
qq_54054566的博客
03-28 4912
DOM树是什么  将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 作用：文档树直观的体现了标签与标签之间的关系  document 对象  是 DOM 里提供的一个对象  所以它提供的属性和方法都是用来访问和操作网页内容的  例：document.write()  网页所有内容都在document里面 二、获取DOM对象 1.1 选择匹配的第一个元素 1.2 选择匹配的多个元素 ...
JavaScript面试题
weixin_30646505的博客
11-27 459
JS相关问题 数组去重 function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ temp.push(array[i]); } }...
DOM操作标签与jQuery框架
weixin_64178950的博客
04-29 2043
今日内容概要1 > DOM操作标签1.1 > 动态创建一个a 标签1.2 > 默认与自定义属性1.3 > getAttribute和removAttribute 方法1.4 > innerText与innerHTML2 > 获取值操作2.1 > 获取普通值数据2.2 > 获取文件数据3 > 属性操作3.1 > 类属性操作3.2 > 样式操作4 > 事件5 > 事件案例5.1 > 数据校验5.2 > 搜索框案例5.3
淡扯javascript编程思想
weixin_30241919的博客
05-10 325
一、面向对象-OOD 虽然js面向对象的编程思想已经老话常谈了，但了为了文章的完整性，我还是把它加了进来，尽量以不太一样的方式讲述(虽然也没什么卵不一样的)。 1、面向对象，首先得有类的概念，没有类造不出来对象，但是javascript中又没有类 只有函数的感念，把以大写字母命名的函数看成创建对象的构造函数,把函数名看成类，那么就可以new一个对象了 //1.1 无参的 fun...
Vue源码之$mount实现数据挂载（三）
yayayayaya_的博客
07-02 5091
在vue实例中，通过$mount()实现实例的挂载，下面来分析一下$mount()函数都实现了什么功能。在'src/platforms/web/entry-runtime-with-compiler',$mount函数在Vue的原型上被定义$mount函数的流程1. 首先，提取出el所对应的dom元素。其中的query函数的主要用途是使用原生的querySelector(查找第一个匹配的dom元素...
vue 数据绑定 dom 事件 生命周期钩子
qq_36994771的博客
05-21 818
binding.vue&lt;template&gt; &lt;div&gt; &lt;h3&gt;绑定单一数据&lt;/h3&gt; &lt;div&gt;{{msg}}&lt;/div&gt; &lt;div v-text="msg"&gt;&lt;/div&gt; &lt;h3&gt;绑定对象数据&lt;/h3&
【分享】前端程序员-技术网站推荐
最新发布
一位前行者的博客
07-30 562
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
JavaScript DOM编程艺术探索
"JavaScript DOM编程艺术，深入探讨JavaScript与DOM的关系，以及它们在网页交互中的重要性。" 在网页设计领域，JavaScript与DOM是不可或缺的技术工具，它们共同塑造了现代网页的交互性和动态性。JavaScript是一种由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值