◆ links とか scripts とか
◆ form の elements で form 内の input 系の要素
◆ form.elements.fieldset.elements でグループごとにもアクセスできる
◆ select.add(new Option("1", "1", true, true)) で選択肢追加 
最近は CSS Selector でできるので全部 CSS Selector でやりがちですが 便利なプロパティが用意されていたりします
これまでほとんど使ったことがなく 最近増えたとかは聞かないのでどれも昔からあるものだと思います
CSS Selector ができるまでのスタンダードな方法だったのかも

document.all [Deprecated]

全部のエレメントを取得できます
似た系統のものは今でもつかえるのに これは deprecated でした
deprecated ですが devtools で使い捨てに使う分には便利なときもあるので入ってます

CSS Selector ならこういうことです
document.querySelectorAll("*")

短く 「document.all」 だけでできるので楽です
便利だし deprecated にしなくてもいいと思うんだけどな

全く同じものではなく違いもあります
querySelectorAll は NodeList ですが document.all は HTMLCollection です

また document.all には name を属性をキーにした要素もプロパティに含まれます

<!doctype html>
<meta charset="utf-8"/>

<a name="a"></a>
<input name="input">
<input>
<section name="section"></section>

この HTML ならこういう HTMLCollection になります

a: a
input: input
length: 8
0: html
1: head
2: meta
3: body
4: a
5: input
6: input
7: section

a や input は配列部分にも含まれますが name 属性をキーにしてアクセスも可能です

name 属性はすべてのタグではなく name がつけられる input 系や a タグなどのみです
section のように name 属性がないタグはつけても何も起きません

devtools で
document.all.usernum
のように name でアクセスできるのがいいところです


document.○○s

img エレメントや form エレメントなどを取得できます
  • document.links
  • document.images
  • document.forms
  • document.embeds
  • document.plugins
  • document.scripts
  • document.styleSheets
  • document.styleSheetSets
  • document.anchors
  • document.applets

links だと href 属性のある a タグと href 属性のある area タグの集合で anchors だと name 属性のある a タグの集合です
document.all のように HTMLCollection で name 属性があるとそれをキーにしたアクセスもできるようになっています

MDN によれば anchors と applets の 2 つが deprecated ですが plugins や styleSheetSets や embeds も使う機会はなさそうです

普段使うことがあるのは links / images / forms だと思います
scripts と styleSheets はごく稀に使いときがあります
残りは使ったことないです

プラグインってなんだろうと whatwg のスペックを見てみると embeds と同じオブジェクトが返ってくるようです
embed の方は embed タグの集合です

styleSheets と styleSheetSets は whatwg のスペックには載ってませんでした
他の images などは 要素の HTMLCollection を返すのに対して これらは返すものが違うので 別のところに書いてるのかもしれません

styleSheets は StyleSheetList 形式が返り値です
参考: CSS を JavaScript で操作する

styleSheetSets は Chrome にはないもので DOMStringList で style sheet に設定した title 属性の値のリストです
私は使ったことなかったのですが css には代替スタイルシートと言う機能があります
スタイルを複数定義しておいて ブラウザのメニューでどれを使うか切り替えれるものです
ずっと Chrome なのでそんな機能あることを今回初めて知ったのですが Firefox ではメニューバーの 「表示」>「スタイルシート」から切り替え出来ました

Chrome はそもそもこの機能を実装していないから プロパティもないのですね

form

form や form パーツにも便利なプロパティが用意されています

<form>
<input name="a">
<select name="s"><option>1</option><option>2</option></select>
<input type="radio" name="r1">
<input type="radio" name="r2">
<input type="radio" name="r2">
<input type="radio" name="r3">
<fieldset name="fs">
<input type="checkbox" name="c">
<input type="checkbox">
<input type="radio" name="r3">
</fieldset>
<input name="b">
<input name="b">
</form>

elements プロパティには form 内のコントロールなど form パーツのみが入っています

var form = document.forms[0]
console.log(form.elements)
HTMLFormControlsCollection(12)
a: input
b: RadioNodeList(2)
c: input
fs: fieldset
length: 12
r1: input
r2: RadioNodeList(2)
r3: RadioNodeList(2)
s: select
0: input
1: select
2: input
3: input
4: input
5: input
6: fieldset
7: input
8: input
9: input
10: input
11: input

name があるものは例のごとく 名前でもアクセスできるようになっています
また 同じ名前があると RadioNodeList にまとめられます

radio ボタンじゃなくても同じ名前だとまとめられます
通常 radio 意外で同じ名前にはしないと思うので問題はないと思います
PHP は最後に [] にすれば配列になるとかあったと思いますが PHP の仕様のほうの都合なので JavaScript の仕様を 1 サーバサイド言語に合わせる必要もないでしょう

fieldset は input 系ではないですが グループ化するためのものなので elements に含まれます
fieldset にも elements プロパティがあり fieldset 内のフォームパーツにアクセスできます

console.log(form.elements.fs.elements)
HTMLFormControlsCollection(3)
c: input
length: 3
r3: input
0: input
1: input
2: input

fieldset の内側だと r3 は 1 つだけなので RadioNodeList でなく単体になっています

select

他の input 系エレメントと違って select は知らない使い方がありました

var s = document.createElement("select")
s.multiple = true
s.add(new Option("a", "A", false, false))
s.add(new Option("b", "B", false, false))
s.add(new Option("c", "C", true, true))
s.add(new Option("d", "D", true, true))
s.add(new Option("e", "E", false, false))
s.add(new Option("f", "F", true, true))
console.log(s.selectedIndex)
console.log(s.selectedOptions)
2
[option, option, option]

multiple した場合の取得は selectedOption で JavaScript でセットするには option のプロパティを書き換えます
select の value プロパティでは 1 つめしかとれないですし セットできません

また DOM 風に option を createElement して append する以外にも 選択肢を作れる方法がありました
ただ消すメソッドがなかったので消すときは option エレメントを remove することになります

Option の 3 つめは属性なので 3 つ目に true を指定しても add したときに selected 状態にはなりません
実際の状態を変えるには 4 つ目に true をセットしないといけないです


img タグも new Img() でつくれますし ところどころコンストラクタが用意されてるのがありますね


普段は CSS セレクタと append/remove でやってしまっていたことですが こんなプロパティやメソッドたちもあったんですねー