/
dom.xml
188 lines (186 loc) · 7.57 KB
/
dom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<?xml version="1.0" encoding="UTF-8"?>
<CONTENT TITLE="DOM and Forms" ID="domRef">
<CONTENT TITLE="How do I get the value of a form control?"
ID="formControlAccess" NUMID="4_13">
<P>
In HTML documents, a form may be referred to as a property of the
<ICODE>document.forms</ICODE> collection, either by its ordinal index or by name
(if the <ICODE>form</ICODE> has a name). A <ICODE>form</ICODE>'s controls may be similarly referenced
from its <ICODE>elements</ICODE> collection:
</P>
<CODE>
var frm = document.forms[0];
var control = frm.elements["elementname"];
</CODE>
<P>
Once a reference to a control is obtained, its (string) <ICODE>value</ICODE>
property can be read:-
</P>
<CODE>
var value = control.value;
value = +control.value; //string to number.
</CODE>
Some exceptions would be:
<P>
First Exception: Where the control is a <ICODE>SELECT</ICODE> element, and
support for older browsers, such as NN4, is required:
</P>
<CODE>
var value = control.options[control.selectedIndex].value;
</CODE>
<P>
Second Exception: Where several controls share the same name,
such as radio buttons. These are made available as collections
and require additional handling. For more information, see:-
</P>
<MOREINFO>
<URL>notes/form-access/</URL>
<URL LINKTEXT="Unsafe Names for HTML Form Controls">names/</URL>
</MOREINFO>
<P>
Third Exception: File inputs. Most current browsers do not allow
reading of <ICODE>type="file"</ICODE> input elements in a way that is useful.
</P>
</CONTENT>
<CONTENT TITLE="My element is named myselect[], how do I access it?" ID="propertyAccess" NUMID="4_25">
<P>
Form controls with any "illegal" characters can be accessed with
<ICODE>formref.elements["myselect[]"]</ICODE> - The bracket characters,
amongst others, are illegal in ID attributes and javascript
identifiers, so you should try to avoid them as browsers may
handle them incorrectly.
</P>
<MOREINFO>
<URL>http://msdn.microsoft.com/en-us/library/ms537449%28VS.85%29.aspx</URL>
<URL>https://developer.mozilla.org/en/DOM/form</URL>
<URL>notes/form-access/</URL>
</MOREINFO>
</CONTENT>
<CONTENT TITLE="Why doesn't the global variable "divId" always refer to the element with id="divId"?"
ID="globalPollution" NUMID="4_41">
<P>
Microsoft introduced a shortcut that can be used to reference
elements which include an <ICODE>id</ICODE> attribute where the
<ICODE>id</ICODE> becomes a globally-accessible property. Some browsers reproduce
this behavior. Some, most notably Gecko-based browsers (Netscape and Mozilla),
do so only in "quirks" mode. The best approach is the <ICODE>document.getElementById</ICODE>
method, which is part of the W3C DOM standard and implemented
in modern browsers (including IE from version 5.0). So an
element with <ICODE>id="foo"</ICODE> can be referenced
with:-
</P>
<CODE>
var el = document.getElementById("foo");
</CODE>
<P>
Note: make sure not to use the same <ICODE>id</ICODE> twice in the same document
and do not give an element a <ICODE>name</ICODE> that matches an <ICODE>id</ICODE>
of another in the same document or it will trigger bugs in MSIE <= 7 with
<ICODE>document.getElementsByName</ICODE> and <ICODE>document.getElementById</ICODE>.
</P>
<MOREINFO>
<URL>https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM#Accessing_Elements_with_the_W3C_DOM</URL>
<URL>faq_notes/faq_notes.html#FAQN4_41</URL>
</MOREINFO>
</CONTENT>
<CONTENT TITLE="How do I modify the content of the current page?"
ID="updateContent" NUMID="4_15">
<P>
Using the non-standard but widely implemented
<ICODE>innerHTML</ICODE> property:
<ICODE><div id="anID">Some Content</div></ICODE> with script:
</P>
<CODE>
document.getElementById("anID").innerHTML =
"Some <em>new</em> Content";
</CODE>
<P>
Where <ICODE>"anID"</ICODE> is the (unique on the HTML page)
<ICODE>id</ICODE> attribute value of the element to modify.
</P>
<P>
All versions of Internet Explorer exhibit problems with innerHTML, including:
</P>
<LIST TYPE="UL">
<LI>Fails with FRAMESET, HEAD, HTML, STYLE, SELECT,
OBJECT, and all TABLE-related elements.</LI>
<LI>Replaces consecutive whitespace characters with a single space.</LI>
<LI>Changes attribute values and order of appearance.</LI>
<LI>Removes quotations around attribute values.</LI>
</LIST>
<P>
If the new content is only text and does not need to replace existing HTML,
it is more efficient to modify the <ICODE>data</ICODE> property of a text node.
</P>
<CODE>
document.getElementById("anID").firstChild.data = "Some new Text";
</CODE>
<P>
Compatibility Note: Implementations have been known to split long text
content among several adjacent text nodes, so replacing the data of the
first text node may not replace all the element's text. The <ICODE>normalize</ICODE>
method, where supported, will combine adjacent text nodes.
</P>
<P>
Note: Make sure the element exists in the document (has been parsed) before trying to
reference it.
</P>
<MOREINFO>
<URL>http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-FF21A306</URL>
<URL>http://msdn.microsoft.com/en-us/library/cc304097%28VS.85%29.aspx</URL>
<URL>http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx</URL>
<URL>http://developer.mozilla.org/en/Whitespace_in_the_DOM</URL>
<URL>http://developer.mozilla.org/en/docs/DOM:element.innerHTML</URL>
<URL>http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#html-fragment-serialization-algorithm</URL> (draft)
</MOREINFO>
</CONTENT>
<CONTENT TITLE="Why does my code fail to access an element?" ID="accessElementBeforeDefined">
<P>
An element can only be accessed after it exists in the document.
</P>
<P>
Either:
A) include your script after the HTML element it refers to, or
B) use the <ICODE>"load"</ICODE> event to trigger your script.
</P>
<P>
Example A:
</P>
<CODE>
<div id="snurgle">here</div>
<script type="text/javascript">
// Don't forget var.
var snurgleEl = document.getElementById("snurgle");
window.alert(snurgleEl.parentNode);
</script>
</CODE>
<P>
Example B:
</P>
<CODE>
// In the HEAD.
<script type="text/javascript">
window.onload = function(){
var snurgleEl = document.getElementById("snurgle");
};
</script>
</CODE>
<LIST TYPE="UL" TITLE="Other problems can include:">
<LI>invalid HTML</LI>
<LI>two elements with the same <ICODE>name</ICODE> or <ICODE>id</ICODE></LI>
<LI><URL LINKTEXT="use of an unsafe name">names/</URL></LI>.
</LIST>
</CONTENT>
<CONTENT TITLE="How can I see in javascript if a web browser accepts cookies?"
ID="testCookie" NUMID="4_4">
<P>
Write a cookie and read it back and check if it's the same.
</P>
<MOREINFO>
Additional Notes:
<URL>http://www.ietf.org/rfc/rfc2965.txt</URL>
<URL>http://www.galasoft-lb.ch/myjavascript/consulting/2001012701/</URL>
<URL>http://www.cookiecentral.com/</URL>
</MOREINFO>
</CONTENT>
</CONTENT>