DOM高级编程

最新推荐文章于 2022-03-02 23:54:55 发布

爱窦

最新推荐文章于 2022-03-02 23:54:55 发布

阅读量350

点赞数

分类专栏： JavaSript

本文链接：https://blog.csdn.net/weixin_44342481/article/details/114636100

版权

JavaSript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

解析文档生成对应DOM树
DOM树中的节点类型和节点关系
W3C规定的三类DOM标准接口
核心 DOM的操作
查看节点（根据id name classname tagname）
- 查看/修改属性节点(getAttribute())
查看节点（根据文档层次关系查看节点）
查看节点信息
创建和增加节点、删除和替换节点
HTML DOM对象的属性访问（不使用get/setAttribute（））
表格的增删

解析文档生成对应DOM树

在这里插入图片描述

DOM树中的节点类型和节点关系

在这里插入图片描述

W3C规定的三类DOM标准接口

在这里插入图片描述

核心 DOM的操作

查看节点
创建和增加节点
删除和替换节点

查看节点（根据id name classname tagname）

访问指定节点的方法
getElementById( ) ：返回一个节点对象(按照id查找指定节点)
getElementsByName( )：返回多个（节点数组）（按照名称查找多个节点）
getElementsByTagName( ) ：返回多个（节点数组）（按照标签名称如：div span tale… 返回所有该标签节点）

查看/修改属性节点(getAttribute())

getAttribute(“属性名”) 根据属性名获取该节点的属性值
例如

<a id="index" href="index.html">index</a>

//则该值为index.html
getElementById("index").getAttribute("href")

setAttribute(“属性名”,“属性值”) 根据属性名修改属性值
该方法太复杂可以直接获取详情往下看

查看节点（根据文档层次关系查看节点）

obj.childNodes; //得到obj的全部子节点(数组)
obj.parentNode; //得到obj的父节点对象
obj.nextSibling; //获得obj的下一个兄弟节点对象
obj.previousSibling; //得到obj的上一个兄弟节点
obj.firstChild; //获得obj的第一个子节点
obj.lastChild; //获得obj的最后一个子节点

查看节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)

nodeName 属性含有某个节点的名称有如下情况：
元素节点的 nodeName 是标签名称（元素节点是HTML标签元素）
属性节点的 nodeName 是属性名称（属性节点：一般是元素节点的属性）
文本节点的 nodeName 永远是 #text （一般被包含在元素节点的开闭合标签内部。）
文档节点的 nodeName 永远是 #document （Document既整个文档是一个节点）
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType
nodeType 属性可返回节点的类型:
元素 -1, 属性 -2 ,文本- 3, 注释- 8, 文档- 9

创建和增加节点、删除和替换节点

创建和增加节点的方法：
createElement（）：创建节点
appendChild（）：末尾追加方式插入节点
insertBefore（）：在指定节点前插入新节点
cloneNode（）：克隆节点
removeChild()：删除节点
replaceChild() ：替换节点
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			function insertEle(){
				var pic = document.getElementById("pic");
				//创建一个元素，根据字段创建
				var newEle = document.createElement("img");
				//给元素src属性赋值
				newEle.setAttribute("src","img/Wancom.jpg");
				document.body.insertBefore(newEle,pic);
			}

			function clone() {
				var pic = document.getElementById("pic");
				var newPic = pic.cloneNode(false);
				//追加到尾部
				document.body.appendChild(newPic);
			}

			function deleteEle() {
				var pic = document.getElementById("pic");
				document.body.removeChild(pic);
			}

			function replace() {
				var pic = document.getElementById("pic");
				// pic.setAttribute("src","img/bg.gif");
				var newEle = document.createElement("input");
				newEle.setAttribute("type","button");
				newEle.setAttribute("value","被替换的按钮");
				newEle.onclick = function(){
					alert("i am a button");
				}
				//用新元素替换旧的元素
				document.body.replaceChild(newEle,pic);
			}
		</script>
	</head>
	<body>
		<img src="img/Frame.jpg" id="pic"><br />
		<input type="button" value="插入图片" onclick="insertEle()"/>
		<input type="button" value="复制图片" onclick="clone()" />
		<input type="button" value="删除图片" onclick="deleteEle()" />
		<input type="button" value="替换元素" onclick="replace()" />
	</body>
</html>

HTML DOM对象的属性访问（不使用get/setAttribute（））

不再使用setAttribute（）/ getAttribute（）方法简化为对象名.属性值进行读取或修改

function change(){
  var imgs=document.getElementById("s1");
  imgs.src="images/grape.jpg";
}
function show(){
  var hText=document.getElementById("s1").alt;
  alert("图片的alt是："+hText)
}
</script>

表格的增删

table表格对象
在这里插入图片描述

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}
			.title{
				background-color: #ccc;
				color: #FF0000;
			}
		</style>
		<script type="text/javascript">
			function addRow() {
				//获取表格对象
				var table = document.getElementById("myTable");
				//填写下标 标插入一行
				var row = table.insertRow(table.rows.length);
				//插入第一列
				var cellF = row.insertCell(0);
				cellF.innerHTML = "三国演义";
				//插入第二列
				var cellS = row.insertCell(1);
				cellS.innerHTML = "&yen;1053";
			}

			function deleteRow() {
				var table = document.getElementById("myTable");
				//删除行，下标从0开始。
				table.deleteRow(2);
			}

			function updateRow() {
				var table = document.getElementById("myTable");
				var row = table.rows[0];
				//给某行设置样式，添加类名称
				row.className="title";
				var cell1 = row.cells[1];
				cell1.innerHTML = "price";
			}
		</script>
	</head>
	<body>
		<table border="1" id="myTable">
			<tr>
				<td>书名</td>
				<td>价格</td>
			</tr>
			<tr>
				<td>西游记</td>
				<td>&yen;100</td>
			</tr>
			<tr>
				<td>水浒传</td>
				<td>&yen;95</td>
			</tr>
		</table>
		<input type="button" value="新增一行" onclick="addRow()" />
		<input type="button" value="删除第二行" onclick="deleteRow()" />
		<input type="button" value="修改标题" onclick="updateRow()" />
	</body>
</html>