[JS]document对象详解

合集下载

js document对象获取元素的方法

一、介绍JavaScript（简称JS）是一种脚本语言，被广泛应用于网页开发中。

在JS中，document对象是用来表示整个HTML或者XML文档的对象，它提供了操作文档的方法和属性。

在网页开发中，经常需要使用document对象来获取元素，从而进行相应的操作。

本文将介绍JS中document对象获取元素的方法。

二、getElementById方法1. document.getElementById()方法是通过元素的id属性来获取指定元素的引用。

2. 使用该方法，需要在HTML中指定相应元素的id属性。

3. 该方法的语法如下：var element = document.getElementById("id");其中，id为指定元素的id。

三、getElementsByClassName方法1. document.getElementsByClassName()方法是通过元素的class 属性来获取指定元素的引用。

2. 该方法会返回包含指定类名的所有元素的集合。

3. 该方法的语法如下：var elements =document.getElementsByClassName("classname");其中，classname为指定元素的class名称。

四、getElementsByTagName方法1. document.getElementsByTagName()方法是通过元素的标签名来获取指定元素的引用。

2. 该方法会返回包含指定标签名的所有元素的集合。

3. 该方法的语法如下：var elements =document.getElementsByTagName("tagname");其中，tagname为指定元素的标签名。

五、querySelector方法1. document.querySelector()方法是通过CSS选择器来获取指定元素的引用。

document对象以及应用.wps

document对象以及应用Document对象在Dom中处于核心地位，其实我们把Dom树称为Document对象，在JavaScript中，document对象就是浏览器的内置对象，因此具有document对象的所有属性和方法。

Document对象是特殊的Node对象，但是对于Document来说我们更重要的是看重Document的方法。

document具有创建其他任何节点的能力，比如能够正常创建Element，TextNode，Attribute节点等，具体的方法如下：F代表FireFox：属性描述IE F W3adoptNode(sourcenode)从另一个文档向此文档选取一个节点，然后返回被选取的节点YescreateAttribute(name)创建拥有指定名称的属性节点，并返回新的Attr 对象。

61YescreateAttributeNS(uri,name)创建拥有指定名称和命名空间的属性节点，并返回新的Attr 对象。

YescreateCDATASection()创建CDATA 区段节点。

51Yes createComment()创建注释节点。

61YescreateDocumentFragment()创建空的DocumentFragment 对象，并返回此对象。

51YescreateElement()创建元素节点。

51YescreateElementNS()创建带有指定命名空间的元素节点。

No1YescreateEntityReference(name)创建EntityReference 对象，并返回此对象。

5YescreateProcessingInstruction (target,data)创建ProcessingInstruction 对象，并返回此对象。

5YescreateTextNode()创建文本节点。

51YesgetElementById(id)返回拥有带有给定值的ID 属性的元素。

Document对象详解

第一章文档中的对象
• 使用Document对象可以访问文档中的对象，文档中的对象包括HTML元素，超链接，锚点和图像等。
1.1 HTML元素
• 在javascript中，为Document对象定义了all 属性来访问文档中的所有HTML元素对象。 • 通过Document对象使用all属性，得到文档中的所有HTML元素对象组成的数组。因此所有对数组的操作都可以应用在all属性的结果。
第四章文档事件
• 在文档中有两个非常重要的事件，那就是鼠标事件和键盘事件。在鼠标事件和键盘事件中又有很多更加具体的事件。在前面的学习中已经知道，可以使用对象来调用它们，也可以将事件放在 body标记中，这些对前面学过的事件是可行的。 • 但是对于鼠标事件和键盘事件来说不可以了，因为这与浏览器有关。在ie浏览器中，只能把事件放在body标记中；在NN浏览器中，只能把事件通过对象来调用。
1.5表单
• 在javascript中，为document对象定义了forms属性来对文档中的表单进行操作，同样使用forms属性可以得打文档中所有表单的数组，使用数组的 length属性可以得到表单的个数，使用数组小标来得到特定的表单。 • 在实际应用中，通常都会为每个表单定义名称，所以都会使用表单名称来得到指定的表单。除了使用表单名称作为数组的索引外，还可以直接使用名称作为属性来使用，其基本形式为： • Document.formname
2.3 文档标题
• 在javascript中，为Document对象定义了 title属性来获得文档的标题。文档标题是文档中一个很小的知识点，在HTMl文件中 TITLE标记对中的就是文档的标题。前面已经讲到过，TITLE标记可以省略，但是文档的标题任然存在，知识为空。

jsdocument方法

jsdocument方法js document(JavaScript Document)是JavaScript中的一个内置对象，它代表当前的网页文档。

在网页中，我们可以使用js document对象来访问和操作网页中的元素、样式、事件等。

本文将详细介绍js document的常用方法和用法。

一、js document的基本用法1. 获取元素js document提供了多种方法来获取网页中的元素，常用的方法有：- getElementById(id)：根据元素的id属性获取元素。

- getElementsByTagName(tagName)：根据元素的标签名获取元素集合。

- getElementsByClassName(className)：根据元素的class属性获取元素集合。

- querySelector(selector)：根据选择器获取匹配的第一个元素。

- querySelectorAll(selector)：根据选择器获取所有匹配的元素集合。

2. 修改元素内容和样式js document提供了一系列方法来修改元素的内容和样式，常用的方法有：- innerHTML：获取或设置元素的HTML内容。

- innerText：获取或设置元素的文本内容。

- style.property：获取或设置元素的样式属性。

3. 创建和插入元素js document可以通过createElement方法创建新的元素，然后使用appendChild方法将新元素插入到指定位置。

4. 添加事件监听器js document可以使用addEventListener方法为元素添加事件监听器，以响应用户的操作。

二、示例代码以下是一个使用js document的示例代码，用于实现点击按钮时改变文本内容的功能：```html<!DOCTYPE html><html><head><title>js document示例</title></head><body><button id="btn">点击我</button><p id="text">初始文本</p><script>// 获取按钮元素var btn = document.getElementById("btn");// 获取文本元素var text = document.getElementById("text");// 添加点击事件监听器btn.addEventListener("click", function() {// 修改文本内容text.innerHTML = "点击按钮后的文本";});</script></body></html>```以上代码中，通过getElementById方法获取到按钮和文本元素，然后使用addEventListener方法为按钮添加点击事件监听器。

document的用法

document的用法document 是 JavaScript 中的一个重要对象，它代表整个 HTML 文档。

我们可以通过 document 对象来访问和操作网页的各个部分。

常见的 document 对象的用法如下：1. 获取元素：可以使用 document.getElementById() 方法通过元素的 id 获取到某个元素节点，例如：```javascriptconst element = document.getElementById("myElement");```2. 操作元素的内容：可以使用 element.innerHTML 属性来获取或设置元素节点的 HTML 内容，例如：```javascriptconst element = document.getElementById("myElement"); element.innerHTML = "<strong>Hello, world!</strong>";```3. 操作元素的样式：可以使用 element.style 属性来获取或设置元素节点的样式，例如：```javascriptconst element = document.getElementById("myElement"); element.style.color = "red";element.style.fontSize = "24px";```4. 创建元素：可以使用 document.createElement() 方法来创建一个新的元素节点，例如：```javascriptconst newElement = document.createElement("p"); newElement.innerHTML = "This is a new paragraph.";```5. 添加元素：可以使用 element.appendChild() 方法将一个新的元素节点添加到某个元素节点的子节点列表末尾，例如：```javascriptconst parentElement =document.getElementById("parentElement"); parentElement.appendChild(newElement);```6. 移除元素：可以使用 element.remove() 方法将某个元素节点从文档中移除，例如：```javascriptconst element = document.getElementById("myElement"); element.remove();```除了上述用法外，document 对象还提供了许多其他方法和属性，用于操作文档结构、获取事件相关信息等等。

Document文档对象

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 属性所表示的文本颜色。

js document用法

js document用法JavaScript中的document对象是访问和操作HTML文档中元素的重要工具。

它提供了许多函数和方法，可以在网页中实现动态交互和操作。

document对象可以用来访问和获取HTML中的元素。

使用document对象的getElementById()方法，我们可以通过元素的id属性获取该元素的引用。

比如，通过调用document.getElementById("myElement")，我们可以获取id 为"myElement"的元素，并对其进行进一步操作。

除了通过id获取元素，我们还可以使用其他方法来选择元素。

例如，使用document.getElementsByClassName("myClass")可以获取具有指定类名的所有元素，并以数组的形式返回。

类似地，使用document.getElementsByTagName("div")可以获取指定标签名的所有元素。

一旦我们获取了元素的引用，就可以使用document对象的属性和方法来操作它们。

其中最常用的是innerHTML属性，它可以用来获取或设置元素的HTML内容。

通过将innerHTML属性设置为新的HTML代码，我们可以改变元素的显示内容。

另外，使用document对象的style属性，我们可以修改元素的样式，比如颜色、字体大小等。

除了操作元素，document对象还提供了一些其他有用的功能。

例如，使用document.title属性，我们可以获取或设置当前页面的标题。

使用document.location.href属性，可以获取当前网页的URL。

还可以使用document.createElement()方法来创建新的HTML元素，并将其添加到DOM 中。

JavaScript中的document对象是处理和操作HTML文档中元素的必备工具。

document用法js

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对象详解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？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的javascript一些用法

document的javascript一些用法Javascript中的Document对象可以让我们在网页上进行多种操作，包括获取和修改页面元素，修改元素属性和样式等。

本文将介绍一些常见的Document对象的用法。

1. 获取页面元素获取页面元素是Javascript中最常见的操作之一。

Document对象提供了多种获取页面元素的方法。

例如，我们可以使用getElementById方法来获取一个指定id的元素，并将其存储在一个变量中：```var myElement = document.getElementById("myId");```类似地，我们也可以使用getElementsByClassName方法来获取特定类名的元素，使用getElementsByTagName方法来获取指定标签名的元素，使用querySelector方法来选择第一个匹配特定CSS选择器的元素，使用querySelectorAll方法则会返回所有匹配CSS选择器的元素。

2. 修改元素属性和样式在获取元素之后，我们可以通过JavaScript修改元素的属性和样式。

如下例所示，我们可以使用setAttribute方法来改变元素的属性值：```myElement.setAttribute("class", "newClass");```而通过修改元素的style属性，则可以改变元素的样式：```myElement.style.color = "red";myElement.style.background = "blue";```3. 创建新元素除了修改已有的元素之外，我们还可以使用Document对象中的createElement方法来动态地创建新的元素。

例如，以下代码将创建一个新的div元素，并向其中添加一个文本节点：```var newDiv = document.createElement("div");var newContent = document.createTextNode("This is a newdiv!");newDiv.appendChild(newContent);```4. 插入和删除元素在获得新元素之后，我们可以使用Document对象的appendChild、insertBefore和removeChild方法来将其插入或从页面中删除元素。

document方法

document方法
document 方法是JavaScript 中处理文档方面的常用方法。

JavaScript 的 document 对象用于控制当前网页的内容和行为，所以
非常重要。

常用的 document 方法可以将文档添加、删除、修改元素，也可以获取文档中的元素等。

document 对象是JS操作HTML和XML文档的核心，它表示当前网页的
文档树。

而 document 对象的方法，就是用来实现文档的CRUD（创建，读取，更新，删除）操作的。

最常用的 document 对象方法是 getElementById()，用于获取一个元
素对象，这个方法将根据元素的id属性，返回一个元素对象，可以直
接获取到HTML文档中的元素。

另外，还有 createElement() 创建一
个元素，以及 appendChild() 向文档树中添加的元素。

此外，document 对象还有许多其他的方法。

比如：getElementsByTagName() 获取元素集合，getElementsByClassName() 根据一个class属性来获取一组元素，removeChild() 删除子节点，replaceChild() 替换子节点等等。

总之，document 方法在 web 开发中是十分重要的，它可以帮助开发
者快速操作文档，实现 HTML 和 XML 文档的管理。

而且，除了我们列
出的方法外，document 对象还有许多方法，可以满足你的 web 开发
需求。

js中Document对象

js中Document对象JavaScript 语法是⼀套规则，它定义了 JavaScript 的语⾔结构。

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字⾯量（literal）。

变量值被称为变量。

在编程语⾔中，变量⽤于存储数据值。

JavaScript 使⽤ var 关键词来声明变量。

window.onload 页⾯加载完成⽤法⼀，window.onload的⽤法：因为页⾯中的代码⼀般情况下按照，从上到下，从左到右的顺序执⾏。

所以当js代码需要获取页⾯中的元素时，如果script标签在元素的前⾯，需要加window.onload；如果script放在了元素后⾯，就不需要加window.onload。

⼆，问题解决把JavaScript中要执⾏的程序放在window.οnlοad=function(){}中⼀、Document对象1、什么是Document对象？DOM(Document Object Model,⽂档对象模型)定义了访问和操作HTML⽂档的标准⽅法。

它把HTML⽂档表现为带有元素、属性和⽂本的树结构（节点树），如下图所⽰：⽂档对象:代表浏览器窗⼝中的⽂档，每个载⼊浏览器的HTML⽂档都会成为Document对象。

作⽤：访问HTML⽂档中包含的任何HTML标记并可动态地改变HTML标记中的内容。

如下图所⽰：提⽰：Document对象是Window对象的⼦对象，可通过window.document属性对其进⾏访问。

2、Document 对象的属性和⽅法Document 对象集合Document 对象描述HTMLDocument接⼝对DOM Document接⼝进⾏了扩展，定义HTML专⽤的属性和⽅法。

很多属性和⽅法都是 HTMLCollection对象（实际上是可以⽤数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引⽤。

这些集合属性都源⾃于0级DOM。

JSdocument对象简单用法完整示例

JSdocument对象简单⽤法完整⽰例本⽂实例讲述了JS document对象简单⽤法。

分享给⼤家供⼤家参考，具体如下：<html><head><title>js-document对象学习</title><meta charset="UTF-8"/><script type="text/javascript">// 直接获取对象function testGetElementById(){ //通过id获取对象// var gby=window.document.getElementById(); //window可以省去不写var gby=document.getElementById("sid");alert(gby); //输出的返回值是标签的类型[object HTMLInputElement]}function testGetElementsByName(){ //通过name获取对象var gbn=document.getElementsByName("umane");alert(gbn); //输出的返回值类型是[object NodeList]⼀个对象类型的数组alert(gbn.length); //Nodelist的元素是节点元素，长度是节点的个数。

每⼀个容器或标签算是⼀个节点。

}function testGetElementsByTagName(){ //通过TagName(标签)获取对象var gbt=document.getElementsByTagName("input");alert(gbt); //输出返回值类型是[object HTMLCollection]是⼀个对象元素的集合alert(gbt.length); //其集合的数⽬是所有input个数}function testGetElementsByClassName(){ //通过class获取对象var gbc=document.getElementsByClassName("clname");alert(gbc); //输出返回值类型是[object HTMLCollection]是⼀个对象元素的集合alert(gbc.length); //集合元素的长度是含有传⼊类属性的元素个数。

javascript中document的方法

javascript中document的方法JavaScript中document对象是一个非常重要的对象，它代表了当前HTML文档。

通过document对象，我们可以对HTML文档进行访问、操作和修改。

在本文中，我们将详细介绍document对象的各种方法。

一、获取元素1. getElementById()getElementById()方法通过元素的id属性获取元素。

该方法返回一个表示该元素的对象。

语法：document.getElementById(id)示例：```var element = document.getElementById("myElement");```2. getElementsByTagName()getElementsByTagName()方法通过标签名获取元素。

该方法返回一个包含所有指定标签名的元素列表。

语法：document.getElementsByTagName(tagname)示例：```var elements = document.getElementsByTagName("p");```3. getElementsByClassName()getElementsByClassName()方法通过类名获取元素。

该方法返回一个包含所有指定类名的元素列表。

语法：document.getElementsByClassName(classname)示例：```var elements = document.getElementsByClassName("myClass");4. querySelector()querySelector()方法通过CSS选择器获取第一个匹配的元素。

该方法返回一个表示该元素的对象。

语法：document.querySelector(selector)示例：```var element = document.querySelector("#myElement.myClass"); ```5. querySelectorAll()querySelectorAll()方法通过CSS选择器获取所有匹配的元素。

js中document的用法

一、介绍JavaScript是一种用于网页开发的脚本语言，它可以让网页拥有动态和交互式的特性。

其中，document对象是JavaScript中的重要对象之一，它代表了整个HTML文档，可以用来操作页面上的元素和内容。

本文将介绍document对象的基本用法，帮助读者更好地掌握JavaScript在网页开发中的应用。

二、document对象的基本用法1. 获取元素document对象可以通过多种方式获取页面上的元素，常用的方法有getElementById、getElementsByClassName、getElementsByTagName和querySelector等。

通过这些方法，可以获取页面上的元素并对其进行进一步操作。

```javascriptvar element = document.getElementById('example');var elements = document.getElementsByClassName('example'); var elements = document.getElementsByTagName('div');var element = document.querySelector('.example');```2. 操作元素获取到页面上的元素之后，可以通过document对象来对其进行操作，常见的操作包括修改元素的样式、内容、属性等。

```javascriptvar element = document.getElementById('example'); element.style.color = 'red';element.innerHTML = 'Hello, world!';element.setAttribute('title', 'This is an example');```3. 创建新元素document对象可以用来创建新的HTML元素，并将其添加到页面中。

js中document对象方法

js中document对象方法document对象是JavaScript中的一个重要对象，它代表了整个HTML文档。

通过document对象，我们可以对文档进行各种操作，包括获取元素、修改元素、添加元素等。

本文将介绍document对象的一些常用方法。

一、获取元素1. getElementById()：通过元素的id属性获取元素。

该方法返回一个元素对象，如果找不到对应的元素，则返回null。

2. getElementsByTagName()：通过元素的标签名获取元素。

该方法返回一个HTMLCollection对象，包含所有符合条件的元素。

3. getElementsByClassName()：通过元素的类名获取元素。

该方法返回一个HTMLCollection对象，包含所有具有指定类名的元素。

4. querySelector()：通过CSS选择器获取元素。

该方法返回第一个符合条件的元素。

5. querySelectorAll()：通过CSS选择器获取元素。

该方法返回所有符合条件的元素。

二、修改元素1. innerHTML：获取或设置元素的HTML内容。

可以通过该属性来修改元素的内容。

2. innerText：获取或设置元素的文本内容。

与innerHTML类似，但只能操作纯文本内容。

3. style：获取或设置元素的样式。

可以通过该属性来修改元素的外观。

4. className：获取或设置元素的类名。

可以通过该属性来添加或删除元素的类。

5.setAttribute()：设置元素的属性。

可以通过该方法来添加或修改元素的属性。

三、添加元素1. createElement()：创建一个新的元素。

可以通过该方法创建新的元素节点。

2. appendChild()：将一个元素添加到另一个元素的子节点列表末尾。

3. insertBefore()：将一个元素插入到另一个元素之前。

四、其他常用方法1. addEventListener()：为元素添加事件监听器。

JavaScript的document对象和window对象详解

JavaScript的document对象和window对象详解该对象是window和frames对象的⼀个属性,是显⽰于窗⼝或框架内的⼀个⽂档。

属性 alinkColor 活动链接的颜⾊(ALINK) anchor ⼀个HTMI锚点,使⽤<A NAME=>标记创建(该属性本⾝也是⼀个对象) anchors array 列出⽂档锚点对象的数组(<A NAME=>)(该属性本⾝也是⼀个对象) bgColor ⽂档的背景颜⾊(BGCOLOR) cookie 存储于cookie.txt⽂件内的⼀段信息,它是该⽂档对象的⼀个属性 fgColor ⽂档的⽂本颜⾊(<BODY>标记⾥的TEXT特性) form ⽂档中的⼀个窗体(<FORM>)(该属性本⾝也是⼀个对象) forms anay 按照其出现在⽂档中的顺序列出窗体对象的⼀个数组(该属性本⾝也是⼀个对象) lastModified ⽂档最后的修改⽇期 linkColor ⽂档的链接的颜⾊,即<BODY>标记中的LINK特性(链接到⽤户没有观察到的⽂档) link ⽂档中的⼀个<A HREF=>标记(该属性本⾝也是⼀个对象) links array ⽂档中link对象的⼀个数组,按照它们出现在⽂档中的顺序排列(该属性本⾝也是⼀个对象) location 当前显⽰⽂档的URL。

⽤户不能改变document.location(因为这是当前显⽰⽂档的位置)。

但是,可以改变window.location (⽤其它⽂档取代当前⽂档)window.location本⾝也是⼀个对象,⽽document.location不是对象 referrer 包含链接的⽂档的URL,⽤户单击该链接可到达当前⽂档 title ⽂档的标题((TITLE>) vlinkColor 指向⽤户已观察过的⽂档的链接⽂本颜⾊,即<BODY>标记的VLINK特性⽅法 clear 清除指定⽂档的内容 close 关闭⽂档流 open 打开⽂档流 write 把⽂本写⼊⽂档 writeln 把⽂本写⼊⽂档,并以换⾏符结尾它是⼀个顶层对象,⽽不是另⼀个对象的属性即浏览器的窗⼝。

JS操作document对象

JS操作document对象找到对象：document.getElementById()：返回对拥有指定 id 的第⼀个对象的引⽤。

document.getElementsByName()：返回带有指定名称的对象集合。

document.getElementsByTagName()：返回带有指定标签名的对象集合。

document.getElementsByClassName()：返回对拥有指定 class 的对象集合。

操作对象：操作属性：取值：getAttribte()；document.getElementsByTagName("标签名")[0].getAttribute("属性名");赋值：setAttribte()；document.getElementsByTagName("标签名")[0].setAttribute("属性名","属性值");删除赋值：removeAttribute()；document.getElementsByTagName("标签名")[0].removeAttribute("属性名");操作样式：内联样式：style.xxxx；class：1.className。

2.把class当成属性来看element.className = 'blue';操作内容：表单元素：value；document.getElementById("id名字").value;⽂本框，单选框，复选框。

⾮表单元素：innerHTML：document.getElementById("id名字").innerHTML="<a href='https://'>到百度</a> ";浏览器会将inneHTML后⾯的内容作为html来解析。

JavaScript中document对象的常用方法

JavaScript中document对象的常⽤⽅法document对象的概念浏览器对外提供的⽀持js的⽤来操作HTML⽂档的⼀个对象，此对象封存的HTML⽂档的所有信息。

1、使⽤document获取HTML元素对象直接获取⽅式：通过id： window.document.getElementById("id值") 通过name属性值：document.getElementsByName("name值") 通过标签名：document.getElementsByTagName("属性名") 通过class属性值：document.getElementsByClassName("class值") 间接获取⽅式：⽗⼦关系：获取⽗级元素对象 var showdiv=document.getElementById("id值"); 获取所有的⼦元素对象数组 var childs=showdiv.childNodes; ⼦⽗关系:获取⼦元素对象 v ar inp=document.getElementById("id值"); 获取⽗级元素对象 var div=inp.parentNode; 兄弟关系：var inp=document.getElementById("id的值"); var preEle= inp.previousSibling;//弟获取兄 var nextEle=inp.nextSibling;//兄获取弟2、js操作HTML元素属性获取元素对象操作元素属性获取：元素对象名.属性名//返回当前属性的属性值。

----固有元素对象名.getAttribute("属性名");//返回⾃定义属性的值-----⾃定义修改元素对象名.属性名=属性值元素对象名.setAttribute("属性名","属性值");//修改⾃定义属性的值----⾃定义注意：尽量的不要去修改元素的id值和name属性值。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

[web编程]document对象详解document 文挡对象- JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息"引用的元素为空或者不是对象"---------------------------------------------------------------------对象属性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()" //鼠标指针移出对象时触发--------------------------------------------------------------------- location-位置子对象document.location.hash // #号后的部分document.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) //打开新的网页--------------------------------------------------------------------- selection-选区子对象document.selection--------------------------------------------------------------------- images集合(页面中的图象)a)通过集合引用document.images //对应页面上的<img>标签document.images.length //对应页面上<img>标签的个数document.images[0] //第1个<img>标签document.images[i] //第i-1个<img>标签b)通过nane属性直接引用<img name="oImage">document.images.oImage //属性c)引用图片的src属性document.images.oImage.src //属性.src d)创建一个图象var oImageoImage = new Image()document.images.oImage.src="1.jpg"同时在页面上建立一个<img>标签与之对应就可以显示<html><img name=oImage><script language="javascript">var oImageoImage = new Image()document.images.oImage.src="1.jpg"</script></html><html><script language="javascript">oImage=document.caeateElement("IMG")oImage.src="1.jpg"document.body.appendChild(oImage)</script></html>---------------------------------------------------------------------- forms集合(页面中的表单)a)通过集合引用document.forms //对应页面上的<form>标签document.forms.length //对应页面上<form>标签的个数document.forms[0] //第1个<form>标签document.forms[i] //第i-1个<form>标签document.forms[i].length //第i-1个<form>中的控件数document.forms[i].elements[j] //第i-1个<form>中第j-1个控件b)通过标签name属性直接引用<form name="Myform"><input name="myctrl"></form> document.Myform.myctrl //document.表单名.控件名c)访问表单的属性document.forms[i].name //对应<form name>属性document.forms[i].action //对应<form action>属性document.forms[i].encoding //对应<form enctype>属性document.forms[i].target //对应<form target>属性document.forms[i].appendChild(oTag) //动态插入一个控件----------------------------------------------------------------------- <html><form name="Myform"><input type="text" name="oText"><input type="password" name="oPswd"><form><script language="javascript">//获取文本密码框的值document.write(document.Myform.oText.value)document.write(document.Myform.oPswd.value)</script></html>----------------------------------------------------------------------- <html><form name="Myform"><input type="checkbox" name="chk" value="1">1<input type="checkbox" name="chk" value="2">2</form><script language="javascript">function fun(){//遍历checkbox控件的值并判断是否选中var lengthlength=document.forms[0].chk.lengthfor(i=0;i<length;i++){v=document.forms[0].chk[i].valueb=document.forms[0].chk[i].checkedif(b)alert(v=v+"被选中")elsealert(v=v+"未选中")}}</script><a href=# onclick="fun()">ddd</a></html>----------------------------------------------------------------------- <html><form name="Myform"><select name="oSelect"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></form><script language="javascript">//遍历select控件的option项var lengthlength=document.Myform.oSelect.lengthfor(i=0;i<length;i++)document.write(document.Myform.oSelect[i].value)</script><script language="javascript">//遍历option项并且判断某个option是否被选中for(i=0;i<document.Myform.oSelect.length;i++){if(document.Myform.oSelect[i].selected!=true)document.write(document.Myform.oSelect[i].value)elsedocument.write("<fontcolor=red>"+document.Myform.oSelect[i].value+"</font>") }</script><script language="javascript">//根据SelectedIndex打印出选中的option//(0到document.Myform.oSelect.length-1)i=document.Myform.oSelect.selectedIndexdocument.write(document.Myform.oSelect[i].value)</script><script language="javascript">//动态增加select控件的option项var oOption = document.createElement("OPTION");oOption.text="4";oOption.value="4";document.Myform.oSelect.add(oOption);</script><html>-----------------------------------------------------------------------<Div id="oDiv">Text</Div>document.all.oDiv //引用图层oDiv document.all.oDiv.style.display="" //图层设置为可视document.all.oDiv.style.display="none" //图层设置为隐藏document.getElementId("oDiv") //通过getElementId引用对象document.getElementId("oDiv").style=""document.getElementId("oDiv").display="none"/*document.all表示document中所有对象的集合只有ie支持此属性，因此也用来判断浏览器的种类*/图层对象的4个属性document.getElementById("ID").innerText //动态输出文本document.getElementById("ID").innerHTML //动态输出HTML document.getElementById("ID").outerText //同innerText document.getElementById("ID").outerHTML //同innerHTML <html><script language="javascript">function change(){document.all.oDiv.style.display="none"}</script><Div id="oDiv" onclick="change()">Text</Div></html><html><script language="javascript">function changeText(){document.getElementById("oDiv").innerText="NewText"}</script><Div id="oDiv" onmouseover="changeText()">Text</Div> </html>标签: web javascript 文档。