DOM操作

最新推荐文章于 2022-05-12 23:24:01 发布

云飞扬°

最新推荐文章于 2022-05-12 23:24:01 发布

阅读量266

点赞数 1

分类专栏： JavaScript 文章标签： DOM操作

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90293414

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

DOM操作

什么是DOM: Document Object Model : 管理我们的文档增删改查规则

一些常用的 HTML DOM 方法：
  getElementById(id) - 获取带有指定 id 的节点（元素） 
  appendChild(node) - 插入新的子节点（元素） 
  removeChild(node) - 删除子节点（元素） 

  一些常用的 HTML DOM 属性：
  innerHTML - 节点（元素）的文本值 
  parentNode - 节点（元素）的父节点 
  childNodes - 节点（元素）的子节点 
  attributes - 节点（元素）的属性节点 


查找节点：
getElementById() 返回带有指定 ID 的元素。 
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 

增加节点：
createAttribute() 创建属性节点。 
createElement() 创建元素节点。 
createTextNode() 创建文本节点。 
insertBefore() 在指定的子节点前面插入新的子节点。 
appendChild() 把新的子节点添加到指定节点。 

删除节点：
removeChild() 删除子节点。 
replaceChild() 替换子节点。 

修改节点：
setAttribute()  修改属性
setAttributeNode()  修改属性节点

案例：动态的往这个div中添加节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			/*动态添加 :   <p>文本</p> */
			function dianwo(){
				var div = document.getElementById("div1");
				//创建元素节点
				var p = document.createElement("p");  // <p></p>
				//创建文本节点
				var textNode = document.createTextNode("文本内容");//  文本内容
				
				//将p 和文本内容关联起来
				p.appendChild(textNode);  //  <p>文本</p> 
				
				//将P添加到目标div中
				div.appendChild(p);
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="点我,添加P" onclick="dianwo()" />
		<!--一会动态的往这个Div中添加节点-->
		<div id="div1">
			
		</div>
	</body>
</html>