JavaScript で要素をタグ名により取得し、テキストの内容を表示する

1. 要素をタグ名で取得

JavaScript で要素をタグ名で取得するには、

getElementsByTagName メソッド

を用いる。

例えば、HTML の div 要素を取得するには、

document.getElementsByTagname("div");

ちなみに、getElementsByTagName メソッドの Elements の `s’ をよく忘れ、エラーになることがある。 (+_+)

このメソッドは、Document インターフェイスで定義されている。

Interface Document

The Document interface represents the entire HTML or XML document. …

getElementsByTagName

Returns a NodeList of all the Elements with a given tag name in the order in which they are encountered in a preorder traversal of the Document tree.

Parameters

tagname of type DOMString

The name of the tag to match on. The special value "*" matches all tags.

Return Value

NodeList

A new NodeList object containing all the matched Elements.

 

インデックスで要素にアクセスする

getElementsByTagName によって返されるオブジェクトは NodeList 。

Document Object Model Core

getElementsByTagName

Returns a NodeList of all the Elements with a given tag name in the order in which they are encountered in a preorder traversal of the Document tree.

NodeList は、配列のようにインデックスで要素にアクセスできる。

Interface NodeList

The NodeList interface provides the abstraction of an ordered collection of nodes, …

The items in the NodeList are accessible via an integral index, starting from 0.

div 要素の 0 番目の要素を取得するには、

document.getElementsByTagname("div")[0];

 

2. テキストの内容を表示

要素を取得したら、その内容を表示したい。そのためには、Node オブジェクトに定義されている textContent 属性を取得する。

textContet は Document Object Model Core の Interface Node に定義されている。

textContent of type DOMString, introduced in DOM Level 3

This attribute returns the text content of this node and its descendants.

div 要素の 0 番目の要素のテキストを取得するには、

document.getElementsByTagname("div")[0].textContent;