JavaScript-6document

HTML中的内容：

• 段落(paragraph)
• 图片(images)
• 表单(form)
• 表格(table)
• 链接(links)

---

Document Object Model

• 文档对象模型
• document对象的成员提供了HTML文档的信息

document中的包含的属性

location
createElement
implementation
URL
documentURI
compatMode
characterSet
charset
inputEncoding
contentType
doctype
documentElement
xmlEncoding
xmlVersion
xmlStandalone
domain
referrer
cookie
lastModified
readyState
title
dir
body
head
images
embeds
plugins
links
forms
scripts
currentScript
defaultView
designMode
onreadystatechange
anchors
applets
fgColor
linkColor
vlinkColor
alinkColor
bgColor
all
scrollingElement
onpointerlockchange
onpointerlockerror
hidden
visibilityState
wasDiscarded
featurePolicy
webkitVisibilityState
webkitHidden
onbeforecopy
onbeforecut
onbeforepaste
onfreeze
onresume
onsearch
onsecuritypolicyviolation
onvisibilitychange
fullscreenEnabled
fullscreen
onfullscreenchange
onfullscreenerror
webkitIsFullScreen
webkitCurrentFullScreenElement
webkitFullscreenEnabled
webkitFullscreenElement
onwebkitfullscreenchange
onwebkitfullscreenerror
rootElement
onbeforexrselect
onabort
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncuechange
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onseeked
onseeking
onselect
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwebkitanimationend
onwebkitanimationiteration
onwebkitanimationstart
onwebkittransitionend
onwheel
onauxclick
ongotpointercapture
onlostpointercapture
onpointerdown
onpointermove
onpointerup
onpointercancel
onpointerover
onpointerout
onpointerenter
onpointerleave
onselectstart
onselectionchange
onanimationend
onanimationiteration
onanimationstart
ontransitionrun
ontransitionstart
ontransitionend
ontransitioncancel
oncopy
oncut
onpaste
children
firstElementChild
lastElementChild
childElementCount
activeElement
styleSheets
pointerLockElement
fullscreenElement
adoptedStyleSheets
fonts
adoptNode
append
captureEvents
caretRangeFromPoint
clear
close
createAttribute
createAttributeNS
createCDATASection
createComment
createDocumentFragment
createElementNS
createEvent
createExpression
createNSResolver
createNodeIterator
createProcessingInstruction
createRange
createTextNode
createTreeWalker
elementFromPoint
elementsFromPoint
evaluate
execCommand
exitFullscreen
exitPointerLock
getElementById
getElementsByClassName
getElementsByName
getElementsByTagName
getElementsByTagNameNS
getSelection
hasFocus
importNode
open
prepend
queryCommandEnabled
queryCommandIndeterm
queryCommandState
queryCommandSupported
queryCommandValue
querySelector
querySelectorAll
releaseEvents
replaceChildren
webkitCancelFullScreen
webkitExitFullscreen
write
writeln
fragmentDirective
timeline
pictureInPictureEnabled
pictureInPictureElement
onpointerrawupdate
exitPictureInPicture
getAnimations
nodeType
nodeName
baseURI
isConnected
ownerDocument
parentNode
parentElement
childNodes
firstChild
lastChild
previousSibling
nextSibling
nodeValue
textContent
ELEMENT_NODE
ATTRIBUTE_NODE
TEXT_NODE
CDATA_SECTION_NODE
ENTITY_REFERENCE_NODE
ENTITY_NODE
PROCESSING_INSTRUCTION_NODE
COMMENT_NODE
DOCUMENT_NODE
DOCUMENT_TYPE_NODE
DOCUMENT_FRAGMENT_NODE
NOTATION_NODE
DOCUMENT_POSITION_DISCONNECTED
DOCUMENT_POSITION_PRECEDING
DOCUMENT_POSITION_FOLLOWING
DOCUMENT_POSITION_CONTAINS
DOCUMENT_POSITION_CONTAINED_BY
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
appendChild
cloneNode
compareDocumentPosition
contains
getRootNode
hasChildNodes
insertBefore
isDefaultNamespace
isEqualNode
isSameNode
lookupNamespaceURI
lookupPrefix
normalize
removeChild
replaceChild
addEventListener
dispatchEvent
removeEventListener

在JavaScript中访问HTML中定义的图像。

1. 访问图像的方式一

<img src="test.png">

<script>
alert(document.images[0]);
</script>

2. 访问图像的方式二

<img name="test" src="test.png">

<script>
alert(document.test);
</script>

3. 访问图像的方式三

<img name="test" src="test.png">

<script>
alert(document.getElementsByName("test"));
</script>

对于所有的HTML语句都能有的：name, id(属于哪一类)

若要访问段落等其他元素，可以使用id的方式进行访问

<p id = "p1" name="paragraph">
    一个段落
</p>

<script>
alert(document.getElementById("p1"));
</script>

---

document的成员

• anchors[]:
• byColor
• forms[]：表单
• fgColor
• images[]
• linkColor
• cookie：访问服务器的时候，服务器给的小型文件，知道你的身份
• alinkColor
• title：标题
• vlinkColor

---

图像

• image对象的src可以改写以装入一幅新的图片
• 可以创建Image()对象来提前装载图片
• onLoad时间表明图像装载完成

事件

• onLoad/onUnload
• onMouseOver/onMouseOut
• onClick/onDbClick
• onSubmit