JavaScript|小白学DOM(附各种小案例)

本博文源于js基础,小白学DOM,各种小案例辅助记忆。比如测试nodeType值,获得子标签节点,获得兄弟节点,实现无序列表的拷贝,创建删除修改添加节点都含有不错的小例子,辅助记忆没啥大问题,如果大家收藏也要观看哟!

nodeType

DOM中不仅将HTML标签看做“节点”,也将标签对中的文本、标签的属性、HTML注释视为节点。

引例—测试nodeType值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "box">你好<!---我是一个注释-----></div>
	</body>
	<script type="text/javascript">
		var oBox = document.getElementById("box");
		//查看盒子的nodeType属性
		console.log(oBox.nodeType);
		//查看盒子的第一个子节点
		console.log(oBox.firstChild.nodeType);
		//查看盒子的最后一个节点
		console.log(oBox.lastChild.nodeType);
		//查看id本身的节点
		console.log(oBox.getAttributeNode("id").nodeType);
	</script>
</html>

代码运行后的测试效果:
在这里插入图片描述

常用的nodeType属性值和意义

nodeType属性值 意义
1 元素节点(标签节点)
2 属性节点
3 文本节点
8 注释节点
9 document节点

刚才的引例中程序使用了oBox.firstChild属性得到了oBox的第1个子节点,这个节点就是“你好”,它是文本节点,即3;类似的,使用oBox.lastChild属性得到oBox的最后一个子节点,这个节点是注释节点,即8.
    很多时候,文本节点和注释节点确实不能像标签节点那样通过getElementById()等方法方便地获得,文本节点、注释节点只能靠firstChild、lastChild等属性“间接”得到。
    想要得到某一个HTML元素的属性节点,需要使用getAttributeNode()方法,例如引例中

console.log(oBox.getAttributeNode("id").nodeType);

节点属性

<body>
	<div id="box" data-i = "6"></div>
	<script type="text/javascript">
		var oBox = document.getElementById("box");
		//alert(oBox.dataI);
		alert(oBox.getAttribute("data-i"));
		oBox.setAttribute("data-i",8);
		alert(oBox.getAttribute("data-i"));
	</script>
</body>

需要使用getAttribute()方法访问标签的自定义属性

oBox.getAttribute("data-i");

使用setAttribute()方法设置标签的自定义属性

oBox.setAttribute("data-i",8);

需要注意的是getAttribute()和getAttributeNode()不是同一个方法,前者得到属性的值,后者得到属性节点.

节点关系

DOM提供了一系列属性表示节点之间的关系

属性 意义 类型
childNodes 子节点 数组
firstNode 第一个子节点 对象
lastNode 最后一个子节点 对象
parentNode 父节点 对象
nextSibling 后一个兄弟节点 对象
previousSibling 前一个兄弟节点 对象

子结点

childNodes属性

在上面的表格中大家会发现,chilNodes是个数组,那我们写一个html结构来遍历childNode属性

<body>
	<div id="box">
		文本
		<p></p>
		<p></p>
		文本
		<p></p>
	</div>
	<script type="text/javascript">
		var oBox = document.getElementById("box");
		console.log("Node数组长度为: " + oBox.childNodes.length);
		for(var i =0;i<oBox.childNodes.length;i++) {
			console.log(oBox.childNodes[i].nodeType);
		}
	</script>
</body>

在这里插入图片描述
回想之前的1是元素节点,3是文本节点,html中有三个p也就是三个元素节点,2个文本也就是2个文本节点,现在却有4个文本节点。因为同一级别元素节点和文本节点之间,一定隐藏着一个空文本节点。正因为这样,就会有7个节点。

例子:得到子标签节点

要想过滤掉文本节点和注释节点,必须自己手写代码,无现成的方法。

算法思路

准备一个空结果数组,遍历oBox的所有子节点,判断这个节点的nodeType值是否为1,如果是,则放入结果数组中。遍历结束之后,将结果数组返回,返回的数组都是元素节点了。

测试效果

在这里插入图片描述

代码如下
<body>
	<div id="box">
		文本
		<p></p>
		<p></p>
		文本
		<p></p>
	</div>
	<script type="text/javascript">
		function getElementChild(elem) {
			var nodes = [];
			for(var i=0;i<elem.childNodes.length; i++) {
				if(elem.childNodes[i].nodeType == 1) {
					nodes.push(elem.childNodes[i]);
				}
			}
			return nodes;
		}
		var oBox = document.getElementById("box");
		console.log("Node数组长度为: " + getElementChild(oBox).length);

	</script>
</body>

第1个子节点和最后一个子节点

第1个子节点和最后一个子节点可以分别用firstChild属性和lastChild属性获得,当然也可以使用childNodes属性结合适当的下标枚举出这两项。它们的关系是:

  • oBox.firstChild 等价于oBox.childNodes[0].
  • oBox.lastChild等价于oBox.childNodes[oBox.childNodes.length-1]

firstChild和lastChild也会把空文本节点、注释节点当做节点.

父节点

元素节点的parentNode属性将返回它的父节点。父节点一定是nodeType等于1的元素节点。

例子:点击复选框变色,再次点击恢复原色

算法思路

给每个复选框套上监听,如果被单击就变色,如果没被单击就恢复原色

测试效果

在这里插入图片描述

附上代码
<body>
	<div>
		<p><input type="checkbox"/>足球</p>
		<p><input type="checkbox"/>篮球</p>
		<p><input type="checkbox"/>排球</p>
		<p><input type="checkbox"/>羽毛球</p>
		<script type="text/javascript">
			var oCheckBoxs = document.getElementsByTagName("input");
			for(var i = 0;i<oCheckBoxs.length;i++)
			{
				oCheckBoxs[i].onclick = function() {
					if(this.checked) {
						this.parentNode.style.background = "gold";
						
					}else {
						this.parentNode.style.background = "white";
					}
				}
			}
		</script>
	</div>
</body>

兄弟节点

DOM提供了访问某节点的兄弟节点的两个属性nextSibling,previousSibling,分别表示节点的前一个兄弟和后一个兄弟。文本节点(含空文本节点)也会被算作是nextSibling或previousSibling
为了加深空节点也可能会被当作兄弟节点,来个小例子

<body>
	<div>
		<p></p>
		<p></p>
		<p id="para"></p>
		<p></p>
	</div>
	<script type="text/javascript">
		var oPara = document.getElementById("para");
		//得到para的前一个兄弟
		var pSbling = oPara.previousSibling;
		console.log(pSbling.nodeType);
	</script>
</body>

例子中,js获得id对象,取出前兄弟节点,结果发现,是个3,3查表知是个文本节点,可惜没有文本,说明它把空节点当作空节点。
在这里插入图片描述

例子:过滤前兄弟元素节点

编写函数来得到elem元素的真正前一个元素兄弟节点

实现原理

前一个兄弟节点是等于1的节点,因此犹如数据结构指针探测一般,不断遍历,一旦遇到1就退出,遍历结束还没发现1那就返回null

测试效果

在这里插入图片描述

附上代码
<body>
	<div>
		<p></p>
		<p></p>
		<p id="para"></p>
		<p></p>
	</div>
	<script type="text/javascript">
		var oPara = document.getElementById("para");
		function getRealPrev(elem) {
			var o = elem;
			while(o = o.previousSibling) {
				if(o.nodeType == 1) {
					return o;
				}
			}
			return null;
		}
		console.log(getRealPrev(oPara).nodeType);
	</script>
</body>

过滤后兄弟元素节点

将上面的函数名改为getRealPrev和调用的函数改为nextSibling即可,h5代码跟过滤前节点相同,js代码如下

<script type="text/javascript">
	var oPara = document.getElementById("para");
	function getRealNext(elem) {
		var o = elem;
		while(o = o.nextSibling) {
			if(o.nodeType == 1) {
				return o;
			}
		}
		return null;
	}
	console.log(getRealPrev(oPara).nodeType);
</script>

过滤前面所有兄弟节点

用一个数组装nodeType是1的节点,其余跟上面代码类似,h5代码相同,js代码如下:

<script type="text/javascript">
	var oPara = document.getElementById("para");
	function getRealPrevAll(elem) {
		var o = elem;
		var result = [];
		while(o = o.previousSibling) {
			if(o.nodeType == 1) {
				result.unshift(o);
			}
		
		}
		return result;
	}
	console.log(getRealPrevAll(oPara).length);
</script>

在这里插入图片描述

节点操作

创建节点

在网页上创建一个新节点需要使用document.createElement()方法,语法如下:

var o = document.createElement("标签名");

需要注意的是,创建出来的节点并不在文档DOM树上,它被称作“孤儿节点”。需要继续使用appendChild()方法把孤儿节点添加到DOM树上,语法为:

父节点.appendChild(孤儿节点);

例子:用户输入内容,点击按钮li做显示

算法思路

给按钮装一个单击事件,按下按钮js执行三件事情

  • 创建li标签
  • 将标签内容做出txt赋值
  • ul添加孩子节点
测试效果

在这里插入图片描述

附上代码
<body>
	<input type="text" id="txt"/>
	<input type = "button" value = "按我添加列表项" id="btn"/>
	<ul id = "list"></ul>
	<script type="text/javascript">
		var oUI = document.getElementById("list");
		var oBtn = document.getElementById("btn");
		var oTxt = document.getElementById("txt");
		oBtn.onclick = function() {
			var oLi = document.createElement("li");
			oLi.innerHTML = oTxt.value;	
			oUI.appendChild(oLi);
		}
	</script>
</body>

例子:在首位置做插入

解题思路

利用insertBefore()方法可以让节点自由的被插入到任意一个位置,语法为:

父节点.insertBefore(孤儿节点,现有某元素)
测试效果

在这里插入图片描述

附上代码
<body>
	<input type="text" id="txt"/>
	<input type = "button" value = "按我添加列表项" id="btn"/>
	<ul id = "list"></ul>
	<script type="text/javascript">
		var oUI = document.getElementById("list");
		var oBtn = document.getElementById("btn");
		var oTxt = document.getElementById("txt");
		oBtn.onclick = function() {
			var oLi = document.createElement("li");
			oLi.innerHTML = oTxt.value;	
			oUI.insertBefore(oLi,oUI.childNodes[0]);
		}
	</script>
</body>

删除节点

删除现有节点的函数格式是:

父节点.removeChild(子节点);

例子:点击按钮,删除li

测试效果

在这里插入图片描述
在这里插入图片描述

附上代码
<body>
	<ul id ="list">
		<li>北京<button>删除</button></li>
		<li>上海<button>删除</button></li>
		<li>杭州<button>删除</button></li>
	</ul>
	<script type="text/javascript">
		var oUI = document.getElementById("list");
		var oButtons = oUI.getElementsByTagName("button");
		
		for(var i=0;i<oButtons.length;i++) {
			oButtons[i].onclick = function() {
				oUI.removeChild(this.parentNode);
			}
		}
	</script>
</body>

移动节点

appendChild()方法也可以用来移动节点。当一个现有节点被重新追加到另一个父节点中时,此时这个节点将被移动位置。

例子:改变p的从属位置

测试效果

在这里插入图片描述
红箭头表示非常成功,可以一试!

附上代码
<body>
	<div id="box1">
		我是box1的内容
		<p id="para">我是p的内容</p>
	</div>
	<div id="box2">我是box2的内容</div>
	<script type="text/javascript">
		var box1 = document.getElementById("box1");
		var box2 = document.getElementById("box2");
		var para = document.getElementById("para");
		
		box2.appendChild(para);
	</script>
</body>

克隆节点

克隆节点使用cloneNode()即可,语法:

var 副本元素 = 元素.cloneNode(布尔值);

圆括号中的布尔值,如果是true,则表示要将这个节点的所有子节点一并克隆,即深度拷贝。如果是false,表示只克隆这个节点自己,而不克隆它的内部子节点,即浅拷贝。
关于概念方面内容可参考这篇博文:
JavaScript|实现深拷贝和浅拷贝(含测试源码)

例子:实现无序列表的拷贝

测试效果

在这里插入图片描述

附上源码

<body>
	<div id="box1">
		<ul>
			<li>项目1</li>
			<li>项目2</li>
			<li>项目3</li>
		</ul>
	</div>
	<div id= "box2">
		
	</div>
	<script type="text/javascript">
		var box1 = document.getElementById("box1");
		var box2 = document.getElementById("box2");
		var ul = box1.getElementsByTagName("ul")[0];
		box2.appendChild(ul.cloneNode(true));
	</script>
</body>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 像素格子 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读