DOM访问html元素（通过id访问或通过节点关系访问）和对html元素进行增删改查

最新推荐文章于 2023-06-02 16:02:13 发布

birdlun

最新推荐文章于 2023-06-02 16:02:13 发布

阅读量625

点赞数

分类专栏： 04 javascript

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/94856353

版权

04 javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了两种访问HTML元素的方法：通过ID和通过节点关系，并详细讲解了DOM对元素的增删改查操作，包括创建、复制、添加和删除节点的实践示例。

摘要由CSDN通过智能技术生成

列：练习通过节点关系访问html元素（重点）

访问html元素的两种方法

根据id访问

var mya=document.getElementById('mya');

列：练习根据id访问

		<script type="text/javascript">
			function show() {
				var mydiv, mytextarea, mytext, btn;
				with(document) {
					mydiv = getElementById("mydiv");
					mytextarea = getElementById("mytextarea");
					mytext = getElementById("mytext");
					btn = getElementById('btn');
					write(mydiv.innerHTML + "\n" + mytextarea.value + "\n" + mytext.value)
				}

			}
		</script>
	</head>
	<body>
		<div id='mydiv'>我的div</div>
		<textarea id="mytextarea" rows="2" cols="20">我是textarea</textarea>
		<input type="text" id="mytext" value="laowang" />
		<input type="button" id="btn" value="点我" onclick="show()" />
	</body>

结果：

点击前：

点击后：

列：获取body下所有节点的名称

		<script>
			window.onload = function() {

				document.getElementById('btn').onclick = function myFunction() {
					var txt = "";
					var c = document.body.childNodes;
					for (i = 0; i < c.length; i++) {
						txt = txt + c[i].nodeName + "<br>";
					};
					var x = document.getElementById("demo");
					x.innerHTML = txt;
				}
			 }
		</script>
	</head>
	<body>
		<p id="demo">请点击按钮来获得 body 元素子节点的节点名。</p>
		<input type="button" id="btn" value="试一下" />
	</body>

结果：

通过节点关系访问html元素

常用属性和方法

parentNode 返回父节点
previousSibiling 返回当前节点的前一个兄弟节点
nextSibiling 返回当前节点的后一个兄弟节点
firstChild 返回当前节点的第一个子节点
lastChild 返回当前节点的最后一个子节点
getElementsByTag 返回当前节点具有标签名的所有子节点
nodeType 属性返回以数字值返回指定节点的节点类型。返回（元素节点是1 属性节点是2 文本节点是3）
nodeName 属性指定节点的节点名称。

列：练习通过节点关系访问html元素（重点）

		<script type="text/javascript">
			window.onload = function() {
				var myul = document.getElementById('myul');
				var div = document.getElementById('box');
				var btn1 = document.getElementById('btn1');
				var btn2 = document.getElementById('btn2');
				var btn3 = document.getElementById('btn3');
				//获取前一个兄弟子节点的名称
				btn1.onclick = function() {

					alert(myul.previousSibling.nodeName); //结果#text
				}

				btn2.onclick = function() {
					alert(" div：" + div + " 节点名称" + div.nodeName + " 节点类型" + div.nodeType + " 节点值：" + div.nodeValue);
					// 结果： div：[object HTMLDivElement]   节点名称DIV   节点类型1   节点值：nul
				}
				//div下所有的子节点
				btn3.onclick = function() {
					var allChilds = div.childNodes; //div下所有的子节点
					alert(allChilds.length) //结果 2
					for (i = 0; i < allChilds.length; i++) {
						if (allChilds[i].nodeType == 1) {
							alert( allChilds[i].nodeName) //结果：SPAN
						} else if (allChilds[i].nodeType == 3) {
							alert( allChilds[i].nodeValue); //节点的值 结果:mybox
						} else if (allChilds[i].nodeType == 2) {
							alert(allChilds[i].nodeName);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box">mybox<span>span1</span></div>
		<ul id="myul">
			<li>aaaa</li>
			<li>bbbb</li>
			<li>cccc</li>
			<li>dddd</li>
			<li>eeee</li>
		</ul>
		<input type="button" value="获取前一个兄弟子节点的名称" id='btn1' />
		<input type="button" value="2" id='btn2' />
		<input type="button" value="获取div下所有子节点" id='btn3' />
	</body>

结果：

DOM对html元素进行增删改查

创建节点

document.createElement(Tag);//tag是合法的html元素

复制节点

复制节点 cloneNode（boolean deep ）,当deep为true时，复制当前节点以及当前节点的后代节点

为false时，只复制当前节点。

添加、删除节点

appendChilde(newNode) 键newNode添加到当前节点的最后一个子节点
insertBefore(newNode,refNode) 在refNode节点前添加newNode节点
replaceChild(newNode,oldNode) 将oldNode节点替换成Child节点
removeChild(oldNode) 移出节点

birdlun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录