Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダーAdvent Calendar 2022Day 22
@taka0713(taka)

[Day22] ドキュメント part2

Last updated at Posted at 2022-12-21

本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー

JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

2.1.5 ノードのプロパティ: タイプ、タグとコンテンツ

知らない単語

  • 無し

学んだこと

  • DOM ノードクラス

異なる DOM ノードは異なるプロパティを持ち、例えば、タグ a に対応する要素ノードはリンク関連のプロパティを持っていて、input に対応する要素ノードは入力関連のプロパティを持っている
テキストノードは要素ノードとは違うが、すべての DOM ノードのクラスは1つのの階層を形成するため、すべてのノードで共通のプロパティやメソッドがある

  • “nodeType” プロパティ

nodeType プロパティは DOM ノードの “タイプ” を取得する昔ながらの方法である
次の数値を持つ

elem.nodeType == 1 は要素ノード,
elem.nodeType == 3 はテキストノード,
elem.nodeType == 9 はドキュメントオブジェクト,
スペック では他の値もある

  • nodeName/tagName
    要素の場合、タグ名である
    読み取り専用で、非要素ノードの場合、nodeName はそれが何かを説明する

  • innerHTML
    要素のHTMLコンテンツ、変更可能

  • outerHTML
    要素の完全なHTML
    elem.outerHTML への書き込み操作は elem 自体には触れない代わりに、外部のコンテキストで新しいHTMLで置き換える

  • nodeValue/data
    非要素ノードのコンテンツ
    これら2つはほとんど同じで通常は data を使う

  • textContent
    要素中のテキストで、基本的には HTML からすべての タグ を除いたものである
    それに書き込むと、要素内にテキストが配置され、すべての特殊文字とタグがテキストとして正確に扱われる

感想

ノード関連でも、nodeName/tagName、innerHTML、outerHTML、nodeValue/data、textContentなど、種類が多いので使い方を間違えないようにしたい。

2.1.6 属性とプロパティ

知らない単語

  • パースとは
    • 文法に従って分析する、品詞を記述する、構文解析する

学んだこと

  • DOM プロパティ

技術的な制限がないため、不十分であれば独自のプロパティが追加できる
DOM ノードは通常のオブジェクトで、それを変更できる

例えば、document.body に新しいプロパティを作成する

document.body.myData = {
  name: 'Caesar',
  title: 'Imperator'
};

alert(document.body.myData.title); // Imperator

同様にメソッドの追加もできる

document.body.sayHi = function() {
  alert(this.tagName);
};

document.body.sayHi(); // BODY (このメソッドの "this" の値は document.body)
  • HTML 属性

HTMLでは、タグが属性を持つことがある
ブラウザがHTMLをパースして、タグに対する DOM オブジェクトを作成するとき、標準の 属性を認識し、DOM プロパティを生成する

従って、要素が id または他の 標準の 属性を持っている場合、対応するプロパティが生成されるが、属性が非標準の場合はプロパティは生成されない

  • 属性を操作するメソッド

elem.hasAttribute(name) – 存在をチェックする
elem.getAttribute(name) – 値を取得する
elem.setAttribute(name, value) – 値をセットする
elem.removeAttribute(name) – 属性を削除する
elem.attributes はすべての属性の集合である

感想

属性を操作するメソッドがあるが、ほとんどの状況で、DOMプロパティの方が好ましいと思われる
正確な属性が必要なときなど、DOMプロパティが適切でない場合にのみ属性を参照すべきだと思うので、適切に使用していきたい。

2.1.7 ドキュメントの変更

知らない単語

  • 無し

学んだこと

  • 例: メッセージを表示

alert よりも見栄えの良いメッセージを表示する

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Hi there!</strong> You've read an important message.
</div>

スクリーンショット 2022-12-19 20.24.14.png

画像のように表示され、見やすくなる

  • 要素の作成

DOM ノードを作成するメソッド2つ

document.createElement(tag)
指定されたタグの新しい 要素ノード を作成する

let div = document.createElement('div');

document.createTextNode(text)
指定されたテキストの新しい テキストノード を作成する

let textNode = document.createTextNode('Here I am');

このように使うが、メッセージのための div のように、要素ノードを作成する必要がある

  • メッセージの作成

メッセージの div の作成は次の3つのステップになります:

// 1. <div> 要素の作成
let div = document.createElement('div');

// 2. クラスに "alert" をセット
div.className = "alert";

// 3. コンテンツをセット
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

要素は作成されたが、挿入はされてない

  • 挿入メソッド

div を表示するためには、document のどこかに挿入する必要がある
そのために特別なメソッドがある
document.body.appendChild(div).

下記のような書き方をする

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<script>
  let div = document.createElement('div');
  div.className = "alert alert-success";
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

  document.body.appendChild(div);
</script>

上記はdocument.body に対して append を呼び出したが、他の要素の場合でも append でその中に要素を置くことができる

感想

要素の作成、挿入でメソッドが違うので、間違えないように覚える必要がある。

2.1.8 スタイルとクラス

知らない単語

  • スタイル
    　- 文書やその構成要素の見た目の様式

  • キャメルケース

    • プログラミングなどで英語の複合語やフレーズ、文を一語に繋げて表記する際に、各構成語の先頭を大文字にする方式

学んだこと

要素をスタイルする方法が2つある

CSS でクラスを生成し、それを追加する方法 div class="..."
style に直接プロパティを書く方法 div style="..."

JavaScript はクラスと style プロパティの両方の変更が可能
style よりも CSS クラスを優先した方が良い
styleの方は、クラスでは 処理しきれない場合にのみ使用すべき

  • className と classList

昔のJavaScript には制限があり、 class のような予約語はオブジェクトプロパティにはできなかった
現在その制限は存在しないが、当時は elem.class にように class プロパティは持てなかったので、クラスに対しては類似したプロパティ名 className が導入された

例えば

<body class="main page">
  <script>
    alert(document.body.className); // main page
  </script>
</body>

のようになる

  • 要素のスタイル

プロパティ elem.style は style 属性に書かれたものに対応するオブジェクトである

複数語のプロパティは、キャメルケースが使われる

background-color  => elem.style.backgroundColor
z-index           => elem.style.zIndex
border-left-width => elem.style.borderLeftWid
  • スタイルプロパティのリセット

スタイルプロパティを割り当てた後、削除したい場合、
要素を隠すには elem.style.display = "none" とする
後でそれがセットされていなかったかのように、style.display を削除したいかもしれない場合、delete elem.style.display を行う代わりに空行を割り当てるべきである

感想

要素をスタイルする方法は2つの内、CSS でクラスを生成する方は特によく使うと思うので、正しい使い方を覚えておく。

最後に

ノードやドキュメントについて学んだが、ノードはよく使う上に複雑のなので、整理しながら理解を深めたい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?