JavaScript对象（四）之HTML DOM对象

最新推荐文章于 2023-08-09 20:15:20 发布
最新推荐文章于 2023-08-09 20:15:20 发布
阅读量9.6k 收藏 11
点赞数 2
分类专栏： JavaScript 文章标签： javascript html 文档 button 浏览器 function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shadowyelling/article/details/7386604
版权

        前面提到过的JavaScript的String对象、Date对象、Array对象、Boolean对象、Math对象、RegExp对象等都是JavaScript的内置对象。JavaScript可以使用HTML DOM（HTML Document Object Mode 文档对象模型）动态修改网页。

        HTML DOM定义了访问和操作HTML文档的标准方法。他把HTML文档呈现为带有元素、属性和文本的树结构。在层次图中，每个对象是它的父对象的属性，如Window对象是Document对象的父对象，所以在引用Document对象就可以使用Window.Document，相当于document是window对象的属性。对于每一个页面，浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。

1.浏览器对象

（1）.Window对象

Window对象的属性

1）Close属性，返回一个布尔值，声明了窗口是否已经关闭，为只读属性。

2）defaultStatus属性，设置或返回窗口状态栏中的默认文本，只读属性。

3)status属性，是一个可读可写的字符串，在窗口状态栏显示一条消息，当擦除status声明的消息时，状态栏恢复成defaultstatus设置的值。

<html>
<head>
<script type="text/javascript">
function checkWin()
{
	if(myWindow.closed)
		document.write("'myWindow' has been closed!")
	else
		document.write("'myWindow' has not been closed!")
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.defaultStatus("this is my first Window")
</script>
<input type="button" value="Has 'myWindow' been closed?" οnclick="checkWin()"/>
</body>
</html>

4)opener属性返回创建该窗口的Window对象的引用，是一个可读可写的属性。

注意：只有表示顶层窗口的Window对象的opener属性才有效，表示框架的Window对象的opener属性无效。

<html>
<body>

<script type="text/javascript">
myWindow=window.open('','myName','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus();
myWindow.opener.document.write("this is the parent window")
</script>

</body>
</html>

5）self属性，可返回窗口自身的引用，相当于Window属性。

6）top属性，返回最顶层的父窗口，改属性对一个顶级窗口的只读引用，如果窗口本身就是一个顶级窗口，top属性存放对窗口自身的引用，如果窗口是一个框架，那么top属性引用包含框架的顶层窗口。

<html>
<head>
<script type="text/javascript">
function checkTopSel()
{
	if(window.top==window.self)
	{
		alert(window.location)
	}
}

</script>
</head>

<body>
<input type="button" οnclick="checkTopSel()" value="判断当前窗体是否是顶层窗体"/>
</body>
</html>

7）doucment属性：对Document对象的只读引用。

8）history属性：对History对象的只读引用。

9）location属性：用于窗口或框架的Location对象。

10）Navigator属性：对Navigator对象的只读引用。

11）Screen属性：对Screen对象的只读引用

Window对象的方法

1）alert()方法：用于显示带有一条制定消息和一个OK按钮的警告框。        alert（message）

2）confirm()方法：用于显示一个带有制定消息和OK及取消按钮的对话框。        alert（message）

3）prompt（）方法：用于显示可可是用户进行输入的对话框。        prompt（text，defaultText）

<html>
<head>
<script language=javascript>
function display_alert()
{
	alert("I am an alert box!")
}

function display_confirm()
{
	var r=confirm("press a button")
	if(r==true)
	{
		document.write("You pressed OK!")
	}
	else
	{
		document.write("You pressed Cancel!")
	}
}

function display_prompt()
{
	var name=prompt("please enter your name","")
	if(name!=null&&name!="")
	{
		document.write("Hello "+name+"!")
	}
}
</script>
</head>

<body>
<input type="button" οnclick="display_alert()" value="Display alert box"/>
<br/>
<input type="button" οnclick="display_confirm()" value="Display a confirm box"/>
<br/>
<input type="button" οnclick="display_prompt()" value="Display a prompt box"/>
</body>
</html>

4）createPopup（）方法：用于创建一个pop-up窗口。        window.createPopup（）

<html>
<head>
<script type="text/javascript">
function show_popup()
{
	var p=window.createPopup()
	var pbody=p.document.body
	pbody.style.backgroundColor="lime"
	pbody.style.border="solid black 1px"
	pbody.innerHTML="this is a pop-up!Click outside to close."
	p.show(150,150,200,50,pbody)
}
</script>
</head>

<body>
<input type="button" οnclick="show_popup()" value="show pop-up"/>
</body>

</html>

5）setInterval（）方法：按照指定的周期（以毫秒计）来调用函数或计算表达式。它会不停的调用函数，直到clearInterval（）被调用或窗口被关闭。由setInterval返回的ID值作为clearInterval（）方法的参数。

6）clearInterval（）方法：取消由setInterval（）设置的timeout。        clearInterval(id_of_setinterval)

<html>
<body>
<script type="text/javascript">
var num =self.setInterval("clock()",50)
function clock()
{
	var t=new Date();
	document.getElementById("clock").value=t;
}
</script>

<input type="text" id="clock" size="35"/>
<input type="button" οnclick="window.clearInterval(num )" value="stop interval"/>
</body>

</html>

7)setTimeout()方法：用于在指定的毫秒数后调用函数或计算表达式。

注意：setTimeout（）只执行code一次。如果要多次调用，就要用setInterval（），或让code自身调用setTimeout（）。

8)clearTimeout()方法：取消setTimeout（）方法设置的timeout。        clearTimeout（id_of_setTimeout）

<html>
<head>
<script type="text/javascript">
var t;
var c=0;
function startTime()
{
	document.getElementById("txt").value=c;
	c=c+1;
	t=setTimeout("startTime()",1000);
}
function stopTime()
{
	clearTimeout(t)
}
function alert_msg()
{
	var v=setTimeout("alert('5 seconds')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" οnclick="startTime()"/>
<input type="text" id="txt"/>
<input type="button" value="停止计时！" οnclick="stopTime()"/>
</br>
<input type="button" value="display timeout alert" οnclick="alert_msg()"/>
</form>
</body>

</html>

        Window对象表示浏览器中打开的窗口，如果文档包含frame或iframe标签，浏览器会为HTML文档创建一个Window对象，并为每个框架创建一个额外的window对象。在客户端JavaScript中，window对象是全局对象，所有的表达式都在当前环境中计算，因此可以把窗口的属性作为全局变量来使用，例如可以只写doucment,而不必写window.document。

同样可以把窗口对象的方法当中函数使用，如只写alert()，而不必写window.alert()。

 

（2）.Document对象

每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。它是Window对象的属性。

Document对象属性

1）body：提供对<body>元素的直接访问。对于定义了框架集的文档，该属性引用最外层的<frameset>

2）cookie：设置或返回与当前文档有关的所有的cookie

3）domain：返回当前文档的域名

4）lastModified：返回文档最后被修改的日期和时间

5）referrer：返回载入当前文档的文档的URL

6）URL：返回当前文档的URL

7）title：返回当前文档的标题

<html>

<body>
<script type="text/javascript">
document.write("与当前文档有关的所有的cookie:"+document.cookie+"</br>")
document.write("当前文档的域名:"+document.domain+"</br>")
document.write("文档最后被修改的日期和时间:"+document.lastModified+"</br>")
document.write("载入当前文档的文档的URL:"+document.referrer+"</br>")
document.write("当前文档的标题:"+document.title+"</br>")
document.write("当前文档的URL:"+document.URL+"</br>")
</script>
</body>

</html>

Document对象方法

1）open（）方法：打开一个新的文档，并擦除当前文档的内容。      open("text/html",replace)        replace：当此参数设置后，可引起新文档从父文档继承历史条目

注意：调用open（）方法打开一个新文档并且用write（）方法设置文档内容后，必须用close方法关闭文档，并迫使其内容显示出来。
2）close（）方法：关闭一个由document.open（）方法打开的输出流，并显示选定的数据。

注意：一旦调用了close（），就不应该再次调用write（），因为这会隐式地调用open（）来擦除当前文档并开始一个新的文档。

<html>
<head>
<script type="text/javascript">
function newDocument()
{
	var newdoc=document.open("text/html")
	var txt="<html><body>Hello world</body></html>"
	newdoc.write(txt);
	newdoc.close()
}
function testWin()
{
	var newWin=window.open('','','width=200,height=200') 
	newWin.document.open("text/html")
	newWin.document.writeln("this is a new window hello world")
	newWin.document.close()
}
</script>
</head>

<body>
<input type="button" οnclick="newDocument()" value="new Document"/>
</br>
<input type="button" οnclick="testWin()" value="new Win"/>
</body>

</html>

3）getElementById()方法：返回对拥有指定ID的第一个对象的引用        document.getElementById(id)

4)getElementsByName()方法：返回带有指定名称对象的集合。因为文档中name的属性不可能唯一，所以getElementsByName（）方法返回的是元素的数组，而不是一个元素。

5)getElementsByTagName()方法：返回带有指定标签名的对象的集合。返回元素的顺序是它们在文档中的顺序。getElementsByTagName（"*"）表示返回文档中所有元素的列表。

注：可以用getElementsByTagName（）方法获取任何类型的HTML元素的列表，如 var tables = document.getElementByTagName("table")可以获取文档中所有的表。

HTML DOM定义了多种查找元素的方法，有getElementById()、getElementsByName（）、getElementsByTagName（），不过如果要查找文档中一个特定的元素，就要用getElemtnById（）

<html>
<head>
<script type="text/javascript">
function getBtnValue()
{
	var m=document.getElementById("btn")
	alert(m.value)	
}
function getHeaderValue()
{
	var m=document.getElementById("header")
	alert(m.innerHTML)
}
function count()
{
	var x=document.getElementsByName("mytext")
	alert(x.length)
}
function countElements()
{
	var x=document.getElementsByTagName("Input")
	alert(x.length)
}
</script>
</head>

<body>
<input type="button" id="btn" value="Click me" οnclick="getBtnValue()"/>
<h1 id="header" οnclick="getHeaderValue()">This is my header</h1></br>
<input type="text" name="mytext" id="txt1" /></br>
<input type="text" name="mytext" id="txt2" /></br>
<input type="text" name="mytext" id="txt3" /></br>
<input type="button" id="btn2" value="名为 mytext 的元素一共有多少个？" οnclick="count()"/></br>
<input type="button" id="btn3" value="How many input elements?" οnclick="countElements()"/>
</body>

</html>

6）write（）方法：向文档写HTML表达式或javaScript代码。

7）writeln()方法：等同于write（）方法，不同的是在每个表达式之后写一个换行符。

（3）Navigator对象

Navigator对象包含有关浏览器的信息。
Navigator的属性和方法

<html>
<head>
<script type="text/javascript">
document.write("<p>浏览器的代码名为："+navigator.appCodeName+"</p>")
document.write("<p>浏览器的次级版本为："+navigator.appMinorVersion+"</p>")
document.write("<p>浏览器的名称为："+navigator.appName+"</p>")
document.write("<p>浏览器的平台和版本信息为："+navigator.appVersion+"</p>")
document.write("<p>浏览器的语言为："+navigator.browserLanguage+"</p>")
document.write("<p>浏览器是否启用cookie的布尔值："+navigator.cookieEnabled+"</p>")
document.write("<p>浏览器的CUP等级："+navigator.cpuClass+"</p>")
document.write("<p>系统是否处于脱机模式的布尔值："+navigator.onLine+"</p>")
document.write("<p>浏览器的操作系统平台："+navigator.platform+"</p>")
document.write("<p>OS使用的默认语言："+navigator.systemLanguage+"</p>")
document.write("<p>客户机发送服务器的 user-agent 头部的值："+navigator.userAgent+"</p>")
document.write("<p>OS 的自然语言设置："+navigator.userLanguage+"</p>")

document.write("<p>当前浏览器是否启用java："+navigator.javaEnabled()+"</p>")
document.write("<p>当前浏览器是否启用数据污点（data tainting）："+navigator.taintEnabled()+"</p>")
</script>
</head>

</html>

Navigator对象包含的属性描述了正在使用的浏览器，可以使用这些属性进行平台的专用配置，这个实例是唯一的，可以通过window.navigator属性来应用它。

（4）Location对象

Loaction对象包含有关当前URL的信息。

<html>
<head>
<script type="text/javascript">
document.write("<p>设置或返回从井号 (#) 开始的 URL（锚)："+location.hash+"</p>")
document.write("<p>设置或返回主机名和当前 URL 的端口号："+location.host+"</p>")
document.write("<p>设置或返回当前 URL 的主机名："+location.hostname+"</p>")
document.write("<p>设置或返回完整的 URL："+location.href+"</p>")
document.write("<p>设置或返回当前 URL 的路径部分："+location.pathname+"</p>")
document.write("<p>设置或返回当前 URL 的端口号："+location.port+"</p>")
document.write("<p>设置或返回当前 URL 的协议："+location.protocol+"</p>")
document.write("<p>设置或返回从问号 (?) 开始的 URL（查询部分）："+location.search+"</p>")

function newDoc()
{
	window.location.assign("http://www.baidu.com")
}
function repalceDoc()
{
	window.location.replace("http://www.hao123.com")

}
</script>
</head>

<body>
<input type="button" value="assign()加载新文档" οnclick="newDoc()"/><br/>
<input type="button" value="replace()用新的文档替代当前文档" οnclick="repalceDoc()"/>
</body>
</html>
shadowyelling
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript学习基础笔记之DOM对象操作
01-19
DOM对象是与语言无关的API，意味着它的实现并不是与javascript绑定，这在于初学者来说可能会理解错误。DOM是针对XML的基于树的API，它关注的不仅仅是解析XML代码，而是用一系列相互关联的对象来表示这些代码，而这些...
JAVA遇见HTML——JSP篇：JSP内置对象（下）
weixin_30470643的博客
09-06 77
什么是session session表示客户端与服务器的一次会话 Web中的session指的是用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间 从上述定义中可以看到，session实际上是一个特定的时间概念 在服务器的内部中保存着不同用户的session session对象 session对象是一个JSP内置对象。...
javaScript：如何获取html中的元素对象
最新发布
qq_52799985的博客
08-09 2253
通过获取HTML中的元素对象，JavaScript可以对网页进行动态交互、更新、响应用户操作、处理表单数据、动态加载和操作页面元素等，为网页提供交互性、动态性和实时性等特性，让用户获得更好的体验和更强的互动性。
2018-08-07 javascript中的一些HTML对象
Huijiazhaomama的博客
08-08 147
HTML对象： Text对象： Text对象属性：今天学习了disabled；readOnly;value. disabled：设置或返回文本域是否应被禁用。 readOnly：设置或返回文本域是否应是只读的。 value：设置或返回文本域的 value 属性的值。 例： &lt; html&gt; ...
如何用JS操作HTML（基础）
Li5306的博客
05-17 1883
delete oYm.name => delete是操作符, oYm.name是操作数.修改style属性的backgroundColor属性,就可以让页面上的div的背景色改变.3:函数调用.每次方法的使用,都是在写函数调用表达式. => 先不考虑。数据属性都以on开头。双目运算符 => 操作数是2个的运算符.(大多数运算符都是双目)2:操作符表达式 => 不同操作符返回的值不一样的.没有=的属性是布尔属性.这种属性的属性值用js表示就是布尔值.以下对style对象的修改，实际上修改的是标签的行间样式。
js获取html对象
东隅已逝，桑榆非晚。
10-10 2246
使用js获取html对象有三种方法: getElementById, getElementsByName和getElementsByTagName。 method args result getElementById id 单个html对象 getElementsByName name 一组html对象 getElementsByTagName tagNam
JavaScript变量Dom对象的所有属性
01-19
DOM对象的HTML: 　<button>Disable State 1,遍历DOM对象所具有的属性（全部，不管是否在HTML tag中是否设置） <!DOCTYPE html> <html> <body> <button id=btnToggleState onclick=...
JavaScript 和 HTML DOM 参考手册
12-13
所有HTML DOM对象 JavaScript 对象参考手册 参考手册描述了每个对象的属性和方法，并提供了在线实例。 Array 对象 Boolean 对象 Date 对象 Math 对象 Number 对象 String 对象 RegExp 对象 全局属性和函数 ...
Javascript操作dom对象之select全面解析
12-29
html代码： 　<select id=university>...1.获取select对象； var university=document.getElementById(university); 2.获取select选中option的index值； var index=university.selectedIndex;
详解JavaScript操作HTML DOM的基本方式
11-23
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的...
[Web前端]梳理-DOM.13. window常用子对象
Cat_starpeople的博客
12-14 484
js 访问html对象属性,js常见基础对象属性方法(一)
weixin_42132352的博客
06-04 376
js基础对象属性方法Object.keys()Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历改对象时返回的顺序一致(两者的主要区别是一个for-in 循环还会枚举器原型链上的属性)//examples// simple arrayvar arr = ['a', 'b', 'c'];console.log(O...
js创建HTML对象和元素
amnotsuperior的专栏
06-17 891
var o = document.body; //创建链接 function createA(url,text) { var a = document.createElement("a"); a.href = url; a.innerHTML = text; a.style.color = "red"; o.appendChild(a); } createA("http://w
【数据结构与算法python】树的实现
思南的博客
09-09 909
方法一：树的嵌套列表实现 1、定义 借助Python List来实现二叉树树数据结构，采用递归的嵌套列表实现二叉树， 由具有3个元素的列表实现： [root，left，right] 第1个元素为根节点的值； 第2个元素是左子树（所以也是一个列表）； 第3个元素是右子树（所以也是一个列表）。 以下图为例，一个6节点的二叉树 根是myTree[0]，左子树myTree[1]，右子树myTree[2] 该树的嵌套列表表示方式如下： tree = ['a', ['b', ['d',[],[]],
HTML中前端的内置对象、数据类型和复杂数据类型
weixin_60619404的博客
02-15 479
第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是**最基本而必要的功能**（属性和方法），内置对象最大的优点就是帮助我们快速开发。​ **简单类型**（**基本数据类型**、**值类型**）：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
什么是DOM对象？如何获取DOM对象？
zy1992As的博客
06-13 2177
DOM对象本质上是浏览器根据html标签生成的 JS对象，它的所有的标签属性都可以在这个 JS对象上面找到，修改这个对象的属性会自动映射到标签身上。DOM的核心思想是把网页内容当做对象来处理。其中document 对象是DOM 里提供的一个对象，所以它提供的属性和方法都是用来访问和操作网页内容的，网页中所有的内容在document里面。document与其他网页中各个节点元素关系如下：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树。文档树模型直观的体现了标签与标签之间的关系。
HTML包含的对象,javascript有哪几种对象？
weixin_35925259的博客
06-10 1324
JavaScript中支持3种对象：内置对象(原生对象)，浏览器对象，自定义对象。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。对象包含两个要素：1、用来描述对象特性的一组数据，也就是若干变量，通常称为属性。2、用来操作对象特性的若干动作，也就是若干函数，通常称为方法。javascript的对象类型1、内置对象(原生对象)：指JavaScript语言本身预定义的对象，在ECMAScript标...
javascript——HTML对象
deng0004的博客
08-21 103
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ borde...
html5内置对象,HTML5 中最常见的内置对象
weixin_29969209的博客
06-25 345
前言我们想想要将JavaScript运用到我们的iOS开发中,我们还需要学习两个内置对象:即window和document对象.1, windowwindow的特点1> 所有的全局变量都是window的属性2> 所有的全局函数都是它的函数Window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也...
如何学习html dom对象关于定位的内容
08-05
可以使用CSS选择器或JavaScript DOM方法来选择指定的DOM对象。例如，使用getElementById()方法可以通过元素的id属性来定位DOM对象。 4. 学习DOM对象的属性和方法：掌握DOM对象的常用属性和方法可以帮助我们操作DOM...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值