渡一教育公开课web前端开发JavaScript精英课学习笔记（十二）DOM

最新推荐文章于 2023-09-24 00:59:38 发布

じоνё靁〃

最新推荐文章于 2023-09-24 00:59:38 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/87031080

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 12 订阅

订阅专栏

DOM

DOM是Document Object Model的缩写即文档对象模型。

DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，有浏览器厂商，用来操作html和xml功能的一类对象的集合。也有人称DOM是对html以及xml的标准编程接口。

html超文本标记语言：有固定的标签格式，用来定义网页的内容。

xml可扩展标记语言：可自定义标签格式，用来传送自定义数据使用。逐渐被JSON取代。

<div>DOM对象初步认识</div>
<script type = "text/javascript">
	//获取DOM对象，document 代表整个文档
	var div = document.getElementsByTagName('div')[0];
	//设置DOM对象的属性
	div.style.width = "100px";
	div.style.height = '100px';
	div.style.backgroundColor = 'green';
	//DOM对象事件绑定
	div.onclick = function(){
		if(this.style.backgroundColor == 'red'){
			this.style.backgroundColor = 'green';
		}else{
			this.style.backgroundColor = 'red';
		}
	}
 </script>

获取DOM对象的方法：

可通过名称，类型名，样式类名，id，遍历节点树等方式来获取元素。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>获取DOM对象举例</title>
	<style type="text/css">
		.css1{
			border:1px solid #ff0;
		}
	</style>
</head>
<body>
	<div id = 'div1' name = 'only' class = 'css1'>
		<!--注释节点-->
		<strong>DOM对象初步认识</strong>
	</div></body>
</html>
<script type = "text/javascript">
	//获取DOM对象，document 代表整个文档
	//var div = document.getElementsByTagName('div')[0];//通过元素类型名查找
	//var div = document.getElementById('div1');//通过元素ID查找，不常用（整合代码时ID会被后端程序修改）。
	//var div = document.getElementsByName('only')[0];//通过元素名查找。
	//var div = document.getElementsByClassName('css1')[0];//通过CSS类名查找
	//var div = document.querySelector('div.css1');//通过CSS选择器查找匹配的第一个元素。获取的是元素的快照，不实时。
	//var div = document.querySelectorAll('div.css1')[0];//通过CSS选择器查找所有符合的元素。获取的是元素的快照，不实时。
	var body = document.getElementsByTagName("body")[0];
	var strong = document.getElementsByTagName('strong')[0];
	//通过遍历DOM节点树查找元素
	//var div = strong.parentNode;//获取父节点
	var div = strong.parentElement;//获取父元素节点
	console.log(body.childNodes);//获取子节点，换行也算一个文本节点
	console.log(body.children);//获取元素子节点，换行也算一个文本节点
	console.log(strong);
	console.log(body);
	//设置DOM对象的属性
	div.style.width = "100px";
	div.style.height = '100px';
	div.style.backgroundColor = 'green';
	//DOM对象事件绑定
	div.onclick = function(){
		if(this.style.backgroundColor == 'red'){
			this.style.backgroundColor = 'green';
		}else{
			this.style.backgroundColor = 'red';
		}
	}
</script>

节点的属性
- nodeName - 元素的标签名，以大写形式标识，只读的。
- nodeValue - Text节点或Comment节点的文本内容，可读写。
- nodeType - 节点的类型，只读。
- attributes - Element 节点的属性集合
节点的方法
- Node.hasChildNodes();是否有子节点。
节点的类型
- 元素节点 - 1
- 属性节点 - 2
- 文本节点 - 3
- 注释节点 - 8
- document - 9
- DocumentFragment - 11

<h1>遍历节点</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var div = document.getElementsByTagName('div')[0];
	for (let index = 0; index < div.children.length; index++) {
		const element = div.children[index];
		console.log(index,element.nodeName,element.nodeType,element.nodeValue);
	}
	//遍历子节点，输出节点的属性
	for (let index = 0; index < div.childNodes.length; index++) {
		const node = div.childNodes[index];
		console.log(index,node.nodeName,node.nodeType,node.nodeValue);
	}
</script>

节点的增删改

<h1>节点增删改</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var div = document.getElementsByTagName('div')[0];
	var div1 = document.createElement("div"); //- 创建元素节点
	div1.innerHTML = 'new div';
	var text1 = document.createTextNode("text"); //- 创建文本节点
	text1.nodeValue = "text1";
	var comment1 =  document.createComment("comment"); //- 创建注释
	comment1.nodeValue = 'comment1'
	var doc =  document.createDocumentFragment("fragment");//创建文档碎片
	doc.appendChild(document.createElement("div"));
	// //插入元素节点
	div.appendChild(div1);//如果选中的是已存在的元素，将会移动元素到新位置。
	div.appendChild(text1);
	div.insertBefore(comment1,div1); 
	div.insertBefore(doc,div1); 
	//删除元素节点
	div.removeChild(comment1); //返回删除的节点
	text1.remove(); //无返回
	//替换节点
	var comment2 = document.createComment("comment");
	comment2.nodeValue = "replaceChild div1";
	div.replaceChild(comment2,div1);
</script>

元素节点的属性和方法

<h1>元素节点属性和方法</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var strong = document.getElementsByTagName('strong')[0];
	strong.innerText = "new strong";//设置文本值
	var div = document.getElementsByTagName('div')[0];
	div.innerHTML = 'new div';//设置html代码
	div.setAttribute("id",'only');//设置属性值
	console.log(div.getAttribute('id'));//读取属性值
 </script>

DOM继承树

node
- Document
  - HTMLDocument
CharacterData
- Text
- Comment
Element
- HTMLElement
- HTMLHeadElement·
- HTMLBodyElement
- HTMLTitleElement
- HTMLParagraphElement
- HTMLinputElement
- HTMLTableElement
- ...ect.
Attr

封装insertAfter();类似insertBefore();

<h1>insertAfter</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	//实现在元素节点后添加新节点
	Element.prototype.insertAfter = function(targetNode,afterNode){
		var beforeNode = afterNode.nextElementSibling;
		if(beforeNode == null){
			this.appendChild(targetNode);
		}else{
			this.insertBefore(targetNode,beforeNode);
		}
	}
	var div = document.getElementsByTagName("div")[0];
	var newNode = document.createElement('p');
	var strong = document.getElementsByTagName('strong')[0];
	var input = document.getElementsByTagName('input')[0];
	console.log(strong);
	div.insertAfter(newNode,strong);
 </script>

倒序排列元素节点

<h1>倒序排列节点</h1>
<div>
	<!--注释节点-->
	<strong>strong</strong>
	<span>span</span>
	<div name='childName' id ='childId'>div</div>
	<input type="button" value="button"/>
</div>
<script type = "text/javascript">
	var div = document.getElementsByTagName('div')[0]
	//倒序排列元素节点
	var len = div.children.length;
	for (let i = len-1; i >= 0; i--) {
		div.appendChild(div.children[i]);
	}
 </script>