HTML(DOM)のclassによる要素の選択
HTMLソース内にあるclass名による要素の選択を試してみます。
以下のソースがある場合、HTML本文内にあるdivタグの選択をします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <div class="test">test1</div> <div class="test">test2</div> <div class="test">test3</div> <div class="test">test4</div> <div class="test">test5</div> <script type="text/javascript"> let test_class = document.getElementsByClassName('test'); console.log("test_class -> " + test_class); </script> </body> </html>
コンソールの出力は以下のようになります。
test_class -> [object HTMLCollection]
続いて、javascriptを下記のように書き変えて、test_classで取得できた内容を出力してみます。
<script type="text/javascript"> let test_class = document.getElementsByClassName('test'); console.log("test_class -> " + test_class); Array.prototype.forEach.call(test_class, function(item) { console.dir(item); }); </script>
結果は、次のようになります。
test_class -> [object HTMLCollection] test.html:21 div.test test.html:21 div.test test.html:21 div.test test.html:21 div.test test.html:21 div.test
という出力になりました。
ただし、これはブラウザの開発ツールで見た結果なので、
「div.test」の中にはさらに詳細な情報が含まれています。
例えば、一番上の「div.test」を展開してみると、次のような結果になります。
div.test 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 {0: class, class: class, length: 1} autocapitalize: "" autofocus: false baseURI: "https://propansystem.net/blogsample/js/021/test.html" childElementCount: 0 childNodes: NodeList [text] children: HTMLCollection [] classList: DOMTokenList ["test", value: "test"] className: "test" clientHeight: 24 clientLeft: 0 clientTop: 0 clientWidth: 1007 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.test nextSibling: text nodeName: "DIV" nodeType: 1 nodeValue: null nonce: "" offsetHeight: 24 offsetLeft: 8 offsetParent: body offsetTop: 8 offsetWidth: 1007 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 class=\"test\">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: 1007 shadowRoot: null slot: "" spellcheck: true style: CSSStyleDeclaration {additiveSymbols: "", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", …} tabIndex: -1 tagName: "DIV" textContent: "test1" title: "" translate: true __proto__: HTMLDivElement
これも、前回の名前で取得した時と同様、divタグをjavascript側のオブジェクトとして取得していることがわかります。
また、メソッドもプロパティも同様に含まれているので、プログラミングをしてdivタグを操作することが可能になります。