HTML(DOM)のタグ名(型)による要素の選択
HTMLソース内にあるタグ名による要素の選択を試してみます。
以下のソースがある場合、HTML本文内にあるdivタグの選択をします。
HTMLソース内にdivタグの組み合わせが一つしかない場合は、それ単一で、
複数ある場合は、NodeListオブジェクトを取得します。
HTMLタグは大文字でも小文字でも取得されます。(区別されない)
実際に下記のHTMLソースをサーバ上に置き、ブラウザからアクセスして試してみます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <div>test1</div> <div>test2</div> <div>test3</div> <div>test4</div> <div>test5</div> <script type="text/javascript"> let test_tag = document.getElementsByTagName('div'); console.log("test_tag -> " + test_tag); </script> </body> </html>
コンソールの出力は以下のようになります。
test_tag -> [object HTMLCollection]
先ほどNodeListオブジェクトと書きましたが、開発ツールで確認すると、
HTMLCollections という値になりました。
では、このHTMLCollectionsに対して、javascriptからアクセスしてみます。
先ほどのHTMLソース内のjavascriptの箇所に、下記のように追記してみます。
<script type="text/javascript"> let test_tag = document.getElementsByTagName('div'); console.log("test_tag -> " + test_tag); Array.prototype.forEach.call(test_tag, function(item) { console.dir(item); }); </script>
結果は、次のようになります。
(ここでは便宜上console.dirを使って確認しています)
test_tag -> [object HTMLCollection] test.html:21 div accessKey: "" align: "" ariaAtomic: null ariaAutoComplete: null ariaBusy: null ariaChecked: null ariaColCount: null ariaColIndex: null ariaColSpan: null ariaCurrent: null ariaDescription: null ariaDisabled: null ariaExpanded: null ariaHasPopup: null ariaHidden: null ariaKeyShortcuts: null ariaLabel: null ariaLevel: null ariaLive: null ariaModal: null ariaMultiLine: null ariaMultiSelectable: null ariaOrientation: null ariaPlaceholder: null ariaPosInSet: null ariaPressed: null ariaReadOnly: null ariaRelevant: null ariaRequired: null ariaRoleDescription: null ariaRowCount: null ariaRowIndex: null ariaRowSpan: null ariaSelected: null ariaSetSize: null ariaSort: null ariaValueMax: null ariaValueMin: null ariaValueNow: null ariaValueText: null assignedSlot: null attributeStyleMap: StylePropertyMap {size: 0} attributes: NamedNodeMap {length: 0} autocapitalize: "" autofocus: false baseURI: "https://propansystem.net/blogsample/js/020/test.html" childElementCount: 0 childNodes: NodeList [text] children: HTMLCollection [] classList: DOMTokenList [value: ""] className: "" clientHeight: 24 clientLeft: 0 clientTop: 0 clientWidth: 1006 contentEditable: "inherit" dataset: DOMStringMap {} dir: "" draggable: false elementTiming: "" enterKeyHint: "" firstChild: text firstElementChild: null hidden: false id: "" innerHTML: "test1" innerText: "test1" inputMode: "" isConnected: true isContentEditable: false lang: "" lastChild: text lastElementChild: null localName: "div" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: div nextSibling: text nodeName: "DIV" nodeType: 1 nodeValue: null nonce: "" offsetHeight: 24 offsetLeft: 8 offsetParent: body offsetTop: 8 offsetWidth: 1006 onabort: null onanimationend: null onanimationiteration: null onanimationstart: null onauxclick: null onbeforecopy: null onbeforecut: null onbeforepaste: null onbeforexrselect: null onblur: null oncancel: null oncanplay: null oncanplaythrough: null onchange: null onclick: null onclose: null oncontextmenu: null oncopy: null oncuechange: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null ondurationchange: null onemptied: null onended: null onerror: null onfocus: null onformdata: null onfullscreenchange: null onfullscreenerror: null ongotpointercapture: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onloadeddata: null onloadedmetadata: null onloadstart: null onlostpointercapture: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onpause: null onplay: null onplaying: null onpointercancel: null onpointerdown: null onpointerenter: null onpointerleave: null onpointermove: null onpointerout: null onpointerover: null onpointerrawupdate: null onpointerup: null onprogress: null onratechange: null onreset: null onresize: null onscroll: null onsearch: null onseeked: null onseeking: null onselect: null onselectionchange: null onselectstart: null onstalled: null onsubmit: null onsuspend: null ontimeupdate: null ontoggle: null ontransitioncancel: null ontransitionend: null ontransitionrun: null ontransitionstart: null onvolumechange: null onwaiting: null onwebkitanimationend: null onwebkitanimationiteration: null onwebkitanimationstart: null onwebkitfullscreenchange: null onwebkitfullscreenerror: null onwebkittransitionend: null onwheel: null outerHTML: "<div>test1</div>" outerText: "test1" ownerDocument: document parentElement: head parentNode: head part: DOMTokenList [value: ""] prefix: null previousElementSibling: title previousSibling: text scrollHeight: 24 scrollLeft: 0 scrollTop: 0 scrollWidth: 1006 shadowRoot: null slot: "" spellcheck: true style: CSSStyleDeclaration {additiveSymbols: "", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", …} tabIndex: -1 tagName: "DIV" textContent: "test1" title: "" translate: true __proto__: HTMLDivElement
という出力になりました。
これはHTMLCollections内の要素にアクセスしたところ、HTMLDivElementというオブジェクトが返されたことになります。