webAPI04-01模拟DOM结构

最新推荐文章于 2023-03-16 09:14:59 发布

雨乐无穷

最新推荐文章于 2023-03-16 09:14:59 发布

阅读量86

点赞数

分类专栏： JavaScript学习笔记

JavaScript学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟DOM结构</title>
	</head>
	<body>
		<div id="box"></div>
		
		<p id="pra"></p>
		
		
		
		<script type="text/javascript">
			
			
			//文档树
			//节点
				//元素节点
				//属性节点
				//文本节点
				//注释节点
			var box = document.getElementById('box');
			var pra = document.getElementById('pra');
			
			console.dir(box);
			console.dir(pra);
			
			
			//创建一些具有相同操作属性的对象    构造函数
			
			function Node(options){
				
				
				//方式一：传统的if...else
				
//				if(options.className){
//					this.className = options.className;
//				}else{
//					this.className = '';
//				}
				
				
				//方式二：三元运算符
				
//				this.className = options.className ? options.className : '';
				//三元运算符：A = B ? C : D
				//   A === 为被赋值的变量
				//   B === 为判断条件，默认是布尔类型，如果不是，会自动转换成布尔类型
				//   C === 为当条件(B)为真(true)时，变量所赋的值
				//   D === 为当条件(B)为假(false)时，变量所赋的值
				
				
				//方式三：借助布尔运算中的 或 || 运算
				
				this.className = options.className || '';
				this.nodeName = options.nodeName || '';
				this.children = options.children || [];
				
				// 或 || 运算：如果有一边为true，则返回true；两边都为false，则返回false;
				// 当运算符两边为运算数时  C = A || B
				// 当A为true时，直接返回A；
				// 当A为false时，直接返回B
				

				
			}
			
			var hah = new Node({
				className : 'lop'
			});
			
			console.log(hah);
			
			
			
			var html = new Node({
				nodeName:'html'
			});
			
			//创建head节点
			var head = new Node({
				nodeName:'head'
			});
			
			html.children.push('head');
			//创建body节点
			var body = new Node({
				nodeName:'body'
			});
			
			
			html.children.push('body');
			
			
			var div = new Node({
				nodeName:'div'
			});
			
			var p = new Node({
				nodeName:'p'
			});
			
			//设置body的子节点
			body.children.push('div');
			body.children.push('p');
			
			
			
			//在运行的时候，浏览内部维护了一颗DOM树
			//1.深刻理解DOM
			//2.了解节点的相关属性  nodeName nodeType nodeValue
			//3.了解节点的层次的结构
		</script>
	</body>
</html>

雨乐无穷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webAPI04-01模拟DOM结构

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>模拟DOM结构</title> </head> <body> <div id="box"></div> <p id="pra"...
复制链接

扫一扫