对象篇--宿主对象

最新推荐文章于 2023-12-18 00:00:00 发布

小乔与你同在

最新推荐文章于 2023-12-18 00:00:00 发布

阅读量403

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43109549/article/details/103479763

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 DOM（Document Objec Model）文档对象模型

文档：表示整个html网页文档。
对象：表示将网页中的每一个部分都转成一个对象。
模型：表示用模型来表示对象之间的关系，方便我们获取对象。
连起来理解就是将整个html网页文档转成一个个的对象，js通过这些对象对html文件进行操作。简单来说DOM指的就是html标签，js可以通过DOM来对html文档进行操作，学好这个我们就可以随心所欲的操作WEB页面了。

2 Document对象

每个载入浏览器的html文档都会成为Document对象。

属性：

title-网页标题
lastModified-上一次修改日期

<script type="text/javascript">	
	//操作文档对象属性
	// 1.获取网页标题
	console.log("网页标题："+document.title);
	console.log("网页更新时间："+document.lastModified);	
	//结果：网页更新时间：12/10/2019 18:41:26
	console.log(typeof document.lastModified);
	/*因为时间阅读性不好，同时因为结果是String类型，可以使用正则表达式来修改时间格式*/
	var timeStr = document.lastModified;
	var timeReg = /\/|\s/g;
	var lastTime = timeStr.split(timeReg);
	var newLastModified = lastTime[2]+"年"+lastTime[0]+"月"+lastTime[1]+"日"+lastTime[3];
	console.log("网页更新标准时间格式："+newLastModified);
	//	2.更改网页标题
	document.title = "王者荣耀";
	console.log("网页标题："+document.title);
</script>

（1）split()将字符串分割成字符串数组
（2）注意：对象是Document对象，调用方法是用document
（3）对网页标题赋值后，在浏览器网页上标题也会被更改。

方法：

write() 方法向网页中输出内容。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

<head>
	<meta charset="utf-8">
	<title>Docunment对象</title>
	<script type="text/javascript">
		window.onload = function(){
		//通过js写入标签
		document.write("<h1>网页标题："+document.title+"</h1>");
		document.writeln("<h3>上一次网页登陆时间："+document.lastModified+"</h3>");
		//若想在加载事件函数内加载下面body的<button>标签，就要用document.write()函数写入标签
		document.write("<button onclick='newDoc()'>创建新文档</button>");
		}

	</script>
</head>
<body>
	<!-- <button onclick="newDoc()">创建新文档</button> -->
</body>

注意：
（1）浏览器加载时会创建一个文档流，浏览器未加载完时在HTML文档内写入doucment.writ()函数，就会向HTML网页插入内容，就不会出现新的页面。
（2）window.onload事件是在文档内容完全加载完毕后再去执行加载事件处理函数，此时文档流已经关闭了。这个时候在window.onload事件函数内执行doucment.writ()函数会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。

open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。

<script type="text/javascript">
	window.onload = function(){
	//通过js写入标签
	document.write("<h1>网页标题："+document.title+"</h1>");
	document.writeln("<h3>上一次网页登陆时间："+document.lastModified+"</h3>");
	//若想在加载事件函数内加载下面body的<button>标签，就要用document.write()函数写入标签
	document.write("<button onclick='newDoc()'>创建新文档</button>");
	}
	function newDoc() {
		alert("欢迎光临");
		//手动开启一个新的文档
		document.open("text/html","replace");
		document.write("<h2>这是一个新的文件</h2>");
		document.close();
	}
</script>

使用加载事件后，document.write()会自动创建一个新的文档流，不需要手动关闭。在加载时间函数内部再次调用document.open()函数，会再次重新加载一个新的文档，新建一个页面。

3 文档对象节点树

3.1 节点

节点（Node）是构成我们网页的基本组成部分，网页中每一个部分都可以成为是一个节点。
常用节点分为四种：
文档节点：整个html文档
元素节点：html标签
属性节点：元素的属性
文本节点：html标签中的文本内容

3.2 节点树

每一个节点代表了一个元素对象，他们都具有相同的节点属性和方法，同时也有自身特有的属性和方法，其实就是我们基础班html讲的标签之间的关系。
（1）每一个节点树有一个根节点，除了根节点，每一个节点都有一个父节点。
（2）每一个节点都可以有许多的子节点，具有相同父节点的节点叫做兄弟节点。
树状图：
在这里插入图片描述

4 获取元素对象（节点）与常用属性

（1）通过id获取元素对象
document.getElementById(“id名”);
（2）通过标签名获取元素对象
document.getElementsByTagNam(“标签名”);
注意：返回的是一组元素对象数组（集合），所以要通过下标获取具体的值
（3）通过name获取元素对象
document.getElementsByName(“name名”);
注意：返回的是一组元素对象数组（集合），所以要通过下标获取具体的值
（4）通过class获取元素(IE8以下不兼容)
document.getElementsByClassName(“class名”)
注意：返回的是一组元素对象数组（集合），所以要通过下标获取具体的值

<script type="text/javascript">
	window.onload = function(){
		var textid = document.getElementById('text');
		console.log(textid);
		var text = document.getElementsByTagName('p');
		console.log(text[0]);
		var textname = document.getElementsByName("text");
		console.log(textname);//结果：NodeList(2) [p#text.text, div#text.text]
		console.log(textname[0]);
		console.log(textname[1]);

		var textclass = document.getElementsByClassName("text");
		console.log(textclass[0]);
		console.log(textclass[1]);
	}
</script>

属性：
（1）innerHTML—获取元素节点中的文字内容，包括html元素内容
（2）innerText—获取元素节点中的文字内容，不包括html元素内容
（3）元素节点(标签元素).属性—获取标签元素上面对应属性的值。
注意：获取class属性不能采用这种方式，因为class是保留字，读取class需要使用className（元素.className）。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		window.onload = function () {
			/*
				优化：
					我们发现这里的添加点击事件都是一模一样的
					所以我们可以提前成一个方法

					把固定的值变成形参可以动态添加修改的参数
			*/
			/*
				给元素添加点击事件
				@param btnId ： 要添加点击事件的元素id
				@param fun ： 事件监听的函数（要执行的操作）
			*/
			//使用回调函数
			function myClick(btnId,fun){
				var btn = document.getElementById(btnId);
				btn.onclick = fun;
			}


			// 查找id为number10的节点
			// var btn01 = document.getElementById('btn01');
			// btn01.onclick = function(){
			// 	var number10 = document.getElementById('number10');
			// 	// innerHTML-元素节点中的文字内容，包括html元素内容
			// 	alert(number10.innerHTML);
			// }
			myClick("btn01",function(){
				var number10 = document.getElementById('number10');
				// innerHTML-元素节点中的文字内容，包括html元素内容
				alert(number10.innerHTML);
			});

			// 查找所有li节点
			// var btn02 = document.getElementById('btn02');
			// btn02.onclick = function(){
			// 	var allli = document.getElementsByTagName('li');
			// 	// alert(allli.length);
			// 	for (var i = 0; i < allli.length; i++) {
			// 		// alert(allli[i].innerHTML);
			//结果：<input type="checkbox" name="kc" value="html" class="test">html（获取文字，包括节点内部的元素标签）
			// 		alert(allli[i].innerText);
			//结果：html（只获取文字，不包括html元素）
			// 	}
			// }
			myClick("btn02",function(){
				var allli = document.getElementsByTagName('li');
				// alert(allli.length);
				for (var i = 0; i < allli.length; i++) {
					// alert(allli[i].innerHTML);
					alert(allli[i].innerText);
				}
			});

			// 查找name为kc的节点
			// var btn03 = document.getElementById('btn03');
			// btn03.onclick = function(){
			// 	var kc = document.getElementsByName('kc');
			// 	for (var i = 0; i < kc.length; i++) {
			// 		alert(kc[i].value);
			// 	}
			// }
			myClick("btn03",function(){
				var kc = document.getElementsByName('kc');
				for (var i = 0; i < kc.length; i++) {
					alert(kc[i].value);
		/*
		*	结果：html，javaEE，ssm。通过当前元素节点对象获取属性，注意获取input标签内class属性时要使用className属性。
		*/
				}
			});
		}
	</script>
</head>
<body>
	<p>班级：</p>
	<ul>
		<li id="number10">10期</li>
		<li>9期</li>
		<li>8期</li>
	</ul>
	<p>学生：</p>
	<ul>
		<li>hann</li>
		<li>玖先生</li>
		<li>LIJIATU</li>
	</ul>
	<p>课程：</p>
	<ul>
		<li><input type="checkbox" name="kc" value="html" class="test">html</li>
		<li><input type="checkbox" name="kc" value="javaEE">javaEE</li>
		<li><input type="checkbox" name="kc" value="ssm">ssm</li>
	</ul>
	<div class="btn">
		<button id="btn01">查找id为number10的节点</button>
		<button id="btn02">查找所有li节点</button>
		<button id="btn03">查找name为kc的节点</button>
	</div>
</body>
</html>

小乔与你同在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对象篇--宿主对象

1 DOM（Document Objec Model）文档对象模型文档：表示整个html网页文档。对象：表示将网页中的每一个部分都转成一个对象。模型：表示用模型来表示对象之间的关系，方便我们获取对象。连起来理解就是将整个html网页文档转成一个个的对象，js通过这些对象对html文件进行操作。简单来说DOM指的就是html标签，js可以通过DOM来对html文档进行操作，学好这个我们就可以...
复制链接

扫一扫