03JavaScript操作DOM对象

最新推荐文章于 2022-08-24 10:01:29 发布

朱尔斯Jules

最新推荐文章于 2022-08-24 10:01:29 发布

阅读量59

点赞数

分类专栏： JS+jQuery 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_70083523/article/details/126471984

版权

JS+jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript操作DOM对象

DOM：Document Object Model（文档对象模型）

DOM---->HTML-DOM

---->CSS-DOM

---->DOM-Core

在这里插入图片描述

访问节点

1. 使用getElement系列方法访问指定节点：

getElementById()、getElementsByName()、getElementsByTagName()

2. 根据层次关系访问节点：

节点属性：

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

element属性：

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

||两种写法，浏览器识别谁用谁

oNext = oParent.nextElementSibling || oParent.nextSibling   
oPre = oParent.previousElementSibling || oParent.previousSibling  
oFirst = oParent. firstElementChild  ||  oParent.firstChild   
oLast = oParent.lastElementChild || oParent.lastChild

节点信息

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

操作节点

操作节点的属性

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

创建和插入节点

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="conent">
			
		</div>
	</body>
</html>
<script>
	var a1 = document.createElement("a");   
	a1.innerText = "11233";   //给a标签添加文本
	//document.getElementById("conent").appendChild(a1);  //创建a标签在div里

	var con = document.getElementById("conent");
	con.parentNode.insertBefore(a1,con);   //添加a标签到div之前
</script>

删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

删除也可以用

xxx.innerHTML = "";

删除和替换那个节点的时候，记得先找父节点parentNode，在删除

var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);

var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

操作节点样式style

改变样式的属性：

style属性：HTML元素.style.样式属性＝"值"、

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

className属性：HTML元素.className=“样式名称”

function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
}

获取元素的样式

HTML元素.style.样式属性;

……

兼容ie

alert(document.getElementById("cartList").currentStyle.display);

HTML中元素属性

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

//标准浏览器：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
//Chrome：
document.body.scrollTop;
document.body.scrollLeft;
//
var sTop=document.documentElement.scrollTop||document.body.scrollTop

innerText 获得或改变内容

innerHTML 获得和改变文本

setAttribute(属性，值) 设置HTML属性值

getAttribute(属性) 获得HTML的属性值

className 获得或改变class属性值

style.css 设置CSS样式

ent.body.scrollTop


innerText						 获得或改变内容

innerHTML						 获得和改变文本

setAttribute(属性，值)	 		 设置HTML属性值

getAttribute(属性)				 获得HTML的属性值

className						 获得或改变class属性值

style.css						 设置CSS样式

value							 获得value值

返回顶部的js效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 80px;
				height: 20px;
				color:#fff;
				position: fixed;
				right: 0;
				bottom: 0;
				display:none;
				background: red;
			}
			span{
				position: fixed;
				top:0;
			}
		</style>
	</head>
	<body style="height: 2000px; background: green;">
		<span id="conent">0</span>
		<div id="top1" onclick="goTop()">返回顶部</div>
	</body>
</html>
<script>
var conent = document.getElementById("conent");
var top1 = document.getElementById("top1");
var infostop ;
	function goTop(){
		
		//document.documentElement.scrollTop = 0;	  //从底部直接返回顶部
		infostop = setInterval("upScroll()",200);  //计时函数让滚动变慢
	}
	
	
	function upScroll(){
		var sTop=document.documentElement.scrollTop||document.body.scrollTop;		
		sTop-=20;
		if(sTop<0){
			clearInterval(infostop);
		}
		document.documentElement.scrollTop = sTop;
	}

	window.onscroll = function(){    //匿名函数
		var sTop=document.documentElement.scrollTop||document.body.scrollTop;
		conent.innerText = sTop;
		
		if(sTop>300){
			top1.style.display="block";
		}else{
			top1.style.display="none";
		}
	}
</script>

表单验证（登录）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--onsubmit="return false" 阻止登录跳转-->
		<form action="xxx" onsubmit="return regUser()" method="get">
			用户名：<input type="text" id="username" onfocus="infofause(this)" />
			<span id="name_error"></span><br/>
			密码： <input type="password" id="pwd" onfocus="infofause(this)" />
			<span id="pwd_error"></span><br/><br/>
			<input type="submit" value="注册"/>
					
		</form>
	</body>
</html>
<script>
function infofause(th){
	//this.nextElementSibling.nodeName;  //span
	this.nextElementSibling.innerText = "";
}
	function regUser(){
		var username = document.getElementById("username").value;
		if(username==""){   //从页面上的东西都是字符串
			document.getElementById("name_error").style.color="red";
			document.getElementById("name_error").style.fontSize="12px";
			document.getElementById("name_error").innerText = "请输入正确的用户名"
			return false;			
		}
		var pwd = document.getElementById("pwd").value;
		if(pwd==""){  
			document.getElementById("pwd_error").style.color="red";
			document.getElementById("pwd_error").style.fontSize="12px";
			document.getElementById("pwd_error").innerText = "请输入正确的密码"
			return false;
			
		}
		
		return true;
	}
</script>