3.DOM

最新推荐文章于 2022-06-17 17:00:28 发布

huang_kuh

最新推荐文章于 2022-06-17 17:00:28 发布

阅读量7.9k

点赞数

本文链接：https://blog.csdn.net/huang_kuh/article/details/107208521

版权

自我学习总结同时被 2 个专栏收录

138 篇文章 0 订阅

订阅专栏

JavaWeb 第十四章 JavaScript

7 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM的基本概念，包括DOM是Document Object Model的缩写，是一种与浏览器、平台、语言无关的接口。同时，文章阐述了DOM获取元素的三种常见方式，并探讨了Node对象的属性和方法，以及元素节点和一般节点的各种操作，通过实例代码进行了演示。

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

文章目录

一.DOM概述

DOM ：DOM是Document Object Model文档对象模型的缩写。根据W3C
DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件
- D：文档 – html 文档或 xml 文档
- O：对象 – document 对象的属性和方法
- M：模型

二.DOM获取元素的三种方式

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id='girs'>
		<span style="background-color: green;">王 </span> <span
			style="background-color: yellow;" id="xs">西 </span> <span
			style="background-color: pink;">杨 </span> <span
			style="background-color: orange;">貂蝉 </span>
	</div>

	爱好:
	<input type="checkbox" value="java" name="hobbies">java
	<input type="checkbox" value="c" name="hobbies">c
	<input type="checkbox" value="c++" name="hobbies">c++
	<input type="checkbox" value="c#" name="hobbies">c#
</body>
</html>

indext.js

//
window.onload=function(){
	//通过id获取
	console.log(document.getElementById("girs"));
	console.log(document.getElementById("xs"));
	//通过标签name获取
	console.log(document.getElementsByName("hobbies"));
	//通过标签名字
	console.log(document.getElementsByTagName("span"));
	print(document.getElementsByTagName("span"));
}

function print(value){
	console.log(value);
}

三.Node对象的属性和方法

indext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id='girls'>
		<span style="background-color: green;" id="zj">王 </span> <span
			style="background-color: yellow;" id="xs">西 </span> <span
			style="background-color: pink;" id="yh">杨 </span> <span
			style="background-color: orange;">貂蝉 </span>
	</div>
</body>
</html>

indext.js

//
window.onload=function(){
	var div = document.getElementById("girls");
	//console.log(div.hasChildNodes());
	//查找出子节点
	//包括
	console.log(div.childNodes);
	//排除文本节点
	console.log(div.children);
	//打印子节点的个数
	console.log(div.childNodes.length);
	//找到第一个子节点
	console.log(div.firstChild);
	
	//最后一个子节点
	console.log(div.lastChild);
	
	var zjEL= document.getElementById("zj");
	console.log(zjEL.parentNode);
	
	//上一个兄弟节点
	console.log(zjEL.previousSibling);
	//下一个兄弟节点
	console.log(zjEL.nextSibling.nextSibling);
	
	//元素
	console.log("元素-----");
	console.log(zjEL.nodeName);//span
	console.log(zjEL.nodeValue);//null
	console.log(zjEL.nodeType);//1
	
	//文本
	var textEl = zjEL.nextSibling;
	console.log("文本-----");
	console.log(textEl.nodeName);
	console.log(textEl.nodeValue);
	console.log(textEl.nodeType);
	
	//属性
	console.log("属性-----");
	var textEl = zjEL.getAttributeNode("id");
	console.log(textEl.nodeName);
	console.log(textEl.nodeValue);
	console.log(textEl.nodeType);
	
};

四.元素节点的操作

indext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	.myClass{
		background-color:green;
	}
</style>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
	<span style="background-color: green;" id="zj" age='18'>王昭君 </span>
	
	<input type="checkbox" name="favsId" id="favsId" value="java">java
	
	<input type="text" readonly="readonly" id="xxx" value="ddd">
	
</body>
</html>

indext.js

//
window.onload=function(){
	//获取span id属性值
	var spEl = document.getElementById("zj");
	//获取id属性
	console.log(spEl.id);
	console.log(spEl["id"]);
	console.log(spEl.getAttribute("id"));
	//设置id属性
	/*spEl.id="xxx";*/
	
	//自定义属性
	console.log(spEl.age);
	console.log(spEl["age"]);
	console.log(spEl.getAttribute("age"));
	//结论:获取自定义属性只能通过getAttribute
	
	var favsEl=document.getElementById("favsId");
	
	//多选中
	favsEl.checked=true;
	//获取class样式
	console.log(spEl.className);
	
	//获取style样式
	console.log(spEl.style["background-color"]);
	console.log(spEl.style.backgroundColor);
	
	var inputXXX=document.getElementById("xxx");
	console.log(inputXXX.readOnly);
};

五.节点操作

案例一.

indext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	.myClass{
		background-color:green;
	}
</style>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
<span id="sp" style="background-color: red" >span</span>
	<div style="background-color:green;" id="div1">div1</div>	
	<div style="background-color:pink;" id="div2">div2</div>	
	<button onclick="moveSpan2Div1()">将span元素移动到div1</button>
	<button onclick="moveSpanDiv2()">将span元素移动到div2</button>
	<button onclick="newSpan2Div1()">新建span元素到div1</button>
	<button onclick="newSpan2Div2()">将新建pan元素到div2</button>
</body>
</html>

indext.js

function moveSpan2Div1(){
	//获取span元素,div元素
	var spEl = document.getElementById("sp");
	var div1El = document.getElementById("div1");
	
	div1El.appendChild(spEl);
	
}
function moveSpanDiv2(){
	//获取span元素,div元素
	var spEl = document.getElementById("sp");
	var div1E2 = document.getElementById("div2");
	console.log("div1E2"+div1E2);
	div1E2.appendChild(spEl);
}

function newSpan2Div1(){
	var spEl=document.createElement("span");
	spEl.innerHTML="span";
	spEl.style.backgroundColor="blue";
	
	console.log("spE1"+spEl);
	
	var div1=document.getElementById("div1");
	div1.appendChild(spEl);
}

function newSpan2Div2(){
	var sp1=document.createElement("span");
	sp1.innerHTML="真.红眼黑龙";
	sp1.style.backgroundColor="yellow";
	var div2=document.getElementById("div2");
	div2.appendChild(sp1);
}

案例二.

indext.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
	.myClass{
		background-color:green;
	}
</style>
<script type="text/javascript" src="indext.js"></script>
<title>Insert title here</title>
</head>
<body>
	<select id="selectId" multiple="multiple" size="8">
		<option id="item1">大</option>
		<option id="item2">二</option>
		<option id="item3">三</option>
		<option id="item5">五</option>
	</select><br>
	<button onclick="insertItem4BeforeItem5()">在五之前插入四</button><br>
	<button onclick="insertItem4AfterItem3()">在三后面插入四</button><br>
	<button onclick="deleteItem5()">删除五</button><br>
	<button onclick="replaceItem5ByItem4()">将五替换为四</button><br>
</body>
</html>

indext.js

function insertItem4BeforeItem5(){
	//1:创建四郎
	var item4 = document.createElement("option");
	item4.innerHTML="四郎";
	//2:找到参照节点五妹
	var item5=document.getElementById("item5");
	var selectId=document.getElementById("selectId");
	//3:插入
	selectId.insertBefore(item4,item5)
}

function insertItem4AfterItem3(){
	//1:创建四郎
	var item4 = document.createElement("option");
	item4.innerHTML="四郎";
	
	//2:找到参照节点五妹
	var item3=document.getElementById("item3");
	
	var itemt5=item3.nextSibling.nextSibling;
	
	var selectId=item3.parentNode;
	//3:插入
	selectId.insertBefore(item4,item5);
}

function deleteItem5(){
	//1:找到参照节点五妹
	var item5=document.getElementById("item5");
	//2:获取父节点
	var selectId=item5.parentNode;
	//3:插入
	selectId.removeChild(item5);
}

function replaceItem5ByItem4(){
	//1:创建新节点
	var item4 = document.createElement("option");
	//2:设置内容
	item4.innerHTML="四郎";
	//3:获取5节点
	var item5=document.getElementById("item5");
	//4:获取父节点
	var selectId = item5.parentNode;
	//5:替换
	selectId.replaceChild(item4,item5);
}