js_day24--js DOM编程（document+body对象）

最新推荐文章于 2023-08-29 16:55:50 发布

KLeonard

最新推荐文章于 2023-08-29 16:55:50 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/gavin_john/article/details/21826383

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ JavaScript

21 篇文章 0 订阅

订阅专栏

Day24

document对象

document是DOM编程中最重要的一个对象
document对象代表整个html文档，可用来访问页面中所有的元素，是最复杂的一个dom对象，可以说是学好dom编程的关键所在。
document对象是window对象一个成员属性，通过window.document来访问，当然也可以直接使用document

再来看一下dom对象层次一览图：

1.write()向文档输出文本或是js代码等。

2.writeln()也是向文档输出文本或是js代码等，与write()不一样的是，这个是换行输出。

3.getElementById()

a).规定Html文档中，id号要唯一，如果不唯一，则只取第一个元素

b).id号不要以数字开头

4.getElementsByName()

通过元素的名字来获取对象集合

案例：

<html>
	<head>
		<title>window.test</title>
		<script language="javascript" type="text/javascript">
		<!--
			function test1(){
					var myhref = document.getElementById("a1");
					window.alert(myhref.innerText);
			}
			
			function test2(){
					//id必须唯一，但是名字可以重复	
					var hobbies = document.getElementsByName("hobby");
					window.alert(hobbies.length);
					for (var i =0;i<hobbies.length;i++){
						//如何判断是否选中
						if(hobbies[i].checked){
							window.alert("你的爱好是"+hobbies[i].value);	
						}		
					}
			}
		
			//>
		</script>	
	</head>	
	<body>
		<a id="a1" href="http://www.sohu.com">连接到sohu</a><br/>
		<a id="a1" href="http://www.sina.com">连接到sina</a><br/>
		<a id="a1" href="http://www.baidu.com">连接到baidu</a><br/>
		请选择你的爱好：
		<input type="checkbox" name="hobby" value="足球"/>足球
		<input type="checkbox" name="hobby" value="旅游"/>旅游
		<input type="checkbox" name="hobby" value="音乐"/>音乐
		<br/>
		<input type="button" value="test" οnclick="test2()"/>
	</body>
</html>

5.getElementsByTagName()

通过标签名字获取对象集合

//通过标签名来获取对象（元素）
			function test3(){
				var myobjs = document.getElementsByTagName("input");
				for(var i =0;i<myobjs.length;i++){
					window.alert(myobjs[i].value);		
				}
			}

6.动态的创建元素（节点）/添加元素/删除元素

案例：

<html>
	<head>
		<title>day_24_2</title>
		<script language="javascript" type="text/javascript">
		<!--
			function test1(){
				//创建元素
				var myElement = document.createElement("a");	//？？写希望创建的html元素标签名
				//给新的元素添加必要的信息
				myElement.href="http://www.sina.com";
				myElement.innerText="连接到sina";
				myElement.target="_blank";
				myElement.id="id1";
			/*
				myElement.style.left = "200px";
				myElement.style.top="300px";
				myElement.style.position="absolute";
				*/
				//添加到document.body上去
				//document.body.appendChild(myElement);
				
				//将元素添加到div上去
				document.getElementById("div1").appendChild(myElement);
				
				
				var myButton = document.createElement("input");	//？？写希望创建的html元素标签名
				//给新的元素添加必要的信息
				myButton.type="button";
				myButton.value="我是Button";
				document.getElementById("div1").appendChild(myButton);
			}
		
			function test2(){
				//删除一个元素
					var myHref = document.getElementById("id1");
				//	document.getElementById("div1").removeChild(myHref);
					
					//或者可以直接根据id号为id1的元素得到其父节点id
					//这种方法比较灵活
					var parentNodeId = document.getElementById("id1").parentNode.id;
					document.getElementById(parentNodeId).removeChild(myHref);
			}
			//>
		</script>	
	</head>	
	<body>
		<input type="button" οnclick="test1()" value="动态地创建一个元素"/>
		<input type="button" οnclick="test2()" value="删除一个元素,id号为id1"/>
		
		<div id="div1" style="width:200px;height:400px;border:1px solid red">div1</div>
	</body>
</html>

7.对dom的加强

在dom编程中，一个html文档会被当做一个dom树来对待。Dom会把所有的html元素（包括注释、文本）映射成Node节点。于是，你就可以使用Node节点（对象）的属性和方法。

案例：

<html>
	<head>
		<title>
			DOM树	
		</title>
		<script language="javascript" type="text/javascript">
			function $(id){
				return document.getElementById(id);	
			}
			function test1(){
				var tortoise=$("div1");	
				window.alert(tortoise.nodeName+" "+tortoise.nodeType);
				window.alert(tortoise.childNodes.length);//这里会把换行符也当成一个节点（文本元素）
				//兄弟节点,这时候div之间的换行符也看做是文本是它的第一个兄弟节点。
				window.alert(tortoise.nextSibling.nextSibling.id);
			}
		</script>	
	</head>	
	<body>
		<div id="div1" style ="height:125px;width:125px;">
			<img src="1.jpg" style="height:124px;width:124px;">
			</div>
		<div id="div2" style = "height:125px;width:125px;">
			<img src="2.jpg" style="height:124px;width:124px;">	
		</div>
		<input type="button" value="test" οnclick="test1()"/>
	</body>
</html>

8.document属性

alinkColor 当前文档访问过的超链接的颜色
linkColor 当前文档超链接的颜色
bgColor 当前文档背景色
fgColor 文档前景色
title 当前文档的标题
URL 当前文档的URL
domain 当前文档访问的域名

案例：

<html>
	<head>
		<title>
			DOM属性
		</title>
		<script language="javascript" type="text/javascript">
			document.fgColor="red";
			document.bgColor="blue";
			document.writeln(document.URL);
			document.writeln(document.domain);
		</script>	
	</head>	
	<body>
		hello
	</body>
</html>

body对象

body对象代表文档的主体（HTML body）

body对象是document对象的一个成员属性，通过访问document.body来访问。

使用body对象，要求文档的主体创建后才能使用，也就是说不能在文档的body主体还没有创建就去访问body。

body对象的常用函数和属性：

appendChild() 添加元素
removeChild() 删除元素
getElementByTagName() 通过html元素名称得到对象数组
bgColor 文档背景色
background 文档背景图
innerText 某个元素间的文本
innerHTML 某个元素间的html代码
onload事件文件加载时触发
onunload事件文档关闭时触发
onbeforeunload事件文档关闭前触发

强调innerText和innerHTML的区别：

InnerHTML会当成html代码来解析，而innerText会把它当成普通文本来解析。

onscroll事件

广告滚动！当用户拉动滚动条时，广告图片也跟着往下。
onselectstart事件

当用户试图选中网页内容时触发。一般用于阻止用户选中网页内容和复制等。

KLeonard

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js_day24--js DOM编程（document+body对象）

Day24document对象document是DOM编程中最重要的一个对象document对象代表整个html文档，可用来访问页面中所有的元素，是最复杂的一个dom对象，可以说是学好dom编程的关键所在。document对象是window对象一个成员属性，通过window.document来访问，当然也可以直接使用d
复制链接

扫一扫

专栏目录