2019-10-21 17:03:48 +00:00
< p id = "firstp" > See < a id = "simon1" href = "https://simon.incutio.com/archive/2003/03/25/#getElementsBySelector" rel = "bookmark" > this blog entry< / a > for more information.< / p >
2017-08-01 16:52:45 +00:00
< p id = "ap" >
2019-10-21 17:03:48 +00:00
Here are some [links] in a normal paragraph: < a id = "google" href = "https://www.google.com/" title = "Google!" > Google< / a > ,
< a id = "groups" href = "https://groups.google.com/" class = "GROUPS" > Google Groups (Link)< / a > .
This link has < code id = "code1" > < a href = "https://smin" id = "anchor1" > class="blog"< / a > < / code > :
< a href = "https://diveintomark.org/" class = "blog" hreflang = "en" id = "mark" > diveintomark< / a >
2017-08-01 16:52:45 +00:00
< / p >
< div id = "foo" >
< p id = "sndp" > Everything inside the red border is inside a div with < code > id="foo"< / code > .< / p >
2019-10-21 17:03:48 +00:00
< p lang = "en" id = "en" > This is a normal link: < a id = "yahoo" href = "https://www.yahoo.com/" class = "blogTest" > Yahoo< / a > < / p >
< p id = "sap" > This link has < code > < a href = "#2" id = "anchor2" > class="blog"< / a > < / code > : < a href = "https://simon.incutio.com/" class = "blog link" id = "simon" > Simon Willison's Weblog< / a > < / p >
2017-08-01 16:52:45 +00:00
< / div >
< div id = "nothiddendiv" style = "height:1px;background:white;" class = "nothiddendiv" >
< div id = "nothiddendivchild" > < / div >
< / div >
< span id = "name+value" > < / span >
< p id = "first" > Try them out:< / p >
< ul id = "firstUL" > < / ul >
< ol id = "empty" > < / ol >
< form id = "form" action = "formaction" >
< label for = "action" id = "label-for" > Action:< / label >
< input type = "text" name = "action" value = "Test" id = "text1" maxlength = "30" / >
< input type = "text" name = "text2" value = "Test" id = "text2" disabled = "disabled" / >
< input type = "radio" name = "radio1" id = "radio1" value = "on" / >
< input type = "radio" name = "radio2" id = "radio2" checked = "checked" / >
< input type = "checkbox" name = "check" id = "check1" checked = "checked" / >
< input type = "checkbox" id = "check2" value = "on" / >
< input type = "hidden" name = "hidden" id = "hidden1" / >
< input type = "text" style = "display:none;" name = "foo[bar]" id = "hidden2" / >
< input type = "text" id = "name" name = "name" value = "name" / >
< input type = "search" id = "search" name = "search" value = "search" / >
< button id = "button" name = "button" type = "button" > Button< / button >
< textarea id = "area1" maxlength = "30" > foobar< / textarea >
< select name = "select1" id = "select1" >
< option id = "option1a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option1b" value = "1" > 1< / option >
< option id = "option1c" value = "2" > 2< / option >
< option id = "option1d" value = "3" > 3< / option >
< / select >
< select name = "select2" id = "select2" >
< option id = "option2a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option2b" value = "1" > 1< / option >
< option id = "option2c" value = "2" > 2< / option >
< option id = "option2d" selected = "selected" value = "3" > 3< / option >
< / select >
< select name = "select3" id = "select3" multiple = "multiple" >
< option id = "option3a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option3b" selected = "selected" value = "1" > 1< / option >
< option id = "option3c" selected = "selected" value = "2" > 2< / option >
< option id = "option3d" value = "3" > 3< / option >
< option id = "option3e" > no value< / option >
< / select >
< select name = "select4" id = "select4" multiple = "multiple" >
< optgroup disabled = "disabled" >
< option id = "option4a" class = "emptyopt" value = "" > Nothing< / option >
< option id = "option4b" disabled = "disabled" selected = "selected" value = "1" > 1< / option >
< option id = "option4c" selected = "selected" value = "2" > 2< / option >
< / optgroup >
< option selected = "selected" disabled = "disabled" id = "option4d" value = "3" > 3< / option >
< option id = "option4e" > no value< / option >
< / select >
< select name = "select5" id = "select5" >
< option id = "option5a" value = "3" > 1< / option >
< option id = "option5b" value = "2" > 2< / option >
< option id = "option5c" value = "1" data-attr = "" > 3< / option >
< / select >
< object id = "object1" codebase = "stupid" >
< param name = "p1" value = "x1" / >
< param name = "p2" value = "x2" / >
< / object >
2019-06-26 19:39:10 +00:00
< span id = "台北Táiběi" > < span id = "台北Táiběi-child" > < / span > < / span >
2017-08-01 16:52:45 +00:00
< span id = "台北" lang = "中文" > < / span >
2019-06-26 19:39:10 +00:00
< span id = "utf8class1" class = "台北Táiběi 台北" > "'台北Táiběi"'< / span >
2017-08-01 16:52:45 +00:00
< span id = "utf8class2" class = "台北" > < / span >
2019-06-26 19:39:10 +00:00
< span id = "foo:bar" class = "foo:bar" > < span id = "foo_descendant" > < / span > < / span >
2017-08-01 16:52:45 +00:00
< span id = "test.foo[5]bar" class = "test.foo[5]bar" > < / span >
< foo_bar id = "foobar" > test element< / foo_bar >
< / form >
< b id = "floatTest" > Float test.< / b >
< iframe id = "iframe" name = "iframe" > < / iframe >
< form id = "lengthtest" >
< input type = "text" id = "length" name = "test" / >
< input type = "text" id = "idTest" name = "id" / >
< / form >
< table id = "table" > < / table >
< form id = "name-tests" >
<!-- Inputs with a grouped name attribute. -->
< input name = "types[]" id = "types_all" type = "checkbox" value = "all" / >
< input name = "types[]" id = "types_anime" type = "checkbox" value = "anime" / >
< input name = "types[]" id = "types_movie" type = "checkbox" value = "movie" / >
< / form >
< form id = "testForm" action = "#" method = "get" >
< textarea name = "T3" rows = "2" cols = "15" > ?
Z< / textarea >
< input type = "hidden" name = "H1" value = "x" / >
< input type = "hidden" name = "H2" / >
< input name = "PWD" type = "password" value = "" / >
< input name = "T1" type = "text" / >
< input name = "T2" type = "text" value = "YES" readonly = "readonly" / >
< input type = "checkbox" name = "C1" value = "1" / >
< input type = "checkbox" name = "C2" / >
< input type = "radio" name = "R1" value = "1" / >
< input type = "radio" name = "R1" value = "2" / >
< input type = "text" name = "My Name" value = "me" / >
< input type = "reset" name = "reset" value = "NO" / >
2019-11-18 21:10:55 +00:00
< div class = "empty-name-container" >
< div id = "empty-name-parent" >
< input type = "text" id = "name-empty" name = "" value = "" / >
< / div >
< / div >
2017-08-01 16:52:45 +00:00
< select name = "S1" >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< / select >
< select name = "S2" multiple = "multiple" size = "3" >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< option value = "abc" > ABC< / option >
< / select >
< select name = "S3" >
< option selected = "selected" > YES< / option >
< / select >
< select name = "S4" >
< option value = "" selected = "selected" > NO< / option >
< / select >
< input type = "submit" name = "sub1" value = "NO" / >
< input type = "submit" name = "sub2" value = "NO" / >
< input type = "image" name = "sub3" value = "NO" / >
< button name = "sub4" type = "submit" value = "NO" > NO< / button >
< input name = "D1" type = "text" value = "NO" disabled = "disabled" / >
< input type = "checkbox" checked = "checked" disabled = "disabled" name = "D2" value = "NO" / >
< input type = "radio" name = "D3" value = "NO" checked = "checked" disabled = "disabled" / >
< select name = "D4" disabled = "disabled" >
< option selected = "selected" value = "NO" > NO< / option >
< / select >
< input id = "list-test" type = "text" / >
< datalist id = "datalist" >
< option value = "option" > < / option >
< / datalist >
< / form >
< div id = "moretests" >
< form >
< div id = "checkedtest" style = "display:none;" >
< input type = "radio" name = "checkedtestradios" checked = "checked" / >
< input type = "radio" name = "checkedtestradios" value = "on" / >
< input type = "checkbox" name = "checkedtestcheckboxes" checked = "checked" / >
< input type = "checkbox" name = "checkedtestcheckboxes" / >
< / div >
< / form >
< div id = "nonnodes" > < span id = "nonnodesElement" > hi< / span > there <!-- mon ami --> < / div >
< div id = "t2037" >
< div > < div class = "hidden" > hidden< / div > < / div >
< / div >
< div id = "t6652" >
< div > < / div >
< / div >
2019-06-26 19:39:10 +00:00
< div id = "t12087" >
< input type = "hidden" id = "el12087" data-comma = "0,1" / >
< / div >
2017-08-01 16:52:45 +00:00
< div id = "no-clone-exception" > < object > < embed > < / embed > < / object > < / div >
2019-06-26 19:39:10 +00:00
< div id = "names-group" >
< span id = "name-is-example" name = "example" > < / span >
< span id = "name-is-div" name = "div" > < / span >
< / div >
< div id = "id-name-tests" >
< a id = "tName1ID" name = "tName1" > < span > < / span > < / a >
< a id = "tName2ID" name = "tName2" > < span > < / span > < / a >
< div id = "tName1" > < span id = "tName1-span" > C< / span > < / div >
< / div >
< div id = "whitespace-lists" >
< input id = "t15233-single" data-15233 = "foo" / >
< input id = "t15233-double" data-15233 = "foo bar" / >
< input id = "t15233-double-tab" data-15233 = "foo bar" / >
< input id = "t15233-double-nl" data-15233 = "foo
bar" / >
< input id = "t15233-triple" data-15233 = "foo bar baz" / >
< / div >
2017-08-01 16:52:45 +00:00
< / div >
< div id = "tabindex-tests" >
< ol id = "listWithTabIndex" tabindex = "5" >
< li id = "foodWithNegativeTabIndex" tabindex = "-1" > Rice< / li >
< li id = "foodNoTabIndex" > Beans< / li >
< li > Blinis< / li >
< li > Tofu< / li >
< / ol >
< div id = "divWithNoTabIndex" > I'm hungry. I should...< / div >
< span > ...< / span > < a href = "#" id = "linkWithNoTabIndex" > Eat lots of food< / a > < span > ...< / span > |
< span > ...< / span > < a href = "#" id = "linkWithTabIndex" tabindex = "2" > Eat a little food< / a > < span > ...< / span > |
< span > ...< / span > < a href = "#" id = "linkWithNegativeTabIndex" tabindex = "-1" > Eat no food< / a > < span > ...< / span >
< span > ...< / span > < a id = "linkWithNoHrefWithNoTabIndex" > Eat a burger< / a > < span > ...< / span >
< span > ...< / span > < a id = "linkWithNoHrefWithTabIndex" tabindex = "1" > Eat some funyuns< / a > < span > ...< / span >
< span > ...< / span > < a id = "linkWithNoHrefWithNegativeTabIndex" tabindex = "-1" > Eat some funyuns< / a > < span > ...< / span >
< input id = "inputWithoutTabIndex" / >
< button id = "buttonWithoutTabIndex" > < / button >
< textarea id = "textareaWithoutTabIndex" > < / textarea >
< menu type = "popup" >
< menuitem id = "menuitemWithoutTabIndex" command = "submitbutton" default / >
< / menu >
< / div >
< div id = "liveHandlerOrder" >
< span id = "liveSpan1" > < a href = "#" id = "liveLink1" > < / a > < / span >
< span id = "liveSpan2" > < a href = "#" id = "liveLink2" > < / a > < / span >
< / div >
2019-06-26 19:39:10 +00:00
< form id = "disabled-tests" >
< fieldset id = "disabled-fieldset" disabled = "disabled" >
< a id = "disabled-fieldset-a" href = "#" > < / a >
< input id = "disabled-fieldset-input" name = "disabled-fieldset-input" type = "text" / >
< textarea id = "disabled-fieldset-textarea" name = "disabled-fieldset-textarea" > < / textarea >
< button id = "disabled-fieldset-button" name = "disabled-fieldset-button" > Go< / button >
<!-- exclude <select> because IE6 is bugged and fails
< select id = "disabled-fieldset-select" name = "disabled-fieldset-select" > < / select >
-->
< span id = "disabled-fieldset-span" > Neither enabled nor disabled< / span >
< / fieldset >
< fieldset id = "enabled-fieldset" >
< a id = "disabled-a" href = "#" disabled = "disabled" > < / a >
< input id = "disabled-input" name = "disabled-input" type = "text" disabled = "disabled" / >
< textarea id = "disabled-textarea" name = "disabled-textarea" disabled = "disabled" > < / textarea >
< button id = "disabled-button" name = "disabled-button" disabled = "disabled" > Go< / button >
< select id = "disabled-select" name = "disabled-select" disabled = "disabled" >
< optgroup id = "disabled-optgroup" label = "and" disabled = "disabled" >
< option id = "disabled-option" disabled = "disabled" > Black< / option >
< / optgroup >
< / select >
< input id = "enabled-input" name = "enabled-input" type = "text" / >
< textarea id = "enabled-textarea" name = "enabled-textarea" > < / textarea >
< button id = "enabled-button" name = "enabled-button" > Go< / button >
< select id = "enabled-select" name = "enabled-select" >
< optgroup id = "enabled-optgroup" label = "and" >
< option id = "enabled-option" > Gold< / option >
< / optgroup >
< / select >
< span id = "enabled-fieldset-span" > Neither enabled nor disabled< / span >
< / fieldset >
< select id = "disabled-select-inherit" name = "disabled-select-inherit" disabled = "disabled" >
< optgroup id = "disabled-optgroup-inherit" label = "and" disabled = "disabled" >
< option id = "disabled-optgroup-option" > Black< / option >
< / optgroup >
< optgroup id = "enabled-optgroup-inherit" label = "and" >
< option id = "enabled-optgroup-option" > Gold< / option >
< / optgroup >
< / select >
< select id = "enabled-select-inherit" name = "enabled-select-inherit" >
< optgroup id = "en_disabled-optgroup-inherit" label = "and" disabled = "disabled" >
< option id = "en_disabled-optgroup-option" > Black< / option >
< / optgroup >
< option id = "enabled-select-option" > Black< / option >
< / select >
< / form >
2017-08-01 16:52:45 +00:00
< div id = "siblingTest" >
< em id = "siblingfirst" > 1< / em >
< em id = "siblingnext" > 2< / em >
< em id = "siblingthird" >
< em id = "siblingchild" >
< em id = "siblinggrandchild" >
< em id = "siblinggreatgrandchild" > < / em >
< / em >
< / em >
< / em >
< span id = "siblingspan" > < / span >
< / div >
< div id = "fx-test-group" style = "position: absolute; width: 1px; height: 1px; overflow: hidden;" >
< div id = "fx-queue" name = "test" >
2019-06-26 19:39:10 +00:00
< div id = "fadein" class = 'chain-test' > fadeIn< div > fadeIn< / div > < / div >
2017-08-01 16:52:45 +00:00
< div id = "fadeout" class = 'chain-test chain-test-out' > fadeOut< div > fadeOut< / div > < / div >
< div id = "show" class = 'chain-test' > show< div > show< / div > < / div >
< div id = "hide" class = 'chain-test chain-test-out' > hide< div > hide< / div > < / div >
< div id = "easehide" class = 'chain-test chain-test-out' > hide< div > hide< / div > < / div >
< div id = "togglein" class = 'chain-test' > togglein< div > togglein< / div > < / div >
< div id = "toggleout" class = 'chain-test chain-test-out' > toggleout< div > toggleout< / div > < / div >
< div id = "easetoggleout" class = 'chain-test chain-test-out' > toggleout< div > toggleout< / div > < / div >
< div id = "slideup" class = 'chain-test' > slideUp< div > slideUp< / div > < / div >
< div id = "slidedown" class = 'chain-test chain-test-out' > slideDown< div > slideDown< / div > < / div >
< div id = "easeslideup" class = 'chain-test' > slideUp< div > slideUp< / div > < / div >
< div id = "slidetogglein" class = 'chain-test' > slideToggleIn< div > slideToggleIn< / div > < / div >
< div id = "slidetoggleout" class = 'chain-test chain-test-out' > slideToggleOut< div > slideToggleOut< / div > < / div >
< div id = "fadetogglein" class = 'chain-test' > fadeToggleIn< div > fadeToggleIn< / div > < / div >
< div id = "fadetoggleout" class = 'chain-test chain-test-out' > fadeToggleOut< div > fadeToggleOut< / div > < / div >
< div id = "fadeto" class = 'chain-test' > fadeTo< div > fadeTo< / div > < / div >
< / div >
< div id = "fx-tests" > < / div >
< span id = "display" > < / span >
< / div >
2019-06-26 19:39:10 +00:00
< br id = "last" / >
