Javascript学习笔记(DOM、BOM对象)

DOM(Document Object Model)对象

DOM对象是文档对象模型定义访问和处理HTML文档的标准方法,DOM 将HTML文档呈现为带有元素、属性和文本的结构,其结构类似于树结构.
在DOM模型中，网页中的所有内容都看成一个对象，标签、属性、文本等等.
当浏览器加载网页的时候，浏览器会创建当前页面的文档对象(即DOM对象)，之后可以通过DOM对象访问网页中的所有节点.

将网页解析为DOM结点对象如下
在这里插入图片描述

元素节点：上图中<html>、<body>、<p>、<a>等等这些标签都是元素节点.
文本节点：在网页上展示的内容，上述的title标题，<p>标签的文本内容等等以及CSS等文本内容。
属性节点：元素结点的属性称之为属性结点，上述的<a>标签的href属性，<input>标签的value属性等等.

节点操作

通过DOM对象获取HTML代码中的节点


 //通过元素节点id获取节点
 document.getElementById();

 //通过结点的tag名称获取节点
 document.getElementsByTagName();
 
 //通过节点的名称获取，返回一个同样节点名称的数组
 document.getElementsByName();

通过父节点获取元素结点(已有节点nodeObj)

nodeObj.firstChild: 如果节点为已知节点的第一个子节点就可以使用这个方法。该属性是可以递归实现的，获取父节点的第一个子节点，在使用可以继续获取子节点的第一个子节点,nodeObj.firstChild.firstChild.firstChild…的形式.
nodeObj.lastChild ：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点，地柜使用，于获取第一个结点的方式一样.
nodeObj.childNodes ：获取已知节点的所有子节点数组，之后可以对数组进行处理(循环遍历，找到需要的节点).
nodeObj.children ：获取已知节点的直接子节点数组，之后进行处理.
nodeObj.getElementsByTagName() ：已知节点的所有子节点中类型为指定值的子节点数组

通过兄弟节点获取元素结点(已有节点nodeObj)

nodeObj.nextSibling:获得下个兄弟节点
nodeObj.previousSibling:获得上个兄弟节点

通过兄弟节点获取元素结点(已有节点nodeObj)

nodeObj.parentNode ：获取已知节点的父节点

节点的创建

元素节点：document.createElement(tagName);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);

节点的追加(父节点parentNode)

parentNode.appendChild(子节点);
parentNode.insertBefore(newnode,oldnode)、
parentNode.replaceChild(newnode,oldnode);

节点的复制与删除(被复制结点copyNode/父节点parentNode)

copyNode.cloneNode(true/false)

true为深复制，将节点和所有的子节点全部复制
false为浅复制：只复制当前节点（包括属性）
parentNode.removeChild(参数)

属性操作

获取节点属性值

itnode:属性名称
itnode.getAttribute(属性名称)

设置节点属性值

1.itnode.属性名称 = 设置的属性值

2.itnode.setAttribute(名称，值);

//代码中只演示了部分操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js练习</title>
		
		<script type="text/javascript">
			
			function funt1(){
				// 1.獲取元素结点
				var code1 = document.getElementById('demo1')
				// 2.对该结点进行操作
				code1.style.backgroundColor = 'blueviolet';
				// code1.style.size = 20px;
			}
			
			// document.getElementsByTagName(tag标签名称); 
			function funt2(){
				// 1.获取元素结点
				var code2 = document.getElementsByTagName('li');
				// 访问具体元素结点
				code2[0].style.backgroundColor = 'red';
				code2.item(1).style.backgroundColor = 'yellow';
			}
			
			// document.getElementsByName(name属性值);
			function funt3(){
				var code3 = document.getElementsByName('demo3');
				code3.item(0).style.fontSize = '25px';
				code3[0].style.backgroundColor = 'green';
			}
			
			// innnerHTML
			function funt4(){
				// 获取div结点
				var code4 = document.getElementById('demo4');
				// 重新设置一个html属性
				code4.innerHTML = '<h2>那都不是事..........</h2>';
			}
			
			function funt5(){
				// 获取li对象
				var code5 = document.getElementsByTagName('li');
				var one_code = code5[0];
				// 找出第一个li的下一个<li>
				one_code.nextElementSibling.style.backgroundColor = 'red';
				// 找出第二个li的上一个li
				var two_code = code5[1];
				two_code.previousSibling.style.fontSize = '50px';
			}
			
			function funt6(){
				// 获取结点
				var code6 = document.getElementsByTagName('li');
				var one_code1 = code6[0];
				one_code1.parentNode.style.fontSize = '50px';
			}
			
			function funt7(){
				var code7 = document.getElementsByTagName('a')[0];
				console.log(code7);
				console.log('链接'+code7.href);
				console.log('提交方式'+code7.method)
			}
		</script>
	</head>
	<body>
		<!--<di v id="demo1">窗前明月光</div>
		<div id="">意识地上霜</div>
		<input type="button" value="获取结点" onclick="funt1()" />
		 -->
		<!-- 
		<div>
			<ul>
				<li>如果努力有用的话</li>
				<li>还要天才干什么？</li>
				<li>...........</li>
			</ul>
			<input type="button" value="点我点我" onclick="funt2()" />
		</div>
	 -->
		<!-- 
	 <ul>
		 <li name='demo3'>窗前明月光</li>
		 <li nmae='demo3'>疑是地上霜</li>
		 <li>举头望明月</li>
		 <li>低头思故乡</li>
	 </ul>
 -->	 
		<!-- 
	<div id="demo4"></div>
	<p>>>>>>>>:</p>
	<input type="button" value="点我点我" onclick="funt4()" />
	 -->
	 
	 
	 <ul>
		 <li>床前明月光</li>
		 <li>疑是地上霜</li>
		 <li>举头望明月</li>
		 <li>低头思故乡</li>
	 </ul>
	 
	 <a href="www.baidu.com">百度</a>
	 <a href="www.taobao.com">淘宝</a>
	 <input type="button" value="点我点我" onclick="funt7()" />
	</body>
</html>

BOM(Browser Object Model)对象

浏览器对象模型,以 window 对象为依托，表示浏览器窗口以及页面可见区域.

window对象

window.alert()
弹出警告框
window.confirm()
弹出确认框
window.prompt()
弹出输入框
window.open(“url地址”，“_black或_self”，“新窗口的大小”）
打开新的窗口
close()
关闭当前的网页

定时器，清除定时器

setTimeout(function，time)
定时器
setInterval(function，time)
延时器
clearTimeout(定时器返回的值)
清除定时器

location对象

location.herf = ‘url地址’
host 返回服务器名称和端口号
pathname 返回目录和文件名
port 返回URL中的指定的端口号，如url中不包含端口号返回空字符串
portocol 返回页面使用的协议， http:/https:

Navigator对象
-查看浏览器的版本信息

screen对象

height: 获取整个屏幕的高。
width : 获取整个屏幕的宽。
availHeight: 整个屏幕的高减去系统部件的高
availWidth : 整个屏幕的宽减去系统部件的宽


//对上述的部分对象属性方法进行使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业3</title>
		<!-- 作业三：将作业1，2合并为一到题。计数器数字能被3整除变换背景颜色，数字能被8整除自动打开页面，页面计数到5自动关闭页面 -->
		<script type="text/javascript">
			
			// 定义一个计数器的初始值
			var initial=0;
			// 计数器计数函数
			function start_count() {
				// 获取input对象
				var input_obj = document.getElementById('count');
				// 通过对象获取input对象的value属性
				input_obj.value = '该计数器的值是'+initial;
				// 计数+1
				initial=initial+1;
				// 判断当计数器的值为30时弹出窗口自动关闭网页(自己加了一个提示网页关闭的弹窗)
				if (initial % 3 == 0){
					setTimeout('funt_color()',1000);
					setTimeout("start_count()",1000);
				}else if(initial % 8 == 0){
					setTimeout('open_win()',1000);
					setTimeout('start_count()',1000);
				}else if (initial % 3 ==0 && initial % 8 == 0){
					setTimeout('funt_color()',1000);
					setTimeout('open_win()',1000);
					setTimeout('start_count()',1000);
					console.log('你好啊..........')
				}else{
					setTimeout('start_count()',1000);
				}
			}  
			
			//定义一个打开页面的函数
			function open_win(){
				// 新窗口的url
				var win_url = '';
				// 窗口名称
				var win_name = 'window新窗口'
				// 新窗口的属性值
				var win_width = 600;
				var win_height = 400;
				var screen_width = screen.width;
				var screen_height = screen.height;
				var x = (screen_width-win_width)/2;
				var y = (screen_height-win_height)/2-50;
				var options = "width="+win_width+",height="+win_height+",left="+x+",top="+y;
				win_obj = window.open(win_url,win_name,options);
				//新窗口在5秒钟后，自动关闭
				win_obj.setTimeout("window.close()",5000);
			} 
			
			var color_str = '#';
			// 定义随机背景函数
			function funt_color(){
				/*随机产生十六进制的颜色值*/
				var arr_color = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];
				// 循环从列表中拿取6次，取到6个不同的值
				for(var i = 0; i < 6; i++)
				{
					// 产生一个1---------16之间的整数，作为下标，去数组中取值
					var random_color = Math.floor(Math.random()*16);
					// 产生的随机数*16,所以取不到0，所以随机数-1
					color_str += arr_color[random_color-1];
				}
				// 将rgb颜色表示弹出来
				// document.write('<h3 style="text-align: center;">16进制颜色表示为:'+color_str+'</h3>');
				// 设置背景
				document.body.bgColor = color_str;
			}
			  
		</script>
	
		<!-- 计数器显示的input框的样式 -->
		<style type="text/css">
			input {
				width: 200px;
				height: 50px;
				text-align: center;
				font-size: 20px;
				line-height: 50px;
				margin: 50px 42%;
			}
		</style>
	</head>
	<!-- 给body绑定网页打开自动触发函数 -->
	<body onload="start_count()">
		<input type="button" id="count" value="该计数器的值是0"/>
	</body>
</html>

十一丶

发布了63 篇原创文章 · 获赞 1 · 访问量 2033

私信关注

Javascript学习笔记(DOM、BOM对象)

DOM(Document Object Model)对象

节点操作

属性操作

BOM(Browser Object Model)对象

猜你喜欢