DOM中节点的基本操作

最新推荐文章于 2024-08-24 11:46:12 发布

别喝我的旺仔牛奶

最新推荐文章于 2024-08-24 11:46:12 发布

阅读量68

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_63502124/article/details/127549959

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>我是div本身的标签的额</p>
		</div>
	</body>
	<script>
		//创建节点    
			//语法 ：document.createElement('标签名')；
			//作用 ： 创建一个指定标签元素
			//返回值 ： 一个创建好的元素节点
		//创造出来的不会直接在body里面显示还需要在重新  插入
		
		//插入节点
			//语法 1： 父节点.appendChild（子节点）
			//作用 ： 把 子节点 放在 父节点内部，并放在最后
			//语法 2 父节点.insertBefore（要插入的节点，哪一子节点前面）	
		//创建一个  span标签
		var span = document.createElement('span')
		//向 span 添加 一些文本内容
		span.innerText='我是创建出来的 span 标签'
		//输出
		console.log(span)
		//获取div 元素
		var divs=document.querySelector('div');
		//把创建好的span标签插入div内部
		divs.appendChild(span);
		
		//删除节点	
			//语法 1.: 父节点.removeChild(子节点)
			//语法 2 : 节点.remove()删除自己
			
		//替换节点
			//语法 ： 父节点.replaceChild(换上节点，换下节点)   在父节点内  把换上节点  换成   换下节点
			
		//克隆节点
			// 语法 : 节点.cloneNone(是否克隆后带节点(ture或者false))      
			
		//获取元素尺寸
			//语法 ： 
				// 元素.offsetHeight
				// 元素.offsetWidth
			//获取 ： 元素  内容 + padding +border 区域尺寸
			// 语法 :
				// 元素.clientHeight
				// 元素.clientWidth
			// 元素 : 元素 内容 + padding 区域尺寸
	</script>
</html>