第十五章 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代表纵向滚动。
- 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 使用的默认语言。