Home >Web Front-end >JS Tutorial >Summary of properties, methods and events of JavaScript window.document_Basic knowledge
A summary of the properties, methods and events of window.document in JavaScript. Friends in need can refer to this article.
Attributes:
Attributes stores the attribute list of the node (read-only)
childNodes stores the child node list of the node (read-only)
dataType Return this The data type of the node
Definition The definition of the node given in DTD or XML mode (read-only)
Doctype Specifies the document type node (read-only)
documentElement Returns the root element of the document (readable and writable)
firstChild returns the first child node of the current node (read-only)
Implementation returns the XMLDOMImplementation object
lastChild returns the last child node of the current node (read-only)
nextSibling returns the next sibling node of the current node (read-only)
nodeName returns the name of the node (read-only)
nodeType returns the type of the node (read-only)
nodeTypedValue stores the node value (readable and writable)
nodeValue returns the text of the node (read-only) Read and write)
ownerDocument returns the root document containing this node (read only)
parentNode returns the parent node (read only)
Parsed returns whether this node and its child nodes have been parsed (read only)
Prefix returns the namespace prefix (read-only)
preserveWhiteSpace specifies whether to preserve blank space (readable and writable)
previousSibling returns the previous sibling node of this node (read-only)
Text returns the information of this node and its descendants Text content (readable and writable)
url Returns the URL of the recently loaded XML document (read-only)
Xml Returns the XML representation of the node and its descendants (read-only)
method :
appendChild adds a new child node to the current node and places it after the last child node
cloneNode returns a copy of the current node
createAttribute creates a new attribute
createCDATASection creates Contains a CDATA segment with the given data
createComment creates a comment node
createDocumentFragment creates a DocumentFragment object
createElement creates an element node
createEntityReference creates an EntityReference object
createNode creates the given type, name and namespace The node
createPorcessingInstruction creates the operation instruction node
createTextNode creates a text node including the given data
getElementsByTagName returns the element collection with the specified name
hasChildNodes returns whether the current node has child nodes
insertBefore at the specified node Insert child node before
Load Import the XML document at the specified location
loadXML Import the XML document with the specified string
removeChild Remove the specified child node from the child node list
replaceChild Replace from the child node list The specified child node
Save saves the XML file to the specified node
selectNodes performs the specified matching on the node and returns the matching node list
selectSingleNode performs the specified matching on the node and returns the first matching node
transformNode uses the specified style sheet to transform the node and its descendants
transformNodeToObject uses the specified style sheet to transform the node and its descendants into objects
body-body sub-object
document.body //Specify the start and end of the document body which is equivalent to body>/body>
document.body.bgColor //Set or get the background color behind the object
document.body. link //Color of links that have not been clicked
document.body.alink //Color of active links (focus is on this link)
document.body.vlink //Color of links that have been clicked
document .body.text //Text color
document.body.innerText //Set the text between body>.../body>
document.body.innerHTML //Set the HTML between body>.../body> Code
document.body.topMargin //Top margin of page
document.body.leftMargin //Left margin of page
document.body.rightMargin //Right margin of page
document.body.bottomMargin // Page bottom margin
document.body.background //Background image
document.body.appendChild(oTag) //Dynamicly generate an HTML object
Common object events
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 // 完整URL
document.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 //document.images.name属性
c)引用图片的src属性
document.images.oImage.src //document.images.name属性.src
d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示
———————————————————————-
forms集合(页面中的表单)
a)通过集合引用
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.forms[i].elements[j] //第i-1个/formform中第j-1个控件
b)通过标签name属性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表单名.控件名
c)访问表单的属性
document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性
document.forms[i].encoding //对应/formform enctype>属性
document.forms[i].target //对应/formform target>属性
document.forms[i].appendChild(oTag) //动态插入一个控件
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
document属性作为window对象的一个子对象被创建,是用于访问页面中所有元素的对象。其主要具有以下一些应用特性:
属性/方法/事件 | 描述 |
onClick | 当文档被点击时触发 |
onDblClick | 当文档被双击时触发 |
onKeyDown | 当按下任意键时触发。优先于onKeyPress事件触发器 |
onKeyPress | 参见onKeyDown |
onKeyUp | 当释放按下的键时触发 |
onMouseDown | 当按下鼠标键时触发 |
onMouseUp | 当释放鼠标键时触发 |
captureEvents() | 捕获所有与文档相关的事件 |
close() | 关闭文档流 |
getSelection() | 返回当前选中的文本 |
handleEvent() | 调用事件处理器给指定的事件 |
open() | 打开文档流 |
releaseEvents() | 释放所捕获的事件 |
routeEvent() | 通过正常的处理程序来传递所捕获的事件 |
write() | 向文档中写入内容 |
writeln() | 在文档中写入带有换行符的字符串 |
alinkColor | 指定相关标签的alink属性 |
anchors | 包含了文档中所有anchor标签的数组 |
bgColor | 指定相关标签的背景颜色。 |
cookie | 指定cookie |
domain | 指定服务于文档的域 |
embeds | 包含了文档中所有embed标签的数组 |
fgColor | 指定相关标签的text属性 |
formName | 文档中每个form的实际名称 |
forms | 包含了文档中所有form标签的数组 |
images | 包含了文档中所有image标签的数组 |
lastModified | 指定文档最后更改的日期 |
layers | 包含了文档中layer的所有标签的数组 |
linkColor | 指定相关标签的link属性 |
links | 包含了文档中所有links的数组 |
plugins | 包含了文档中所有plug-in的数组 |
referrer | 指定referral URL. |
title | 标题文字 |
URL | 指定文档的URL |
vlinkColor | 指定相关标签的vlink属性 |