DOM基础

最新推荐文章于 2024-09-22 11:17:00 发布
最新推荐文章于 2024-09-22 11:17:00 发布
阅读量158 收藏
点赞数
分类专栏： 笔记 文章标签： javascript css dom操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xieixnxia/article/details/117908452
版权

创建元素

创建简单元素（不带属性）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv=document.getElementById("content");
			var oStrong=document.createElement("strong");//创建元素节点
			var oTxt=document.createTextNode("HTML");//创建文本节点

			oStrong.appendChild(oTxt);//把文本节点插入到元素节点
			oDiv.appendChild(oStrong);//把组装好的元素插入已经存在的元素中
	}		
	</script>
</head>
<body>
	<div id="content"></div>

	
</body>
</html>

创建复杂元素（带属性）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oImg=document.createElement("img");
			//oImg.className="pic";
			oImg.src="img/baby1.jpg";
			oImg.style.border="1px solid silver";

			document.body.appendChild(oImg);

	}		
	</script>
</head>
<body>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{border-collapse:collapse;}
		tr,td{
			width: 80px;
			height: 20px;
			border: 1px solid gray;
		}
	</style>
	<script type="text/javascript">
		window.onload=function() {
			var oTable=document.createElement("table");
			for(var i=0;i<3;i++){
				var oTr=document.createElement("tr");
				for(var j=0;j<3;j++){
					var oTd=document.createElement("td");
					oTr.appendChild(oTd);
				}
				oTable.appendChild(oTr);
			}
			document.body.appendChild(oTable);
		}
	</script>
</head>
<body>
	
</body>
</html>

插入元素

appendChild()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oUl=document.getElementById("list");
				var oTxt=document.getElementById("txt");

				var textNode=document.createTextNode(oTxt.value);
				var oLi=document.createElement("li");

				oLi.appendChild(textNode);
				oUl.appendChild(oLi);
			}
		}
	</script>
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<input id="txt" type="text" />
	<input id="btn" type="button" value="插入"/>
	
</body>
</html>

insertBefore()

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oUl=document.getElementById("list");
				var oTxt=document.getElementById("txt");

				var textNode=document.createTextNode(oTxt.value);
				var oLi=document.createElement("li");

				oLi.appendChild(textNode);
				oUl.insertBefore(oLi, oUl.firstChild)

			}
		}
	</script>
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<input id="txt" type="text" />
	<input id="btn" type="button" value="插入"/>
	
</body>
</html>

删除元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oUl=document.getElementById("list");
				oUl.removeChild(oUl.lastChild);
			}
		}
	</script>
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<input id="btn" type="button" value="删除"/>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oUl=document.getElementById("list");
				document.body.removeChild(oUl);
			}
		}
	</script>
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<input id="btn" type="button" value="删除"/>
	
</body>
</html>

复制元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oUl=document.getElementById("list");
				document.body.appendChild(oUl.cloneNode(1));
			}
		}
	</script>
</head>
<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
	<input id="btn" type="button" value="复制"/>
	
</body>
</html>

替换元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			oBtn.onclick=function(){
				var oFirst=document.querySelector("body *:first-child");

				var oTag=document.getElementById("tag");
				var oTxt=document.getElementById("txt");

				var oNewTag=document.createElement(oTag.value);
				var oNewTxt=document.createTextNode(oTxt.value);


				oNewTag.appendChild(oNewTxt);
				document.body.replaceChild(oNewTag,oFirst);
			}

			
		}
	</script>
</head>
<body>
	<p>JavaScript</p>
	<hr>
	输入标签：<input type="text" id="tag"><br>
	输入内容：<input type="text" id="txt"><br>
	<input type="button" id="btn" value="替换">
</body>
</html>

 

xiexinxia
关注
专栏目录
DOM基础操作
LKAK117的博客
08-01 595
DOM:document objectmodel文档对象模型
深入理解DOM节点类型第二篇——文本节点Text
weixin_34217773的博客
08-28 318
前面的话 　　文本节点顾名思义指向文本的节点，网页上看到的文字内容都属于文本节点。该节点简单直观，本文将详细介绍该部分内容   特征 　　文本节点由Text类型表示，包含的是纯文本内容，但文本节点是对象类型 &lt;div id="box"&gt;内容&lt;/div&gt; &lt;script&gt; console.log(box.firstChild);//"内容...
js document.createTextNode()创建文本节点详解
热门推荐
田维常
09-23 3万+
在Javascript中，可以创建各种类型的节点。 下面列出常用的创建节点的方法： 方法 说明 createElement() 创建一个元素节点  createTextNode() 创建一个文本节点  createComment() 创建一个文本节点  createDocumentFragment() 创建文档碎片节点 以上四种方法都是 document 对象的方法。
DOM基础知识
Mozarty的博客
04-22 1308
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
JavaScript DOM基础
程序员柒的博客
07-18 2188
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
DOM 基础详解
m0_52861684的博客
09-26 3152
DOM 基础事件从零开始详细总结。
DOM 基础操作
程序员柒的博客
08-01 4331
本文是博主的一些笔记跟想法，如果觉得本文有点东西请个博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。官方语言文档一个页面就是一个文档，DOM中使用document表示。...
DOM 基础语法
既然选择远方，便只顾风雨兼程！
02-12 2661
文章目录DOM基础语法1、 简介1.1 DOM树2、 获取元素2.1 根据 id 获取2.2 根据标签名获取2.3 根据标签名获取2.4 根据 类名来获取2.5 通过指定选择器获取2.6 获取 body 和 html 元素3、 事件基础3.1 概述3.2 事件执行步骤3.3 常见的鼠标事件4、 操作元素4.1 改变元素内容4.2 改变元素属性4.3 表单元素属性操作4.4 样式属性操作4.4.1 行内样式4.4.2 类名样式4.5 排他思想4.6 表单全选与取消全选4.7 自定义属性操作4.7.1 获取属性
DOM基础测试--不凡
Harley567
09-22 6043
DOM基础测试 1.如何获取 DOM 对象 document.getElementById(‘id’); document.getElementByClassName(‘className’); document.getElementByTagName(‘标签名’); document.querySelector(‘css选择器’); //返回的是css选择器的第一个值 document.querySelectorAll(‘css选择器’); //返回的是所有被查找的元素 是一个类数组; 2.常用属性 st
JavaScript学习笔记之DOM基础操作实例小结
10-17
在给定的文件内容中，我们看到了对JavaScript基础操作的介绍，特别是在DOM操作方面的实例小结。 ### 一、子节点 在DOM中，每个节点可以有零个或多个子节点。子节点包括元素节点、文本节点等。通过`childNodes`属性...
DOM基础（ppt）.pdf
08-05
标题《DOM基础》和描述《JavaScript DOM基础》表明这是一份关于JavaScript文档对象模型（Document Object Model，简称DOM）的入门级教学内容。DOM是编程语言中一个用于HTML和XML文档的API，它提供了一种方式，使得...
JvavScript之dom基础（源代码）
05-31
JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源代码）JvavScript之dom基础（源...
html.rar_dom基础学习
09-21
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
DOM基础及DOM操作HTML
08-04
**DOM基础** DOM，全称为Document Object Model，中文译为文档对象模型，是W3C组织制定的一个标准，用于表示XML或HTML文档的一种结构化表示方式。DOM将整个文档视为一个由节点组成的树形结构，其中每个节点代表文档...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
最新发布
程序员阿龙的博客
09-22 3273
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 150
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 645
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
RedisTemplate混用带来的序列化问题
咖啡煮码
09-18 773
RedisTemplate 不要乱用哦，否则极易出现序列化问题
JavaScript操作DOM基础教程
在实际应用中，这些基础知识可以用来添加、修改或删除HTML元素，实现动态效果和交互功能。例如，`innerHTML`属性允许我们改变元素内部的HTML内容，如`oBody.innerHTML = "ddddddddd1";` 将`<body>`的内容替换为字符...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值