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というオブジェクトが返されたことになります。