面试必备之 DOM 操作初探

最新推荐文章于 2022-11-29 16:36:24 发布
最新推荐文章于 2022-11-29 16:36:24 发布
阅读量149 收藏
点赞数
分类专栏： JS dom 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43815680/article/details/106164812
版权
JS 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
dom
5 篇文章 0 订阅
订阅专栏

1、什么是DOM？ 想让js 操作html
文档对象模型 Document Object Model
2、作用
操作 html 和 xml 唯一的不同 xml 标签可以自定义
3、 如下代码 第一种方式引入

<body>
		<div></div>
    <script type="text/javascript">  
    	// DOM对象
    	var div = document.getElementsByTagName('div')[0];
    	div.style.width = '100px';
    	div.style.height = '100px';
    	div.style.backgroundColor = 'red';


    	div.onclick = function () {
    		this.style.backgroundColor = 'green';
    		this.style.width = '200px';
    		this.style.height = '100px';
    		this.style.borderRadius = '10%';
    	}
    	</script>

</body>

在这里插入图片描述

点击之后的效果
在这里插入图片描述
4、怎么实现 点击后变色 循环显示

<body>
		<div></div>
    <script type="text/javascript">  
    	// DOM对象
    	var div = document.getElementsByTagName('div')[0];
    	div.style.width = '100px';
    	div.style.height = '100px';
    	div.style.backgroundColor = 'red';

    	var count  = 0;
    	div.onclick = function () {
    	
    		count ++;
    		if(count % 2 == 1 ){
    			this.style.backgroundColor = 'red';
    		}else {
    			this.style.backgroundColor = 'green';}
    		}
    		

    	</script>

</body>

实现后的结果实现连续点击连续变红变绿 3个颜色 % 3
在这里插入图片描述
在这里插入图片描述
5、三个按钮的选项卡 怎么实现 ？？？
（本节时间27：39 ）
实现代码段：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		.content{
			display : none;
			width : 200px;
			height : 200px;
			border : 2px solid red;
		}
		.active{
			background-color: yellow;
		}


	</style>
	
</head>
<body>
		<div class = 'wrapper'>
			<button class="active">1</button>
			<button>2</button>
			<button>3</button>
			<div class="content" style = "display : block">吴小宝</div>
			<div class="content" >我</div>
			<div class="content">小小宝</div>

		</div>
    <script type="text/javascript">  
    		var btn = document.getElementsByTagName ('button');
    		var div = document.getElementsByClassName('content');
    		for(var i = 0; i < btn.length; i++){

    			(function (n) {
    				btn[n].onclick = function () {
    					for(var j = 0; j < btn.length; j++){
    						btn[j].className = "";
    						div[j].style.display = "none";    					
    				}

    				this.className = "active";
    				div[n].style.display = 'block';

    			}
    			}(i))
    		}
    		

    	</script>

</body>
</html>

  给这个代码添加一点解释

在这里插入图片描述
实现后的效果如下图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
6、小方块律动怎么实现？？？
代码段

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">


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

    	var div = document.createElement('div');

    	document.body.appendChild(div);

    	div.style.width = "100px";
    	div.style.height = "100px";
    	div.style.backgroundColor = "red";
    	div.style.position = "absolute";
    	div.style.left = "0";
    	div.style.top = "0";

    	setInterval(function () {
    		div.style.left = parseInt(div.style.left) + 2 + "px";
    		div.style.top = parseInt(div.style.top) + 2 + "px";



    	},100)
    	</script>

</body>
</html>

代码的解释
在这里插入图片描述
运动到某一个位置然后停止移动 怎么实现
在这里插入图片描述 需要注意 清楚定时器的代码为clearInterval(timer); 不能写成setInterval
在这里插入图片描述

7、小方块怎么通过键盘控制移动 ？
代码段

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">


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

    	var div = document.createElement('div');

    	document.body.appendChild(div);

    	div.style.width = "100px";
    	div.style.height = "100px";
    	div.style.backgroundColor = "red";
    	div.style.position = "absolute";
    	div.style.left = "0";
    	div.style.top = "0";

    	document.onkeydown = function (e) {
    			// console.log(e);
    			switch(e.which) {
    				case 38:
    						div.style.top = parseInt(div.style.top) - 5 + "px";
    						break;
    			 	case 40:
    			 			div.style.top = parseInt(div.style.top) + 5 + "px";
    			 			break;
    			 	case 37:
    			 			div.style.left = parseInt(div.style.left) - 5 + "px";
    			 			break;
    			 	case 39:
    			 			div.style.left = parseInt(div.style.left) + 5 + "px";
    			}
    	}
    	</script>

</body>
</html>

代码的解释
在这里插入图片描述
如何实现 按住就会加速运动呢 ?

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">


	</style>
	
</head>
<body>  
	 <button style = "width:70px;height:50px;background:linear-gradient(to left, #999, #000, #432, #fcc); position :fixed;right:0;top:50%;text-align: center;line-height:50px;color:#fff; font-size:25px;font-family:arial;">加速</button>
    
    <script type="text/javascript">  
    	var btn = document.getElementsByTagName('button')[0];

    	var div = document.createElement('div');
    	document.body.appendChild(div);

    	div.style.width = "100px";
    	div.style.height = "100px";
    	div.style.backgroundColor = "red";
    	div.style.position = "absolute";
    	div.style.left = "0";
    	div.style.top = "0";
    	var speed = 5;

    	btn.onclick = function () {
    		speed ++;
    	}

    	document.onkeydown = function (e) {
    			// console.log(e);
    			switch(e.which) {
    				case 38:
    						div.style.top = parseInt(div.style.top) - 5 + "px";
    						break;
    			 	case 40:
    			 			div.style.top = parseInt(div.style.top) + 5 + "px";
    			 			break;
    			 	case 37:
    			 			div.style.left = parseInt(div.style.left) - 5 + "px";
    			 			break;
    			 	case 39:
    			 			div.style.left = parseInt(div.style.left) + 5 + "px";
    			}
    	}
    	</script>

</body>
</html>

代码解释部分
在这里插入图片描述
在这里插入图片描述

小白追梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
前端面试（4）—— DOM事件的总结
乐夫天命兮的博客
08-04 359
知识点主要包括以下几个方面： - 基本概念：DOM事件的级别 面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ....”。 - DOM事件模型、DOM事件流 面试官如果问你“**DOM事件模型**”，你不一定知道怎么回事。其实说的就是**捕获和冒泡**。 **DOM事件流**，指的是事件传递的**三个阶段**。...
DOM面试题-DOM事件流、事件模型
weixin_47032028的博客
09-23 1153
面试题：你知道DOM事件有哪些级别吗？ 面试题：描述一下DOM事件模型和DOM事件流？ 面试题：描述一下DOM事件捕获的具体流程？ 面试题：Event对象有哪些常见应用？你知道什么是自定义事件吗？ 一、DOM事件级别 DOM一共分为4个级别：DOM0级，DOM1级，DOM2和DOM3级。 DOM事件一共分为3个级别：DOM0级事件处理，DOM2级事件处理，DOM3级事件处理。 由于DOM1级并没有规定事件相关内容，所以没有DOM1级事件。 1、DOM0级事件 el.onclick=f.
前端面试之Dom
mai0824的博客
03-21 518
DOM分类 DOM按其内容可分为5个部分 核心DOM：是用于XML与HTML的共用接口； XMLDOM：XML专用接口； HTML DOM：HTML专用接口； DOM事件模型：定义DOM能够响应的事件； CSS DOM：CSS专用接口 HTML节点树 HTML文档是一种树状的结构化文档、各标记之间是一种树状的层次关系 说明 结构树反映了各HTML元素之间的层次关系。包含和’,包含；又包含<h1>和<table>等<br/> DOM就通过这种树结构的层次关系，来定位、
前端面试题之DOM事件
simeng-han的博客
11-11 3403
本文主要介绍面试过程中关于DOM事件可能会问到的问题。以供参考。
DOM面试题
HelloGad的博客
01-04 598
1、 封装函数，返回元素e的第n层祖先元素节点 <script> function reParent(elem,n){ while(elem && n){ elem = elem.parentNode; n--; } return elem; } var i =document.getElementsByTagName('i...
jQuery使用手册之二 DOM操作
10-30
jQuery使用手册之二 DOM操作
JQueryDOM之样式操作
10-17
主要介绍了JQueryDOM之样式操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Jquery基础教程之DOM操作
10-23
大家都知道dom是一种与浏览器、平台、语言无关的接口，使用dom接口可以很轻松访问页面中所有的标准组件，本篇文章主要给大家讲解jquery基础教程之dom操作，有需要的朋友可以参考下
【面试题】DOM
zx1041561837的博客
11-29 733
本文整理了DOM节点操作、DOM结构操作、DOM性能优化的相关知识。
面试官：说说你对DOM的理解，常见的操作有哪些？
weixin_44475093的博客
03-09 2856
一、DOM文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容任何...
JS面试题--DOM操作相关
一只胖胖胖miao
08-29 1664
（1）在DOM中操作中怎么创建、添加、删除、移除、替换、插入和查找节点 ①通过以下代码创建节点 createDocumentFragment()//创建一个DOM片段 createElement();//创建一个具体的元素 createTextNode();//创建一个文本节点 ②添加、移除、替换、插入节点 appendChild(); removeChild(); replaceCh...
面试题 DOM 操作
WLIULIANBO的博客
03-21 365
题目 融合识别浏览器的类型 分析拆解 url 各个部分 知识点 navigator screen location history W3C标准没有规定任何js基础相关的东西（变量、原型、作用域、异步）；定义了用于浏览器中js操作页面的API和全局变量 1、DOM 1.1、DOM本质 DOM可理解为：浏览器把拿到的html代码，结构化一个浏览器能识别并且js可操作的一个模型 ######1.2、DOM节点操作 var div1 = document.getElementById('di
一个关于dom操作属性的面试题
zbwroom的博客
09-02 1303
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="cc" someAttr='itany'>cc</div> <table> <tr> <td id="td" co
DOM面试题【三】
weixin_38373875的博客
10-23 1266
1、DOM操作——怎样添加、移除、移动、复制、创建和查找节点? （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入、复制 appendChild() //添加 removeChild() //移除 r...
DOM操作重点核心(2) 面试题
weixin_45658984的博客
02-06 298
创建元素 我们了解过创建元素的三种方法,当然现在我们来深入了解一下 第一种方法 document.write() 这一个方法是直接将内容写入页面的内容流,但是文档流执行完毕,则它导致页面全部重绘通俗来说就是相当于重新打开一个文档,把原来的文档覆盖掉,然后再返回新创建的元素显示在文档中, element.innerHTML 这个方法是将内容写入某个DOM节点,不会导致页面重绘, 当你需要创建...
破解前端面试（80% 应聘者不及格系列）：从 DOM 说起
topofgods的博客
06-01 332
转自https://segmentfault.com/p/1210000009100825/read 共 7384 字，读完需 10 分钟。本文为《破解前端面试（80% 应聘者不及格系列）》文章的第二篇，包含 DOM、Event、浏览器端优化、数据结构和算法功底的考察。可能有同学会问 DOM 有什么好聊的，不就是节点的各种操作么？DOM 是网页构建的基石，熟练掌握各种操作、知晓可能的问题
DOM核心知识点 + 节点操作
绿色水杯
09-10 599
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。 创建 innerHTML createElement 增 appendChild insertBefore 删 removeChild 改 主要修改dom的元素属性，dom元素的内容、属性, 表单的值等 修改元素属性： src、href、title等 (分时显示不同图片,显示不同问候语) 修改普通元素内容： innerHTML 、innerText 修改表单元素： value、type、disabled等
DOM的五道面试题
guchiccc的博客
12-30 1313
1. 在一个 DOM 上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？ 该 DOM 上的事件如果被触发，会执行两次（执行次数等于绑定次数） 如果该 DOM 是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获 如果该 DOM 是处于事件流中的非目标元素，则先执行捕获，后执行冒泡 2.attribute 和 property 的区别是什么？ attribute 是 dom 元素在文档中作为 html 标签拥有的属性； proper...
dom操作 添加dom
最新发布
06-09
要添加DOM节点，可以使用JavaScript中的appendChild()方法或insertBefore()方法。例如，假设我们有一个空的div元素，我们想向其中添加一个p元素，可以使用以下代码： ```javascript var div = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值