089_DOM节点动态创建、添加和删除

最新推荐文章于 2023-05-02 11:48:46 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-05-02 11:48:46 发布

阅读量307

点赞数 1

分类专栏： JavaScript学习文章标签： html5 html javascript

本文链接：https://blog.csdn.net/aihiao/article/details/112299217

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何使用DOM（Document Object Model）在JavaScript中进行基本的节点操作，包括创建元素和文本节点、添加节点到父元素、删除和替换节点，以及管理属性节点。示例代码展示了如何在页面上动态插入、删除和替换节点，以及设置和获取属性。此外，还展示了如何动态添加CSS到页面头部，以改变元素样式。

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

1. 创建节点

1.1. 创建元素

document.createElement(tagName);

1.2. 创建文本

document.createTextNode("这是新文本。");

2. 添加节点

2.1. appendChild()方法, 追加新元素作为父的最后一个子。

parentElement.appendChild(newElement);

2.2. insertBefore()方法, 在父元素的子元素前插入一个元素。

parentElement.insertBefore(newElement, childElement);

3. 删除节点

3.1. removeChild()方法, 从父元素中删除一个节点。

3.2. 很遗憾, DOM需要同时了解您需要删除的元素及其父。

parentElement.removeChild(childElement);

3.3. 这是一种常见的解决方法: 找到你想要删除的子, 并利用其parentNode属性找到父:

childElement.parentNode.removeChild(childElement);

4. 替换节点

4.1. replaceChild()方法, 从父元素中替换一个子。

childElement.parentNode.replaceChild(newElement, oldElement);

5. 属性节点

5.1. 创建属性

var attr = document.createAttribute(attributename);
// 给属性赋值
attr.value = 'test'

5.2. setAttributeNode()方法用于添加新的属性节点。如果元素中已经存在指定名称的属性, 那么该属性将被新属性替代。如果新属性替代了已有的属性, 则返回被替代的属性, 否则返回NULL。

element.setAttributeNode(attributenode)

5.3. getAttributeNode()方法从当前元素中通过名称获取属性节点。

element.getAttributeNode(attributename)

5.4. removeAttributeNode()方法从元素中删除指定的属性节点。该方法从当前元素的属性集合中删除(并返回一个)Attr节点。用removeAttribute()方法代替该方法往往会更简单。

element.removeAttributeNode(attributenode)

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM节点动态创建、添加和删除</title>
	</head>
	<body>
		<div id="div1">
			<p>我是第一个p节点</p>
			<p>我是第二个p节点</p>
		</div>
		<div id="div2">删除我</div>
		<div id="div3">替换我</div>

		<script type="text/javascript">
			var div1 = document.getElementById('div1');

			var preP = document.createElement('p');
			// 创建文本
			var textPreP = document.createTextNode('我是前置p');
			preP.appendChild(textPreP);
			// 创建属性
			var idAttr = document.createAttribute("id");
			idAttr.value = 'preP';
			preP.setAttributeNode(idAttr);

			div1.insertBefore(preP, div1.firstChild);


			var div2 = document.getElementById('div2');
			div2.parentNode.removeChild(div2);


			var div3 = document.getElementById('div3');
			var divReplace = document.createElement('div');
			// 创建文本
			var replaceText = document.createTextNode('我是被替换的');
			divReplace.appendChild(replaceText);
			// 添加属性
			divReplace.setAttribute('id', 'divReplace');

			div3.parentNode.replaceChild(divReplace, div3);

			document.write(div1.firstChild.removeAttributeNode(idAttr).value + '<br />');
			document.write(divReplace.getAttributeNode('id').value + '<br />');

			// 动态在head标签中添加css
			var headStyle = document.getElementsByTagName("head")[0].appendChild(document.createElement("style"));
			headStyle.type = "text/css";
			headStyle.textContent = "p { background-color: red; height: 40px; line-height: 40px; } div { background-color: green;}";
		</script>
	</body>
</html>

6.2. 效果图

自由与束缚JavaJavaScript

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
089_DOM节点动态创建、添加和删除

1. 创建节点1.1. 创建元素document.createElement("元素名称"); 1.2. 创建文本document.createTextNode("这是新文本。");1.3. 创建属性var attr = document.createAttribute("属性名称");// 给属性赋值attr.value = 'test' 2. 添加节点2.1. appendChild()方法, 追加新元素作为父的最后一个子。element.appendCh
复制链接

扫一扫

专栏目录