DOM（Document Object Model）基本について

Question

javascriptでのDOMの操作や取得について

今、現在DOMの実装しているのですかコードの書き方がわからず半日中進まずどのように実装して、どうやって取得しているのかわかりません...
あと取得できているかのコンソールの掛け方もです。

今回の質問

コードの書き方
取得できてるかコンソールでの掛け方

問題
element.firstElementChild; //最初の子要素を取得せよ

       var elem = document.getElementById('test'); //ここと//
       var elem = element.firstElementChild;//ここ//
       console.log(test); //コンソールの掛け方合ってる？

       

すいません、自分でも何やってるかわからず、何ができていないのかもわからず
結構課題が多いのですがこのようなのはみな同じ書き方でしょうか？
よろしくお願いします

■親子兄弟要素へのアクセス

//親要素
element.parentNode;

//子要素
element.firstElementChild; //最初の子要素
element.lastElementChild; //最後の子要素
element.children; //子要素リスト

//１つ前の要素
element.previousElementSibling;

//１つ後の要素
element.nextElementSibling;

■要素の作成・追加

//要素の作成
var div = document.createElement(‘div’);
div.textContent = ‘hoge’;

//最後の子要素として追加
element.appendChild(div);

//最初の子要素として追加
element.insertBefore(div, element.firstChild);

//要素の直前に追加
element.parentNode.insertBefore(div, element);

//要素の直後に追加
element.parentNode.insertBefore(div, element.nextSibling);

■要素の削除

//特定の子要素削除
element.removeChild(child);

//自分を削除
element.parentNode.removeChild(element);

//子要素を全て削除
while (element.firstChild) element.removeChild(element.firstChild);

//子要素を全て削除(part2)
element.textContent = null;

■属性の操作

//属性の取得
element.getAttribute(‘href’);

//属性を設定
element.setAttribute(‘href’, ‘http://’);

//属性を削除
element.removeAttribute(‘href’);

■スタイル関連操作

//class追加
element.classList.add(‘active’);

//class削除
element.classList.remove(‘active’);

//classをトグル
element.classList.toggle(‘active’);

//スタイルを直接指定
element.style.backgroundColor = ‘#******’;

Comments

[honami]

まずelementやtestといった変数はどこで宣言されているのですか？

[ginowan589]

ご回答ありがとうございます。elementやtestの変数に対しての定義が成り立ってなかったということですね。

Answer 1

 var elem = document.getElementById('test'); 
       var elem = element.firstElementChild;

ではなく、

 var elem = document.getElementById('test'); 
       var child = elem.firstElementChild;

ではないでしょうか。

 var elem = document.getElementById('test'); 
       var elem = element.firstElementChild;

だと、じゃあelementってどこを指すの？って話になって、javascriptは意味わかんないってなります。定義した変数しかjavascriptは理解できませんので。しかもこれだと変数を上書きしてますよ。

Comments

[ginowan589]

ご回答ありがとうございます。
elemの使い方や定義がおかしいということですね。
いろいろと試したいと思います。

Answer 2

質問者さんのコード

var elem = document.getElementById('test'); //ここと//
var elem = element.firstElementChild;//ここ//
console.log(test); //コンソールの掛け方合ってる？

HTML Standard を実装しているブラウザにおいては <element id="test"> をグローバル変数 test で参照できるように実装されている為、このコードでも動作はします。
しかし、その方法で参照するならば、1行目の getElementById による参照が全くの無意味であり、ようするに間違っています。
また、エラーにはなりませんが、同じ変数名を var で宣言するのは無駄なので、変数名を変えるか、後述の変数宣言処理で var を削除する方が好ましいと思います。

修正案コード

var elem = document.getElementById('test'); //ここと//
console.log(elem);

elem = element.firstElementChild;//ここ//
console.log(elem);

Re: ginowan589 さん