javascript/BOM/DOM增删改查方法/学习笔记

已于 2022-04-14 17:13:00 修改
阅读量297 收藏
点赞数
文章标签： css html css3 javascript
于 2022-04-08 13:19:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/No1banana/article/details/124038674
版权
本文介绍了JavaScript中的DOM概念，详细讲解了Node节点、DOM查询方法以及如何使用querySelector选择器。通过实例演示了如何进行DOM的增删查操作，帮助读者掌握对Web页面的动态操作技巧。
摘要由CSDN通过智能技术生成 
//欢迎加我VX进群交流
vx账号：-Sep07

一、Dom

dom的全称是Document Object Model，翻译为：文档对象模型。
在Js中我们通过Dom来对HTML文档进行操作，通过学习Dom便能随心所欲的操作Web页面
D：文档，一个html就是一个文档
O：对象，表示将网页中的每一个部分都转换成一个一个对象从而进行操作
M：模型，用来表示对象之间的关系，方便获取到对象

二、节点

1.Node（节点）

Node即为节点，是指构成网页的最基本的组成部分，网页中的每一个部分都可以被称作为一个节点，但是节点的具体类型则各不相同，网页中有如下几种常用的节点：

文档节点：Html
元素节点：每一个<>标签
属性节点：每一个元素的属性
文本节点：标签中所包含的文本内容

节点的属性：如元素节点中包含的value type等属性

2.dom查询：

浏览默认提供文档节点对象，该对象是window的属性，我们可以直接使用，通过文档节点能够获取到对象，如：

document.getElementById("btn");
//该方法便是通过文档节点来获取到ID为"btn"的对象。
document.getElementsByTagName("标签名");
//该方法可以通过标签名来获取到一组对象

//class属性值查询元素的方法
var box1 = document.getElementsByClassName("box1");
//该种查询方法只支持IE9以上的浏览器

案例演示：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		window.onload=function(){
			//获取body标签
			var body =document.getElementsByTagName("body")[0];//获取到的是一个类数组，需要添加[0]取出来
			/*
			可以用下列方法获取body标签，更为简便
				var body = document.body;
			*/
			console.log(body);
			//document.documentElement保存的是HTML的根标签
			//document.all 查询到页面中的所有的标签
			//class属性值查询元素的方法
			var box1 = document.getElementsByClassName("box1"){
				//只支持IE9以上的浏览器
			};	
		}
		</script>
	</head>
	
<body>

</body>
</html>

三、DOM的其它方法：

常用的dom方法有如下几种:
qppendChild( )
添加子节点到指定节点

remoreChild( )
删除子节点

replaceChild( )
替换子节点

createElement( )
创界元素节点

createTextNode( )
创建文本节点

四、querySelector选择器

1.案例演示

在进行增删查的演示之前先学会使用querySlelctor选择器
通过使用该选择器我们可以直接使用CSS选择器的方法来查找到一个元素，如：var box1 = document.querySelector("#id1 div");
案例演示：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		window.onload=function(){
			
			// querySelector();
			//可以根据css选择器来查询一个元素节点对象
			document.querySelector(".box1 div");
			//该方法只会返回一个元素，但如果符合条件的元素有多个则只会返回第一个
		
			var all = document.querySelectorAll("div");
			//该方法和quertSelector不同之处在于会将符合条件的"多个"元素封装到一个“数组”中返回。
			//遍历所有的div
			for(var i = 0; i<all.length; i++){
				console.log(all[i]);
			}
		};
		</script>
	</head>
	<body>
		<div class="box1">
			<div>
			</div>
		</div>
	</body>
</html>

四、dom的增删查演示：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
//首先绑定单击响应函数
		function myClick(idStr,fun){
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		};
		window.onload=function(){
		
//需求一、创建一个广州节点添加到city下面
			myClick("btn01",function(){
			//1.创建广州节点
			var li = document.createElement("li");
			//创建广州的文本节点
			var gzText = document.createTextNode("广州");
					//向父节点li中添加子节点gztext
					li.appendChild(gzText);
				
			//2.将节点添加到city下
			var city = document.getElementById("city");
			city.appendChild(li);
			});
			//1.创建广州节点
			var li = document.createElement("li");
			//创建广州的文本节点
			var gzText = document.createTextNode("广州");
				//向父节点li中添加子节点gztext
					li.appendChild(gzText);
					
					
					
//需求二、将广州节点插入到#bj前面
			myClick("btn02",function(){
			var li = document.createElement("li");
				//创建广州的文本节点
			var gzText = document.createTextNode("广州");
					//向父节点li中添加子节点gztext
					li.appendChild(gzText);
				
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				var city = document.getElementById("city");
				city.insertBefore(li,bj);
			});
			
			
//需求三、使用广州节点替换#bj节点
		myClick("btn03",function(){
			var li = document.createElement("li");
			//创建广州的文本节点
			var gzText = document.createTextNode("广州");
			//向父节点li中添加子节点gztext
			li.appendChild(gzText);		
			var bj = document.getElementById("bj");
			var city = document.getElementById("city");
			//父节点.replaceChild(新节点,旧节点)使用指定参数替换
			city.replaceChild(li,bj);
				
			});
			
			
//需求四、删除bj节点
		myClick("btn04",function(){
			var bj = document.querySelector("#bj");
			var city = document.querySelector("#city");
			city.removeChild(bj);
			})；

//需求五、修改bj内的HTML代码	
		myClick("btn06",function(){
			var bj = document.querySelector("#bj");
			bj.innerHTML = "昌平";
			});
			
			/*################
			此外还可以利用如下方法向city中添加广州
			但该方法虽然简单，但对city中代码的影响太大
			所以一般两种方法结合使用
			*/
			myClick("btn07",function(){
				var city = document.querySelector("#city");
				//city.innerHTML = ("<li>广州2</li>");
				//city.innerHTML += ("<li>广州2</li>");
				var li = document.createElement("li");
				li.innerHTML = "广州2";
				city.appendChild(li);
			});
			
			
		};
		</script>
</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢那个城市
				</p>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个广州节点添加到#city下</button></div>
			<div><button id="btn02">将广州节点插入到#bj前面</button></div>
			<div><button id="btn03">使用广州节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取city内的html代码</button></div>
			<div><button id="btn06">设置#bj内的html代码</button></div>
			<div><button id="btn07">方式二创建一个广州节点添加到#city下</button></div>
		</div>	
	</body>
</html>

//欢迎加我VX进群交流
vx账号：-Sep07
noahsark747
关注
JS数组的几种操作方法 ：增、删、改、查
killerPE的博客
05-26 2181
JS数组的几种操作方法 ：增、删、改、查 1. 增*************************** push unshift splice concat 1.1 push 在数组的末尾追加任意数量元素 let arrs= []; // 创建一个数组 let count = arrs.push("a", "b"); console.log(arrs) // ['a','b'] console.log(count ) // 2 1.2 unshift 在数组开头添加任意数量元素 let arrs
javascript学习笔记（三）BOM和DOM详解
01-19
我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。 1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是 ...
DOM的操作（增删改查）
weixin_30359021的博客
08-12 388
操作DOM的核心就是增删改查 目录 一、节点创建型API 1.1 createElement 1.2 createTextNode 1.3 cloneNode 1.4 createDocumentFragment 二、页面修改形API（包括删除和添加）（删）（改） 2.1 appendChild(追加为子元素) 2.2 insertBefore(插入...
DOM的增删改查操作
依旧00的专栏
04-01 7178
DOM:Document Object Model(文档对象模型)用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM最常用的操作就是增删改查。 下面通过几个小例子演示一下： css样式 div{ border:#00ccff 1px solid; width
DOM的增删改查
weixin_44860226的博客
08-02 1044
onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时触发函数。如需向HTMLDOM添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。HTMLDOM使JavaScript有能力对HTML事件做出反应。通过HTMLDOM，您能够访问HTML元素的样式对象。访问HTMLDOM-查找HTML元素。修改HTML=改变元素、属性、样式和事件。"已启用cookie""未启用cookie"...
js 增删改查方法
weixin_34126215的博客
12-02 113
push() 向数组的末尾添加一个或多个元素 pop() 删除数组内部并返回数组的最后一个元素 shift() 把数组内部的第一个元素从其中删除,并返回第一个元素的值 unshift() 向数组外部的开头添加一个或更多元素,并返回新的长度 splice() 从数组中添加/删除项目,然后返回被删除的项目 在用之前最好做一个判断 因为 前面的参数为负数的时候就会全部输出 你可以 这样做判断 ...
JavaScript高级与DOM/BOM/JQ/Vue笔记精华概览
在"第三阶段目录.docx"文档中，包含了丰富的JavaScript高级开发内容，主要涵盖了DOM、BOM、jQuery（JQ）和Vue框架的相关知识点。以下是详细的解读： 1. JavaScript高级技术 - JSCODE部分可能指代的是对JavaScript...
JavaScript BOM/DOM 笔记
qq_43645678的博客
08-23 391
JavaScript BOM/DOM 笔记
JavaScript学习笔记.zip_文章/文档_JavaScript_
08-10
JavaScript学习笔记JavaScript是一种基于对象和事件驱动的、具有安全性能的脚本语言；由ECMScript、DOM、BOM组成。script语句可以包含在文档中任何地方，只要保证代码在被使用前已读取并加载到内存即可。一般放在...
JavaScript入门笔记-Dom篇-增删改查
lemon_yu的博客
04-01 308
DOM DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。 JS通过DOM操作HTML文档，将网页所有部分转换为对象，利用模型表示对象关系 文章目录DOM节点模型Do...
JavaScript 实现HTML DOM增删改查操作的常见方法详解
10-15
主要介绍了JavaScript 实现HTML DOM增删改查操作,结合实例形式分析了JavaScript针对HTML DOM元素增删改查常见操作技巧与使用注意事项,需要的朋友可以参考下
DOM操作（增删改查）
weixin_51405694的博客
05-18 298
DOM操作（增删改查）
DOM增删改查
KennGum的博客
07-06 311
DOM 查询 节点的属性 获取元素节点 获取元素节点的子节点 获取父节点和兄弟节点 DOM查询的其他方法 DOM增删改 Window常用对象方法 节点的属性 nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 属性节点 属性名 2 属性值 文本节点 #text 3 文本内容 获取元素节点 通过document对象调用 getElementById() 通过 id 属性获取一个元
DOM实现增删改查
qq_65168354的博客
11-01 185
不知道大家发没发现，很多时候啊，我们不方便直接在body里面写标签以及样式那些，之后我们又会从后台获取数据，然后再放到界面上，哎呀，没学过DOM的小伙伴就头疼了，这可怎么办啊，好难写啊。不怕，我下面就写几个简单的DOM增删改查的操作，我们大家一起来认识认识。
DOM操作（增删改查）详解
qq_44709805的博客
11-26 3756
一、DOM操作 1.DOM概念 当网页被加载时，浏览器会创建页面的文档对象模型DOM DOM：Document Object Model 注:DOM说明 在DOM中，每个东西都是节点： 文档本身就是一个文档对象 所有html元素都是元素节点 所有html属性都是属性节点 插入到html元素文本是文本节点（包括空格，回车，换行等） 注释是注释节点 2. DOM操作 注：在DOM加载完之后再执行相关js操作 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML
javascript学习基础笔记之DOM对象操作
01-19
DOM（文档对象模型）是Web开发中的核心概念，它为HTML和XML文档提供了一种结构化的表示方式。这个API允许开发者通过编程的方式访问和修改页面的结构、...因此，深入学习DOM对象和操作是每个前端开发者必备的技能之一。
javascript DOM BOM 笔记
最新发布
喵喵的博客
07-09 1039
Web API API的概念 API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出(I/O) API的使用方法(console.log()) Web API的概念 浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) 此处的Web API特指浏览器提供的API(一
JavaScript中对象的增删改查
qq_35978855的博客
08-15 301
                                 对象及其增删改查 Object:对象 以后看到的，除了5种基本数据类型就是对象 JS中表示一个人的信息(name,gender,age) * ...
JavaScript DOM / BOM （查询获取元素对象【增、删、改、查】 ）以及常见鼠标事件
前端、python爱好者
06-01 479
1、获取元素 1.1、根据ID获取 document.getElementById(‘id’); 1.2、根据标签名获取1（使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。） element.getElementsByTagName(‘标签名’); 注意： 1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。 2. 得到元素对象是动态的 3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象) 1.3、根据标签名获取2 （获取某个元
浅析DOM节点与增删改查
算法与编程之美
12-28 794
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。1 什么是DOM 在进行DOM操作的增删改查之前，我们首...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值