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; //子要素リスト
//1つ前の要素
element.previousElementSibling;
//1つ後の要素
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 = ‘#******’;
回答2件
あなたの回答
tips
プレビュー