HTML要素間の関係のパターン
祖先 - 子孫
code:html
<label>
Name: <input>
</label>
code:html
<form>
<div>
<input type="submit" id="submit-button">
</div>
</form>
code:javascript
$input.form // => HTMLFormElement
$form.elements // => HTMLFormControlsCollection
code:html
<select name="chosen">
<option value="option-01" id="option-01">Option 1</option>
<option value="option-02" id="option-02">Option 2</option>
</select>
code:javascript
$select.options // => HTMLOptionsCollection
$select.item(0) // => HTMLOptionElement
$select.namedItem('option-02') // => HTMLOptionElement
参照する側が参照される側のidを持つ(単数)
code:html
<label for="input-01">Name:</label> <input id="input-01">
code:html
<form id="form-01"></form>
<input form="form-01">
参照する側が参照される側のidを持つ(複数)
code:html
<input type="number" id="operand-01" value="1"> + <input type="number" id="operand-02" value="2"> = <output for="operand-01 operand-02" value="3">
code:html
<div role="dialog" aria-labelledby="open-button dialog-title">
<h2 id="dialog-title">Here info you want</h2>
<button type="button">Close</button>
</div>
<button type="button" id="open-button">Great information</button>
参照元が複数
code:html
<dl>
<dt id="def">A word</dt>
<dd aria-labelledby="def">Short definition.</dd>
<dd aria-labelledby="def">Long definition.</dd>
</dl>