第十五章 JavaScript_HTML DOM对象
JavaScript练习题[精选]
![JavaScript练习题[精选]](https://img.taocdn.com/s3/m/af8eae48814d2b160b4e767f5acfa1c7aa0082ef.png)
第11章文档对象一、填空题1.文档对象也就是document对象，它代表___________的对象。
2.Document对象除了拥有大量的方法和属性之外，还拥有大量的___________，它可以用来控制HTML文档中的图片、超链接、表单元素等控件。
3.Document对象中又是由___________和___________组成的。
4.窗体对象是文档对象的一个元素，它含有多种格式的___________。
5.Document对象中包含了一些用来处理文档内容的方法，document对象支持5个基本方法：___________、___________、___________、___________和___________。
6.在HTML中的body元素中，可以通过___________属性和___________属性来设置网页背景颜色和默认的文字颜色。
7.将document对象的title属性和window对象的___________方法相结合，可以让浏览器窗口显示动态标题。
8.如果要想打开的不是THML文档，就要给___________方法传递一个参数。
9.Document对象的___________属性可以返回整个HTML文档中的所有HTML元素。
10.Document对象的anchors属性可以返回一个数组，该数组中的每一个元素都是一个___________对象，也称为___________。
二、选择题1.下列不属于文档对象的方法的是（）A.createElementB.getElementByIdC.getElementByNameD.forms.length2.分析下面这段代码运行的结果（）01<body>02<script language=”JavaScript”>03document.writeln(“文档最后修改于”+stModified);04var lastModObj=new Date(document. lastModified);05alert(lastModObj.getMinutes());06</script>07</body>A.弹出一个对象框B.没有任何输出C.在文档中显示文档最后修改的时间D.在对话框中显示文档最后修改的时间3.下列属性中表示文档中的未访问过的超链接的颜色是哪个（）A.linkColor属性B.vlinkColor属性C.alinkColor属性D.以上都不是4.分析下面这段代码运行的结果（）01<script language=”JavaScript”>02with(document)03{04writeln(“最后一次修改时间：” +stModified+”<br>”);05writeln(“标题：” +document.title+”<br>”);06writeln(“URL：” +document.URL+”<br>”);07}08</script>A.只输出最后一次修改的时间B.只输出文档的标题C.输出文档的标题、最后一次修改时间和当前的URLD.什么也不输出5.分析下面这个程序运行的结果（）<script language=”JavaScript”>01var str=”字符串”02with(document)03{04writeln(“<b>您好，</b>”);05write(“欢迎光临本网页！” +”<br>”);06writeln(“<p><b>在js标签之间，”);07writeln(str+”可以写在这里</b></p>”>;08}09</script>A.会有”<br>”这样的字符输出B.第6行输出字符后会换行C.最后页面会出错D.会有乱码出现三、编程题1、写一程序实现图片自动随机切换。
HTMLDOM对象的属性和方法介绍
HTMLDOM对象的属性和⽅法介绍HTML DOM对象的属性和⽅法介绍DOM 是 Document Object Model（⽂档对象模型）的缩写。
DOM（⽂档对象模型）是针对HTML和XML⽂档的⼀个API（应⽤程序编程接⼝），它允许程序和脚本动态地访问和更新⽂档的内容，结构和样式。
W3C DOM 标准被分为 3 个不同的部分：核⼼ DOM - 针对任何结构化⽂档的标准模型XML DOM - 针对 XML ⽂档的标准模型HTML DOM - 针对 HTML ⽂档的标准模型HTML DOM 定义了所有 HTML 元素对象的属性，以及访问它们的⽅法，我们可以通过 Javascript 获取，修改，添加和删除 HTML 元素。
HTML DOM 对象有⼏种类型：1.Document 类型在浏览器中，Document 对象表⽰整个 HTML ⽂档。
1.1属性引⽤⽂档的⼦节点documentElementvar html = document.documentElement; //取得对<html>元素的引⽤bodyvar body = document.body; //取得对<body>元素的引⽤获取⽂档信息title通过 title 属性可以访问当前⽂档的标题，也可以修改当前⽂档的标题。
var originalTitle = document.title; //返回当前⽂档的标题document.title = "New title"; //修改当前⽂档的标题URL该属性返回当前页⾯完整的 URL，也就是浏览器地址栏中的全部地址信息。
⽐如我打开了⼀个页⾯，浏览器地址栏中的信息显⽰如下：/cqhaibin/p/6291640.html这些信息就是当前⽂档完整的 URL。
var url = document.URL;//返回当前⽂档完整的URLdomain该属性返回当前⽂档的服务器域名。
DOM对象
二，节点
根据 DOM，HTML 文档中的每个成 分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点
节点层次
节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个 文档树（或节点树）。HTML 文档中的每 个元素、属性、文本等都代表着树中的一 个节点。树起始于文档节点，并由此继续 伸出枝条，直到处于这棵树最低级别的所 有文本节点为止。
getElementById() 和 getElementsByTagName()
这两种方法，可查找整个 HTML 文档 中的任何 HTML 元素，会忽略文档的结构。 节点列表（nodeList） 当我们使用节点列表时，通常要把此 列表保存在一个变量中。 您可以通过使用 length 属性来循环遍 历节点列表：
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分（核心、XML及 HTML）和级别（DOM Level 1/2/3）： Core DOM 定义了一套标准的针对任何结构化文档的对 象 XML DOM 定义了一套标准的针对 XML 文档的对象 HTML DOM 定义了一套标准的针对 HTML 文档的对象。
2，anchors anchors 集合可返回对文档中所有 Anchor 对象的引用。 3，forms forms集合可返回对文档中所有 Form 对象 的引用。 4，images images集合可返回对文档中所有 Image 对 象的引用。 5，links Links集合可返回对文档中所有 Area 和 Link 对象的引用。
JavaScript中的DOM操作和事件处理
JavaScript中的DOM操作和事件处理DOM（文档对象模型）是JavaScript操作HTML文档的基础。
通过DOM，我们可以通过JavaScript来访问、修改和操作HTML元素、属性以及样式等。
同时，JavaScript还可以通过事件处理来响应用户的操作。
本文将详细介绍JavaScript中的DOM操作和事件处理的相关知识。
一、DOM操作1. 访问元素在JavaScript中，我们可以通过不同的方式来访问HTML元素。
常用的方法有getElementById、getElementsByClassName和getElementsByTagName。
例如，要访问id为"myElement"的元素，我们可以使用以下代码：```javascriptvar element = document.getElementById("myElement");```2. 修改元素内容一旦我们访问到了HTML元素，就可以通过修改其内容来实现动态效果。
可以使用innerHTML属性来改变元素的内容。
例如，要将一个段落的内容修改为"Hello, World!"，可以使用以下代码：```javascriptelement.innerHTML = "Hello, World!";```3. 修改元素样式在JavaScript中，可以通过style属性来修改元素的样式。
可以直接修改样式的属性，也可以通过设置className来改变元素的类。
例如，要将一个按钮的背景颜色修改为红色，可以使用以下代码：```javascriptelement.style.backgroundColor = "red";```4. 创建和添加元素除了修改现有元素，我们还可以通过JavaScript来创建元素并将其添加到HTML文档中。
可以使用createElement和appendChild方法来实现。
JAVASCRIPTDOM对象介绍
JAVASCRIPTDOM对象介绍JavaScript DOM（Document Object Model）是指文档对象模型，它是一种编程接口，它允许开发者以编程的方式操作HTML和XML文档。
DOM将文档表示为一个树形结构，每个节点代表文档中的一个元素、属性或文本。
在JavaScript中，DOM对象是一个接口，它提供了一组属性和方法，用于访问、操作和修改文档的内容、结构和样式。
通过使用DOM对象，开发者可以动态地更新网页内容、响应用户的交互、创建动态效果等。
DOM对象主要包括以下几种类型：1. Document对象：代表整个文档，是DOM树的根节点。
可以通过document对象访问文档的各个部分，如头部、主体、表单等。
2. Element对象：代表文档中的元素，如div、p、span等。
Element对象提供了一系列方法和属性，用于操作元素的内容、样式、属性等。
3. Node对象：代表DOM树中的节点，包括元素节点、文本节点、注释节点等。
所有的节点都继承自Node对象，提供了一些通用的属性和方法。
4. Event对象：代表事件，可以通过event对象获取触发事件的相关信息，如事件的类型、目标元素、鼠标位置等。
通过操作DOM对象，开发者可以实现以下功能：1. 修改元素的内容：可以通过innerHTML、innerText等属性修改元素的内容，也可以通过createElement、appendChild等方法创建新的元素并添加到文档中。
2. 修改元素的样式：可以通过style属性设置元素的样式，比如颜色、字体大小、背景色等。
3. 添加事件监听器：可以通过addEventListener方法为元素添加事件监听器，监听用户的交互行为，如点击、滚动、键盘输入等。
4. 操作表单数据：可以通过form对象和input对象访问用户输入的表单数据，对表单进行验证、提交等操作。
5. 动态创建动画效果：可以通过定时器、CSS动画、transform等属性和方法实现动态的效果，如轮播图、滚动效果等。
JAVASCRIPTDOCUMENT对象属性和方法
JAVASCRIPTDOCUMENT对象属性和方法JavaScript的Document对象是用于对HTML文档进行访问和操作的核心对象。
它提供了一系列属性和方法，用于获取、设置和操作文档的各个部分，包括元素、样式、事件等。
下面将介绍一些Document对象的常用属性和方法。
一、属性：1. document.documentElement：返回文档中的根元素，即<html>元素。
2. document.body：返回文档中的<body>元素。
3. document.head：返回文档中的<head>元素。
4. document.title：获取或设置文档的标题。
5. document.URL：获取当前文档的URL。
6. document.domain：获取或设置当前文档的域名。
7. document.forms：返回文档中所有的<form>元素，以HTMLCollection对象的形式返回。
8. document.links：返回文档中所有的<a>元素，以HTMLCollection对象的形式返回。
9. document.images：返回文档中所有的<img>元素，以HTMLCollection对象的形式返回。
10. document.scripts：返回文档中所有的<script>元素，以HTMLCollection对象的形式返回。
11. document.defaultView：返回当前文档关联的窗口对象。
12. document.styleSheets：返回文档中所有的样式表，以StyleSheetList对象的形式返回。
13. document.activeElement：返回当前文档中获得焦点的元素。
二、常用方法：1. document.getElementById(id)：根据元素id查找并返回第一个匹配的元素。
javascriptdocument 方法
javascriptdocument 方法JavaScript Document 对象及其方法JavaScript Document 对象是HTML DOM 的一部分，表示当前加载的网页文档。
它提供了一组用于操作和访问网页中各个元素的方法和属性。
本文将介绍一些常用的Document 方法，并逐步回答问题。
一、document.getElementById()document.getElementById() 方法通过指定的元素id 返回对该元素的引用。
该方法在DOM 中被广泛使用，用于获取页面中的特定元素并对其进行操纵。
获取id 为"myElement" 的元素const element = document.getElementById("myElement");问题1：如何使用document.getElementById() 方法获取页面上特定元素？要使用document.getElementById() 方法，首先需要在获取的元素上添加一个唯一的id 属性，然后将该id 作为参数传递给该方法。
方法返回一个对该元素的引用，可以通过该引用进行各种操作。
例如，假设页面上有一个按钮元素：<button id="myButton">Click Me</button>可以使用document.getElementById() 方法获取该按钮元素的引用：const button = document.getElementById("myButton");二、document.getElementsByTagName()document.getElementsByTagName() 方法返回指定标签名的元素集合。
该方法可用于获取页面中具有相同标签的一组元素。
获取所有的<p> 元素问题2：如何使用document.getElementsByTagName() 方法获取所有p 元素？要使用document.getElementsByTagName() 方法获取所有p 元素，只需将"p" 作为参数传递给该方法即可。
HTML静态网页--JavaScript-DOW操作
HTML静态⽹页--JavaScript-DOW操作1、DOM的基本概念DOM是⽂档对象模型，这种模型为树模型；⽂档是指标签⽂档；对象是指⽂档中每个元素；模型是指抽象化的东西。
2、Windows对象操作⼀、属性和⽅法：属性（值或者⼦对象）：opener:打开当前窗⼝的源窗⼝，如果当前窗⼝是⾸次启动浏览器打开的，则opener是null。
dialogArgument：对话框返回值。
⼦对象：history,location,document,status,menubar,toolbar等。
⽅法（函数）：事件（事先设置好的程序，被触发）。
⼆、Window.open（"第⼀部分"，"第⼆部分"，"第三部分"，"第四部分"）Window.open的特征参数：第⼀部分：写页⾯地址。
第⼆部分：_blank 打开的⽅式，在新窗⼝还是⾃⾝的窗⼝。
第三部分：控制打开的窗⼝格式，可以写多个，⽤空格隔开如下：toolbar=no新打开的窗⼝⽆⼯具条；menubar=no⽆菜单栏 status=no⽆状态栏；width=100 height=100 宽度⾼度；left=100 打开的窗⼝距离左边多少距离；resizable=no窗⼝⼤⼩不可调；scrollbars=yes 出现滚动条；location=yes 有地址栏；Window.open也有返回值，它的返回值是：新打开的窗⼝对象。
例如：最简单的打开窗⼝：window.open("Untitled-6.html");打开⼀个窗⼝并保存在变量中：var w= window.open()；可以将打开的多个窗⼝保存在数组w⾥：function openW(){w[i++]=window.open();}三、window.close()：关闭当前窗⼝；w.close()：关闭保存在变量w中的那个窗⼝；关闭多个⼦窗⼝：先将打开的窗⼝存⼊数组内，利⽤循环将其挨个关闭；关闭打开当前窗⼝的源窗⼝： window.opener.close()；四、间隔与延迟间隔执⾏⼀段代码（函数）：window.setInterval("要执⾏的代码"，间隔的毫秒数)清除间隔执⾏：window.clearInterval(间隔的id); 循环⼀次之后⽤来清除隔执⾏的代码延迟⼀段时间执⾏某⼀段代码（函数）：window.setTimeout("要执⾏的代码"，延迟的毫秒数)清除延迟：window.clearTimeout(延迟的id)；清除setTimeout五、调整页⾯window.navigate("url") 跳转⾄⽬标页⾯，在⾕歌浏览器下有bug；window.moveTo(x,y) 移动页⾯⾄某⼀位置，位置由x和y决定；window.resizeTo(宽，⾼) 调整页⾯的宽度和⾼度；window.scrollTo（x,y）滚动页⾯⾄哪⾥，y代表纵向滚动。
javascript获取HTMLDOM对象八种方式
javascript获取HTMLDOM对象八种方式获取DOM对象有7种方式：1.document.getElementById('id');//返回结果是一个对象，如果存在两个标签拥有相同id，则返回第一个标签对象。
2.document.getElementsByTagName('标签名')；//返回结果是一个对象集合，以数组形式放在一起3.document.getElementsByName('标签name属性的值')；//返回结果是一个对象集合，以数组形式放在一起4.document.getElementsByClassName('类名');返回一个对象集合，以数组形式放在一起。
5.通过this参数给函数传递受监控对象给函数。
6.document.querySelectorAll(".cell");//类选择器7.document.querySelectorAll("td");//标签选择器8.document.querySelectorAll("#btn1");//地址选择器1.document.getElementById();<!DOCTYPE html><html><head><style>#myBtn{height: 100px;width: 100px;background:#eeeeee;bo rder: 1px,solid black;}</style></head><body><div id="myBtn" onclick="get()" name="a">aaaaaaaaaa</d iv><div id="myBtn" onclick="get()" name="a">bbbbbbbbb</<div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="get()" name="a">ddddddddddd </div><script>function get(){//document.getElementById('myBtn') 通过id号获取对象var x=document.getElementById('myBtn');//返回一个对象，多个相同id，选择第一个alert(x.innerHTML);}</script></body></html>2.document.getElementsTagName('标签名')；<!DOCTYPE html><html><head><style>#myBtn{height: 100px;width: 100px;background:#eeeeee;bo rder: 1px,solid black;}</style></head><body><div id="myBtn" onclick="get()" name="a">aaaaaaaaaa</d<div id="myBtn" onclick="get()" name="a">bbbbbbbbb</ div><div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="get()" name="a">ddddddddddd </div><script>function get(){//document.getElementsByTagName('myBtn') 通过标签名获取var x=document.getElementsByTagName('div');//返回一个对象集合，以数组形式放在一起alert(x[0].innerHTML);alert(x[1].innerHTML);alert(x[2].innerHTML);alert(x[3].innerHTML);}</script></body></html>3.document。
js document用法
js document用法JavaScript中的document对象是浏览器提供的一个内置对象，它表示当前文档（也就是HTML文档）的根节点。
通过document对象，我们可以访问和操作HTML文档的各个部分，包括元素、属性、样式、事件等。
1. 获取元素使用document对象的getElementById方法可以根据元素的id属性获取到指定的元素节点。
例如，要获取id为"myElement"的元素节点，可以使用以下代码：```var element = document.getElementById("myElement");```除了getElementById方法，document对象还提供了其他获取元素的方法，比如querySelector、querySelectorAll等，可以根据选择器来获取元素。
2. 操作元素获取到元素后，我们可以使用document对象提供的方法和属性来操作该元素。
例如，要设置元素的内容，可以使用innerHTML属性：```element.innerHTML = "Hello, world!";```要获取或设置元素的样式，可以使用style属性：```element.style.color = "red";```要添加或移除元素的类名，可以使用classList属性：```element.classList.add("myClass");element.classList.remove("myClass");```除了以上常用的操作方法和属性外，document对象还提供了其他许多方法和属性，比如getAttribute、setAttribute、appendChild、removeChild等，可以根据需要进行使用。
3. 创建元素除了操作现有的元素外，我们还可以使用document对象来创建新的元素。
javascript document用法
javascript document用法JavaScript的Document对象是Web页面中的一个核心对象，它代表了整个HTML文档。
Document对象提供了许多有用的方法和属性，用于操作和处理HTML元素。
1. 获取HTML元素Document对象提供了多种方法来获取HTML元素。
以下是一些常用的方法：- getElementById(id)：根据元素的id属性获取元素。
- getElementsByClassName(className)：根据元素的class属性获取元素。
- getElementsByTagName(tagName)：根据元素的标签名获取元素。
- querySelector(selector)：根据CSS选择器获取元素。
- querySelectorAll(selectors)：根据CSS选择器获取所有匹配的元素。
2. 操作HTML元素Document对象还提供了一些方法和属性，用于操作HTML元素。
以下是一些常用的方法和属性：- createElement(tagName)：创建一个新的HTML元素。
- createTextNode(text)：创建一个包含指定文本内容的文本节点。
- innerHTML：获取或设置元素的HTML内容。
- className：获取或设置元素的class属性。
- style：获取或设置元素的样式属性。
3. 修改页面内容Document对象还可以用于修改页面的内容。
以下是一些常用的方法：- appendChild(node)：在指定元素中插入一个新的子节点。
- removeChild(node)：从指定元素中移除一个子节点。
- replaceChild(newNode, oldNode)：用新的节点替换指定元素中的旧节点。
- write(text)：将指定的文本字符串写入HTML文档。
4. 获取页面信息Document对象还可以获取有关当前页面的信息。
第二十一讲 JavaScript HTML DOM 对象(二)
第二十一讲 JavaScript HTML DOM 对象(二)一、HTML DOM 对象概述HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
通过 JavaScript可以重构整个 HTML 文档。
包括添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。
这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的。
在 1998 年，W3C 发布了第一级的 DOM 规范。
DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
这个规范允许访问和操作 HTML 页面中的每一个单独的元素。
目前所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。
1.相关概念1节点DOM 是这样规定的：整个文档是一个文档节点；每个 HTML 标签是一个元素节点；包含在 HTML 元素中的文本是文本节点；每一个 HTML 属性是一个属性节点；注释属于注释节点。
因此根据 DOM的规定，我们可以认为在HTML 文档中的每个成分都是一个节点。
2Node 层次节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。
HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
下面这个图片表示一个文档树（节点树）：3文档树（节点数）请看下面这个HTML文档：<html><head><title>DOM Tutorial</title></head><body><h1>DOM Lesson one</h1><p>Hello world!</p></body></html>上面所有的节点彼此间都存在关系。
HTML DOM
JavaScript HTML DOM通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM （文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应查找 HTML 元素 通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。
有三种方法来做这件事：通过 id 找到 HTML 元素 通过标签名找到 HTML 元素 通过类名找到 HTML 元素通过 id 查找 HTML 元素在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
实例 本例查找 id="intro" 元素：var x=document.getElementById("intro");亲自试一试如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。
通过标签名查找 HTML 元素本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：var x=document.getElementById("main"); var y=x.getElementsByTagName("p");提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
JavaScript中将html字符串转化为Jquery对象或者Dom对象
JavaScript中将html字符串转化为Jquery对象或者Dom对象实例代码：$('<a href="javascript:void(0);" onclick="showUI(this,"4028f65d5d1bb627015d1c297ecf0006")" title="查看详细信息">就是上次</a>').text() //结果：就是上次$($.currentIframe().$("#gridTable").jqGrid("getRowData")[0].name).text()jQuery与DOM对象互转 从硬编码的html字符串中提取⾃⼰想要的元素以及属性信息。
但是在js中或者jQuery中操作元素节点以及属性都是使⽤DOM对象或者jquery对象。
下⾯将介绍如何把html字符串转为Jquery对象或者DOM对象。
原html字符串：var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"+ "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"+ "</div>";1、Jquery将text字符串转变成jQuery对象$(text).html()其中$(text)就text字符串转为了⼀个Jquery对象，最后将该Jquery对象的html()将html内容以字符串的形式输出，结果如下： <img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/> 说明了，$(text)Jquery对象代表的是最外层的html元素div。
javascript document的用法
HTML DOM Document 对象Document 对象Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。
Document 对象是Window 对象的一个部分，可通过window.document 属性来访问。
有关Document 对象的详细描述。
IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet 标准).Document 对象的集合集合描述IE F O W3C all[]提供对文档中所有 HTML 元素的访问。
4 1 9 Yes anchors[]返回对文档中所有 Anchor 对象的引用。
4 1 9 Yes applets 返回对文档中所有 Applet 对象的引用。
- - - - forms[]返回对文档中所有 Form 对象引用。
4 1 9 Yes images[]返回对文档中所有 Image 对象引用。
4 1 9 Yeslinks[]返回对文档中所有 Area 和 Link 对象引用。
4 1 9 Yes Document 对象的属性属性描述IE F O W3Cbody 提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie设置或返回与当前文档有关的所有 cookie。
4 1 9 Yes domain返回当前文档的域名。
4 1 9 Yes lastModified返回文档被最后修改的日期和时间。
4 1 No No referrer返回载入当前文档的文档的 URL。
4 1 9 Yes方法描述IE F O W3C4 1 9 Yesclose()关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()返回对拥有指定 id 的第一个对象的引用。
dom对象常用方法
dom对象常用方法DOM对象常用方法是指在JavaScript中常用于操作DOM（文档对象模型）的方法。
DOM是浏览器将HTML文档转换为树结构形式的表示，通过DOM对象方法，可以对HTML元素进行检索、修改和删除等操作。
1. getElementById：这个方法通过元素的id属性值返回匹配的元素。
例如，可以使用`document.getElementById("myId")`获取页面上具有id为“myId”的元素。
2. getElementsByTagName：这个方法通过元素的标签名返回匹配的元素集合。
例如，可以使用`document.getElementsByTagName("div")`获取页面上所有的div元素。
3. getElementsByClassName：这个方法通过元素的类名返回匹配的元素集合。
例如，可以使用`document.getElementsByClassName("myClass")`获取页面上所有具有类名为“myClass”的元素。
4. querySelector：这个方法通过CSS选择器返回匹配的第一个元素。
例如，可以使用`document.querySelector("#myId")`根据id选择器获取页面上第一个具有id为“myId”的元素。
5. querySelectorAll：这个方法通过CSS选择器返回匹配的所有元素集合。
例如，可以使用`document.querySelectorAll(".myClass")`根据类选择器获取页面上所有带有类名为“myClass”的元素。
6. createElement：这个方法创建一个指定标签名的新元素。
例如，可以使用`document.createElement("div")`创建一个div元素。
jspDOM对象
JavaScript HTML DOM 对象∙Previous Page∙Next Page除了内置的JavaScript 对象以外，你还可以使用JavaScript 访问并处理所有的HTML DOM 对象。
更多JavaScript 对象点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。
对象描述Window JavaScript 层级中的顶层对象。
Window 对象表示浏览器窗口。
每当<body> 或者<frameset> 标签出现，Window 对象就会被自动创建。
Navigator包含客户端浏览器的信息。
Screen包含客户端显示屏的信息。
History包含了浏览器窗口访问过的URL。
Location包含了当前URL的信息。
HTML DOMHTML DOM 是W3C 标准（是HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
HTML DOM 定义了用于HTML 的一系列标准的对象，以及访问和处理HTML 文档的标准方法。
通过DOM，可以访问所有的HTML 元素，连同它们所包含的文本和属性。
可以对其中的内容进行修改和删除，同时也可以创建新的元素。
HTML DOM 独立于平台和编程语言。
它可被任何编程语言诸如Java、J avaScript 和VBScript 使用。
点击下面的链接，可获得更多关于如何使用JavaScript 来访问和处理DOM 对象的知识：对象描述Document代表整个HTML 文档，用来访问页面中的所有元素。
Anchor代表<a> 元素。
Area代表图像地图中的<area> 元素。
Base代表<base> 元素。
Body代表图像地图中的<body> 元素。
Button代表<button> 元素。
Event代表事件的状态Form代表<form> 元素Frame代表<frame> 元素Frameset代表<frameset> 元素Iframe代表<iframe> 元素Image代表<img> 元素Input button代表HTML 表单中的按钮Input checkbox代表HTML 表单中的选择框Input file代表HTML 表单中的fileupload 。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
replace("url") 通过加载 URL 指定的文档来替换当前文档
示例代码
<FORM name="form1" method="post" action=""> …… <TD width="4%"><A href="javascript: history.back( )">返回 </A></TD> <TD width="4%"><A href="javascript: history.forward( )">前进</A></TD> <TD width="4%"><A href="javascript: location.reload( )">刷新</A></TD> 添加选项改 <TD width="6%"><A href="../index.html">首页</A></TD> 变事件 跳转到其他版块 <SELECT name="selTopic" id="selPTopic" onChange="javascript: location.href=this.value"> <OPTION value="news.html" selected="selected">新闻贴图</OPTION> <OPTION value="gard.html">网上谈兵</OPTION> <OPTION 获取被选中的 value="IT.html">IT茶馆</OPTION> <OPTION value="education.html" selected >教育大家谈</OPTION> 下拉菜单项 </SELECT> value的值 </FORM>
<p> 要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称： </p> <script type="text/javascript"> document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>") document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>") </script>
方法
名称
back( ) forward( )
说明
加载 History 列表中的上一个 URL。 加载 History 列表中的下一个 URL。
go("url" or number)
加载 History 列表中的一个 URL，或 要求浏览器移动指定的页面数。
back ( )方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进1页，等价于forward( )方法； go(-1) 代表后退1页，等价于back( )方法；
Document 对象属性
Document 对象属性
属性 body
cookie domain lastModified referrer title URL
描述
提供对 <body> 元素的直接访问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。 设置或返回与当前文档有关的所有 cookie。 返回当前文档的域名。 返回文档被最后修改的日期和时间。 返回载入当前文档的文档的 URL。 返回当前文档的标题。 返回当前文档的 URL。
集合 all[] anchors[] applets 描述 提供对文档中所有 HTML 元素的访问。 返回对文档中所有 Anchor 对象的引用。 返回对文档中所有 Applet 对象的引用。
forms[]
images[] links[]
返回对文档中所有 Form 对象引用。
返回对文档中所有 Image 对象引用。 返回对文档中所有 Area 和 Link 对象引用。
使用Location 对象
属性
名称 host hostname href 说明 设置或检索位置或 URL 的主机名和端口号 设置或检索位置或 URL 的主机名部分 设置或检索完整的 URL 字符串
方法
名称 assign("url") reload() 说明 加载 URL 指定的新的 HTML 文档。 重新加载当前页
</script> </head> <body onmousedown="coordinates(event)"> <p> 在文档中点击某个位置。消息框会提示出指针相对于屏幕的 x 和 y 坐标。 </p> </body>
Event 对象
例3: 判断是否按下了shift键
<head> <script type="text/javascript"> function isKeyPressed(event) { if (event.shiftKey==1) { alert("The shift key was pressed!") } else { alert("The shift key was NOT pressed!") } } </script> </head>
<body onmousedown="isKeyPressed(event)"> <p>在文档中点击某个位置。消息框会告诉你是否按下了 shift 键。</p> </body>
ent 对象
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。可以通过脚本对 HTML 页面中的所有元素进 行访问。 Document对象集合
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
updateInterval
width
设置或返回屏幕的刷新率。
返回显示器屏幕的宽度。
Screen 对象属性
获取当前窗口 <SCRIPT language="javascript"> 获取当前窗口 屏幕高度 function openwindow( ) { 屏幕宽度 window.status="系统当前状态：您正在注册用户......"; if (window.screen.width == 1024 && window.screen.height == 768) open("register.html", "注册窗口", "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1"); 使用 Open 方法 else 打开注册新窗口 window.alert("请设置分辨率为1024x768，然后再打开"); } function closewindow( ) { if(window.confirm("您确认要退出系统吗？")) window.close( ); } 添加单 </SCRIPT> 击事件 <INPUT type="button" name="regButton" value=" 用户注册 " onclick="openwindow( )"> <INPUT type="button" name="exitButton" value=" 退 出 " onclick="closewindow( )">
Screen 对象属性
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
属性 availHeight availWidth deviceXDPI deviceYDPI height pixelDepth 描述 返回显示屏幕的高度 (除 Windows 任务栏之外)。 返回显示屏幕的宽度 (除 Windows 任务栏之外)。 返回显示屏幕的每英寸水平点数。 返回显示屏幕的每英寸垂直点数。 返回显示屏幕的高度。 返回显示屏幕的颜色分辨率（比特每像素）。
Document 对象
例2:访问集合中的项目
<body> <form id="Form1" name="Form1"> 您的姓名：<input type="text"> </form> <form id="Form2" name="Form2"> 您的汽车：<input type="text"> </form>
返回当前浏览器的语言。 返回指明浏览器中是否启用 cookie 的布尔值。 返回运行浏览器的操作系统平台。 返回 OS 使用的默认语言。