正文

javascript(dom对象的操作)(代码片段)

三架马车  三架马车  2023-01-27  299

关键词：

Dom对象的操作

核心

核心

浏览器网页就是一个Dom树形结构

更新：更新Dom节点

遍历Dom节点：获得Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

要操作一个Dom节点,就必须要先获得这个Dom节点

doucument

代表当前的页面,HTML　DOM文档树

document.title \\\\网页获取title
documet.cookie \\\\获取客户端Cookie

获得Dom节点

	<body>
		 	<div id="div1">
			<h1 id="h"></h1>
			<p class="p1"></p>
			</div>
	</body>

		//通过标签
			document.getElementsByTagName('h1');
		//通过id
			document.getElementById('div1');
		//通过class
			document.getElementsByClassName('p1');
		//获取父节点
			h.parentElement
		//获取父节点下所有子节点
			div1.children[index];
		//获取当前节点下,第一个节点
			div1.firstElementChild;
		//获取当前节点下,最后一个节点
			div1.lastElementChild;
		//获取下一个节点
			h.nextElementSibling;

更新节点

			//更新文本的值
			div1.innerText='修改文本的值';	
			//更新超文本,可以解析html文本标签
			div1.innerHTML='<strong>添加超文本</storng>';
			//更新css
			div1.style.color='red';
			div1.style.fontSize='20px';//驼峰命名
			div1.style.padding='2em';

实战演练

获取id

没改之前

操作input

删除Dom节点

删除节点步骤：先获取父节点,再通过父节点删除自己

let self=document.getElementById('p1');//获取删除节点
let father=self.parentElement//获取父节点
father.removeChild(self);//通过父节点删除节点

注意：删除节点的时候，子节点数组是在不断地变化,所以不能通过数组静态连续删除,只能多次通过动态删除

插入节点

我们获得某个Dom节点,假设这个 Dom节点是空的,我们通过innerHtML就可以添加一个元素,但是这个Dom节点已经存在元素了,就会产生覆盖

	<body>
	
		<p id="p1">Java</p>
		<div id="div1">
		<p>JavaScript</p>
		<p>css</p>
		<p>C</p>
		</div>
	</body>

把已有的标签进行插入

let a=document.getElementById('div1');
let b=document.getElementById('p1');
a.appendChild(b);//追加

效果

创建一个新的标签,实现插入

			let a=document.createElement('p');//创建节点 p标签
			a.id='p2';
			a.innerText='hello,小沈';
			let list=document.getElementById('div1');//获取div1 id
			list.appendChild(a);//追加子节点
			//创建标签节点
			let a=document.createElement('script');
			a.setAttribute('type','text/javascript');

效果：

	//创建style标签节点
			let st=document.createElement('style');
			st.setAttribute('type','text/css');
			st.innerHTML='body background-color:pink;';
			let hd=document.getElementsByTagName('head')[0];//注意点,head在第0个元素。
			hd.appendChild(st);

效果

在子节点前插入(insertBefore)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<p id="p1">Java</p>
		<div id="div1">
		<p id="px">JavaScript</p>
		<p id='p2'>css</p>
		<p id="p3">C</p>
		</div>
		<script type="text/javascript">
		//拥有子节点的父节点
		let list=document.getElementById('div1');
		let self=document.getElementById('p2');
		let befoe=document.getElementById('p1');
		list.insertBefore(befoe,self);

		</script>
	</body>
</html>

效果

操作表单

、 //对于单选框，多选框固定的值， id.value只能取到当前的值
id.checked;//查看返回值结果,true选中,false 没选中
id.checked=true;//赋值

获取表单，MD5密码拦截

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js" ></script>
	<body>
	  <!-- 
	  表单绑定提交时事件
	  onsubmit=绑定一个提交检测的函数，true，false
	  将这个结果返回给表单,使用onsubmit接收
	  onsubmit="return a()"
	  -->
<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
	
<p>
	<span >用户名:</span> <input type="text" name="username" id="username"/>
</p>
<p>
	<span >密码:</span> <input type="password" id="input-password"/>
</p>
<input type="hidden" id="md5-password" name="passsword"/>

<button type="submit"> 提交</button>
</form>
<script type="text/javascript">
	function a()
		var uname=document.getElementById('username');
		var pwd=document.getElementById('input-password');
		var md5pwd=document.getElementById('md5-password');
		md5pwd.value=md5(pwd.value);
		//可以校验判断表单内容,true就是通过提交,false,阻止提交
		return true;
	
</script>
	</body>
</html>

javascript操作bom对象(代码片段)

...，从下面的一张图上看，DOM的根节点是document。经常编写JavaScript代码，也许你查看详情

10-dom操作(代码片段)

一、JavaScript的组成JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM：浏览器... 查看详情

javascript操作dom(代码片段)

DOM:DocumentObjectModel 文档对象模型 Dom分类：Domcore;HTML-DOM;Css-DOM; 根据层次访问节点： parentNode 返回节点的父节查看详情

10-关于dom的事件操作(代码片段)

对dom的认识(代码片段)

JavaScript之浅谈DOM操作1.理解DOM：　　DOM（Document Object Model，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。　　怎么说，我从两个角度理解：对于JavaScript，为了能够使JavaScript操作Html，JavaScript就... 查看详情

jquery(代码片段)

　　一、JQuery对象　　不管是JavaScript还是css，还是JQuery都是对标签进行操作，所以我们的总体步骤都是先找到标签，然后再对标签进行操作。对于JavaScript来说，用id找到只有一个，用class找到的不管你存在几个，得到永远是一个... 查看详情

javascript基础知识总结18：dom基本操作(代码片段)

目录一、JavaScript多选框全选、全不选、反选1、代码实例2、浏览器显示二、dom查询方法1、body标签2、html根标签3、all4、getElementsByClassName三、dom增删改1、代码实例2、浏览器显示四、修改CSS样式1、修改尺寸2、获取样式五、读取元... 查看详情

dom总结(代码片段)

jquery中的dom操作(代码片段)

什么是DOM？要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。在1998年，W3C发布了... 查看详情

javascript之------文档对象模型(dom)(代码片段)

DOM-----DocumentObjectModel文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台，提供了标准的HTML和XML对象集，并有一个标准的接口来访问并操作它们。”它使得程序员可以很... 查看详情

bom,dom(代码片段)

BOMBOM的介绍JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM：浏览器对象模... 查看详情

关于dom的事件操作/dom介绍/关于dom操作的相关案例(代码片段)

一.关于DOM的事件操作1.JavaScript基础分为三个部分:　　ECMAScript:JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句　　DOM:文档对象模型,操作网页上的元素的API,比如让盒子移动,变色, 轮播图等..　　BOM:浏览器对象... 查看详情

前端基础之bom和dom(代码片段)

前戏到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。JavaScript分为ECMA... 查看详情

javascript操作dom对象

...的缩写，即文档对象模型，是基于文档编程的一套API使用javaScript操作DOM对象通常分为三类：1.DOMCORE 2.HTML-DOM和CSS-DOM. 本段代码涉及到的知识点有1.如何锁定一个节点 2.返回查看详情

前端之dom操作(代码片段)

一、概念javascriptjavascript是一种脚本语言，可以被浏览器解析，所以它可以称之为前端的三把利器之一。javascript跟java没有半毛钱关系。声明局部变量：使用关键字var应用场景：当Selenium定位不到元素时，就要使用js代码来定位了... 查看详情

快速入门javascript二(代码片段)

3、JavaScriptDOM3.1、DOM介绍DOM(DocumentObjectModel)：文档对象模型。将HTML文档的各个组成部分，封装为对象。借助这些对象，可以对HTML文档进行增删改查的动态操作。3.2、Element元素的获取操作具体方法代码实现<!DOCTYPEhtml><htmllan... 查看详情

javascript判断对象是否为domelement(代码片段)

我们在写js代码时有时需要判断某个对象是不是DOM对象，然后再进行后续的操作，这里我给出一种兼容各大浏览器，同时又算是比较稳妥的一种方法。要判断一个对象是否DOM对象，首先想到的无非就是它是否具有DOM对象的各种属... 查看详情