document.getElementById('id名')

以下のボタンをクリックするとidから要素を取得しspan要素にテキストを設定する例を示します。

document.getElementsByClassName('クラス名')

以下のボタンをクリックするとクラス名から要素を取得しspan要素にテキストを設定する例を示します。同じクラスが複数ある場合があるため配列を返します。

document.getElementsTagName('クラス名')

以下のボタンをクリックするとタグ名から要素を取得しp要素にテキストを設定する例を示します。同じタグ名が複数ある場合があるため配列を返します。

document.querySelectorAll(セレクタ)
  ('.クラス名') // クラス名
  ('#ID名') // ID名
  ('.クラス名 タグ名') // クラス名に含まれるタグ
  ('タグ1名 タグ2名') // タグ1に含まれるタグ2
  ('タグ1名.クラス名 タグ2名') // クラス名のタグ1要素の中のタグ2名
  ('タグ名 > *') // タグ名直下のすべての要素

CSSセレクタを使用できます。
以下のボタンをクリックするとクラス名で示すクラスに含まれるspan要素にテキストを設定する例を示します。同じspanが複数ある場合があるため配列を返します。

document.previousElementSibling // 前の要素
document.nextElementSibling // 次の要素

以下のボタンをクリックすると自身の要素から兄弟要素にテキストを設定する例を示します。同じクラスが複数ある場合があるため配列を返します。
同じようなpreviousSibling,nextSiblingがありますが、これらは空白も要素として検出してしまうので使いにくいです。