Document对象详解
- 格式:ppt
- 大小:181.50 KB
- 文档页数:24
document 对象_方法document 对象是 HTML 文档的根对象,它提供了许多方法来访问和操作文档的内容。
1. document.write() 方法document.write() 方法用于向文档中写入 HTML 代码。
它可以用来创建文档的结构,添加文本、图像、链接等元素。
html<!DOCTYPE html><html><head><title>Document Write Example</title></head><body><h1>Hello World!</h1><script>document.write("<p>This is a paragraph.</p>");</script></body></html>输出结果:html<!DOCTYPE html><html><head><title>Document Write Example</title></head><body><h1>Hello World!</h1><p>This is a paragraph.</p></body></html>2. document.getElementById() 方法document.getElementById() 方法用于根据ID 属性获取文档中的元素。
它返回一个指向该元素的引用,以便我们可以对其进行操作。
html<!DOCTYPE html><html><head><title>Get Element by ID Example</title></head><body><h1 id="heading">Hello World!</h1><script>var heading = document.getElementById("heading");heading.style.color = "red";</script></body></html>输出结果:html<!DOCTYPE html><html><head><title>Get Element by ID Example</title></head><body><h1 id="heading" style="color: red;">Hello World!</h1></body></html>3. document.getElementsByTagName() 方法document.getElementsByTagName() 方法用于根据标签名获取文档中的元素。
JavaScript中的Document文档对象Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
描述当前窗口或指定窗口对象的文档。
它包含了文档从<head>到</body>的内容。
用法:document (当前窗口)或<窗口对象>.document (指定窗口)属性:∙document.title //设置文档标题等价于HTML的<title>标签∙document.bgColor //设置页面背景色∙document.fgColor //设置前景色(文本颜色)∙document.linkColor //未点击过的链接颜色∙document.alinkColor //激活链接(焦点在此链接上)的颜色∙document.vlinkColor //已点击过的链接颜色∙document.URL //设置URL属性从而在同一窗口打开另一网页∙document.fileCreatedDate //文件建立日期,只读属性∙document.fileModifiedDate //文件修改日期,只读属性∙document.fileSize //文件大小,只读属性∙document.cookie //设置和读出cookie∙document.charset //设置字符集简体中文:gb2312∙cookie 关于cookie 请参看“使用框架和Cookies”一章。
∙lastModified 当前文档的最后修改日期,是一个Date 对象。
∙referrer 如果当前文档是通过点击连接打开的,则referrer 返回原来的URL。
∙title 指<head>标记里用<title>...</title>定义的文字。
在Netscape 里本属性不接受赋值。
∙fgColor 指<body>标记的text 属性所表示的文本颜色。
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查找并返回第一个匹配的元素。
document用法js在JavaScript中,document对象是Web应用程序与浏览器交互的主要接口。
它代表了浏览器窗口中可见的文档,提供了许多属性和方法,用于处理文档的加载、显示、交互和修改等操作。
下面将详细介绍document对象的用法。
一、基本含义document对象表示浏览器窗口中当前的HTML文档。
它是一个全局对象,可以在JavaScript代码中的任何地方访问。
二、属性和方法1.属性(1)文档内容:document.documentElement属性返回文档的根元素(即<html>元素)。
(2)文档URL:document.URL属性返回当前文档的URL。
(3)文档标题:document.title属性返回当前文档的标题。
(4)文档类型:document.doctype属性返回文档类型声明对象(如果存在)。
2.方法(1)加载和显示文档:document.open()方法用于打开一个新的文档或清空现有文档的内容,以便于新的内容可以写入其中。
document.write()方法用于向文档中写入内容。
这两个方法通常一起使用,以加载并显示HTML文档。
(2)创建新元素:document.createElement()方法用于创建一个新的HTML元素,并将其添加到文档中。
(3)修改元素内容:document.getElementById()、document.getElementsByClassName()和document.getElementsByTagName()方法可用于获取文档中的元素,并对其进行操作,如修改其内容和属性。
(4)事件处理:document对象可以监听各种浏览器事件,如点击、鼠标移动、键盘输入等,并相应地执行回调函数。
常用的事件处理方法包括addEventListener()和removeEventListener()。
三、常见用法示例1.加载和显示HTML文档:```javascriptdocument.open();//打开新的文档或清空现有文档内容document.write('<html><head><title>MyTitle</title></head> <body>HelloWorld!</body></html>');//写入内容document.close();//关闭文档```2.创建新元素并添加到文档中:```javascriptvarp=document.createElement('p');//创建新的<p>元素p.textContent='Thisisanewparagraph.';//设置内容document.body.appendChild(p);//将<p>元素添加到<body>元素中```3.使用getElementById获取元素并进行操作:```javascriptvarmyElement=document.getElementById('myId');//获取具有指定ID的元素myElement.style.color='red';//修改元素的字体颜色为红色```4.事件处理示例:```javascriptdocument.getElementById('myButton').addEventListener('cli ck',function(){alert('Buttonwasclicked.');//当按钮被点击时显示警告框});```以上是document对象的一些常用属性和方法,通过这些方法可以方便地操作和处理HTML文档。
JS中document对象详解JS中document对象详解对象属性document.title //设置⽂档标题等价于HTML的<title>标签document.bgColor //设置页⾯背景⾊document.fgColor //设置前景⾊(⽂本颜⾊)document.linkColor //未点击过的链接颜⾊document.alinkColor //激活链接(焦点在此链接上)的颜⾊document.vlinkColor //已点击过的链接颜⾊document.URL //设置URL属性从⽽在同⼀窗⼝打开另⼀⽹页document.fileCreatedDate //⽂件建⽴⽇期,只读属性document.fileModifiedDate //⽂件修改⽇期,只读属性document.fileSize //⽂件⼤⼩,只读属性document.cookie //设置和读出cookiedocument.charset //设置字符集简体中⽂:gb2312---------------------------------------------------------------------对象⽅法document.write() //动态向页⾯写⼊内容document.createElement(Tag) //创建⼀个html标签对象document.getElementById(ID) //获得指定ID值的对象document.getElementsByName(Name) //获得指定Name值的对象document.body.appendChild(oTag)---------------------------------------------------------------------body-主体⼦对象document.body //指定⽂档主体的开始和结束等价于<body></body>document.body.bgColor //设置或获取对象后⾯的背景颜⾊document.body.link //未点击过的链接颜⾊document.body.alink //激活链接(焦点在此链接上)的颜⾊document.body.vlink //已点击过的链接颜⾊document.body.text //⽂本⾊document.body.innerText //设置<body>...</body>之间的⽂本document.body.innerHTML //设置<body>...</body>之间的HTML代码document.body.topMargin //页⾯上边距document.body.leftMargin //页⾯左边距document.body.rightMargin //页⾯右边距document.body.bottomMargin //页⾯下边距document.body.background //背景图⽚document.body.appendChild(oTag) //动态⽣成⼀个HTML对象----------------------------常⽤对象事件:document.body.onclick="func()" //⿏标指针单击对象是触发document.body.onmouseover="func()" //⿏标指针移到对象时触发document.body.onmouseout="func()" //⿏标指针移出对象时触发document.body.innerHTML='<br/><br/><br/>This is not at the bottom!<br/>"+document.body.innerHTML; <body>test<script>function dothis() {alert('done!');}</script><script>document.body.onclick = dothis();</script></body><SCRIPT LANGUAGE="JavaScript">for(a in document.body){document.write(a);document.write("----");document.write(document.body[a]);document.write("<br>");}</SCRIPT>var br = document.createElement("br");document.body.appendChild(br); ======================================================================location:document.location.hash // #号后的部分 VS window.location.hashdocument.location.host // 域名+端⼝号document.location.hostname // 域名document.location.href // 完整URLdocument.location.pathname // ⽬录部分(应⽤程序)document.location.port // 端⼝号document.location.protocol // ⽹络协议(http:)document.location.search // ?号后的部分----------------------------常⽤对象事件:documeny.location.reload() //刷新⽹页document.location.reload(URL) //打开新的⽹页document.location.assign(URL) //打开新的⽹页document.location.replace(URL) //打开新的⽹页URL即:统⼀资源定位符 (Uniform Resource Locator, URL)完整的URL由这⼏个部分构成:scheme://host:port/path?query#fragmentscheme:通信协议常⽤的http,ftp,maito等host:主机服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
document的用法和搭配一、什么是document?Document对象是HTML文档的根节点,在JavaScript中,它代表整个文档,是操作HTML元素的入口。
二、document的常用属性1. document.title:获取或设置文档标题。
2. document.URL:获取当前文档的URL。
3. document.domain:获取或设置文档域名。
4. document.referrer:获取当前文档的引用页面。
5. document.body:获取或设置文档主体部分。
三、document的常用方法1. getElementById():根据元素ID获取元素对象。
2. getElementsByTagName():根据标签名获取元素对象集合。
3. getElementsByClassName():根据类名获取元素对象集合。
4. querySelector():返回匹配指定CSS选择器的第一个元素对象。
5. querySelectorAll():返回匹配指定CSS选择器的所有元素对象集合。
四、document与DOM操作1. 创建新节点:```var newElement = document.createElement('div');```2. 添加子节点:```var parentElement = document.getElementById('parent'); parentElement.appendChild(newElement);```3. 删除子节点:```var parentElement = document.getElementById('parent'); var childElement = document.getElementById('child'); parentElement.removeChild(childElement);4. 替换子节点:```var parentElement = document.getElementById('parent'); var oldChild = parentElement.childNodes[0];var newChild = document.createElement('div'); parentElement.replaceChild(newChild, oldChild);```五、事件监听1. addEventListener()方法:```element.addEventListener(event, function, useCapture);```2. removeEventListener()方法:```element.removeEventListener(event, function, useCapture);六、document对象与表单操作1. 获取表单元素:```var form = document.forms[0];var input = form.elements['inputName']; ```2. 提交表单:```form.submit();```3. 重置表单:```form.reset();```七、常见问题1. 如何获取页面中所有的链接?可以使用getElementsByTagName()方法获取所有的<a>标签,然后遍历集合,获取href属性值。
document.用法
"document" 是指在网页编程中用来表示整个 HTML 文档的对象。
它是 JavaScript 中的一个内置对象,常用于访问和操作网页中的
元素和内容。
首先,我们可以使用 document 对象来访问和操作 HTML 元素。
比如,我们可以使用 document.getElementById() 方法通过元素的ID 来获取特定的元素,然后对其进行操作,比如改变其内容、样式
或者其他属性。
另外,document 对象也可以用来创建新的 HTML 元素,比如使
用 document.createElement() 方法可以创建一个新的元素节点,
然后可以通过其他方法将其添加到网页中。
除此之外,document 对象还可以用来操作整个文档的结构,比
如可以使用 document.write() 方法在文档中写入内容,或者使用document.getElementById() 方法来获取整个文档中的某个特定的
元素。
总之,document 对象在网页编程中起着非常重要的作用,它提
供了丰富的方法和属性,可以让开发者轻松地操作和控制整个 HTML 文档的内容和结构。
希望这些信息能够帮助你更好地理解 document 对象的用法。