DOM节点操作

最新推荐文章于 2024-09-21 21:02:07 发布

久醉呀

最新推荐文章于 2024-09-21 21:02:07 发布

阅读量324

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_35991442/article/details/126293013

版权

一、节点的创建与追加

1.创建节点创建节点: document.creatElement(“”)

2.追加节点: document.appendChild(“”)

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		// 创建节点
		var _ul = document.createElement('ul');
		// 追加节点
		document.body.appendChild(_ul);
		var _li = document.createElement('li');
		_li.innerText = '你好呀！'
		_ul.appendChild(_li);
		var _li2 = document.createElement('li');
		_li2.innerText = '你好嘛?我的朋友'
		_ul.insertBefore(_li2,_ul.firstElementChild);
	</script>
</html>

效果图

二、节点的删除与替换

1.删除节点:

tag.remove()

父元素.removeChild(tag)

2.替换节点:

父元素.replaChild(替换，被替换)

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<p>11</p>
			<p>22</p>
			<p>33</p>
		</div>
		<script>
			// 获取父元素
			var _box = document.querySelector('.box');
			// 获取第一个P元素
			var _firstP = _box.firstElementChild;
			// 删除获取的第一个P元素
			// _firstP.remove();
			_box.removeChild(_firstP);
			// 获取最后一个P元素
			var _listP = _box.lastElementChild;
			// 创建新的替换元素span
			var _span = document.createElement('span');
			_span.innerText = '哇哈哈';
			// 替换最后一个P元素
			_box.replaceChild(_span,_listP);
		</script>
	</body>
</html>

效果图

三、属性操作

元素.setAttribute(“属性名”,“属性值”) //添加

元素.getAttribute(“属性名”) //获取
元素.已有属性名=“”

nodeType:获取节点类型

元素结点返回1 、属性结点返回2 、文本结点返回3

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<img src="" alt="">
		</div>
		<script>
			// 获取父元素
			var _box = document.querySelector('.box');
			// 自定义属性
			_box.setAttribute("a","桃子");
			// 获取定义的属性
			console.log(_box.getAttribute('a')); //桃子
			// 获取img元素
			var _img = document.querySelector('img');
			// img默认属性，可以直接 img.src来添加
			_img.src='../../img/猫咪.jpeg';
			
			// 输出父元素box的节点名称
			console.log(_box.nodeName);  //DIV
			// 输出img的节点类型
			console.log(_img.nodeType); //1
			// 输出新加属性的节点类型
			console.log(_box.getAttributeNode('a').nodeType);  //2
		</script>
	</body>
</html>

效果：

四、select操作

获取所有option：_select.options

获取选中option下标：_select.selectedIndex

获取文本值:options[index].innerText

获取value值:_select.value

创建option对象:

var option= new Option(text,value,true,是否选中)

插入option:

_select.add(option,null)

_select.add(option,option2)

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="" id="">
			<option value="410000">河南省</option>
			<option value="430000">海南省</option>
		</select>
		<script>
			var _select = document.querySelector('select');
			_select.onchange=function(){
				//获取当前选中的option的value
				var val = _select.value;
				console.log(val);
				//获取当前选中的option的下标
				var Index = _select.selectedIndex;
				console.log(Index);
				//获取select下所有options
				var options = _select.options;
				//获取当前选中的option的文本值
				console.log(options[Index].innerText);
			}
			//创建节点
			var _option = document.createElement('option');
			_option.value = '420000';
			_option.innerText = '浙江省';
			//追加
			_select.appendChild(_option);
			
			//新方式new Option("text","value",true,"是否选中")
			var _option2 = new Option('山东省','490000',true,'true');
			//追加
			_select.add(_option2,null);
			// 插入
			_select.add(_option2,_select.firstElementChild);
		</script>
	</body>
</html>

效果展示

五、获取内嵌样式和滚动距离

获取内嵌样式

document.defaultView.getComputedStyle(_wrapper,null).width

获取window的滚动距离

window.pageXOffset,window.pageYOffset

获取元素的滚动距离:

wrapper.scrollLeft,_wrapper.scrollTop

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				height: 1600px;
			}

			.wrapper {
				width: 300px;
				height: 300px;
				border: 3px solid black;
				overflow: auto;
			}

			.box {
				width: 200px;
				height: 600px;
				background-color: red;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="wrapper" style="font-size:20px;">
			<div class="box">
				乌拉拉
			</div>
		</div>
		<script>
			var _wrapper = document.querySelector('.wrapper');
			// 只能读取行内样式
			console.log(_wrapper.style.fontSize);
			//读取内嵌式
			console.log(document.defaultView.getComputedStyle(_wrapper,null).width);
			
			// 滚动事件
			window.onscroll=function(){
				console.log(window.pageXOffset,window.pageYOffset);
			}
			
			// 获取元素的滚动距离
			_wrapper.onscroll=function(){
				console.log(_wrapper.scrollLeft,_wrapper.scrollTop);
			}
		</script>
	</body>
</html>