document.querySelectorAll()

配列操作/forEach

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

border

color

<p>liタグだけボーダーがつきます</p>
<ul>
  <li>List1</li>
  <li>List2</li>
  <li>List3</li>
</ul>

<div>
  <p class="red">ここは文字色が赤色になります</p>
  <p>ここは文字色は変わりません</p>
  <p class="red">ここは文字色は赤色になります</p>
</div>

<style>
  * {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
    padding: 0 10px;
  }
</style>


// 問題1. li要素全て、ボーダーを設定してください
const lists = document.querySelectorAll('li')

lists.forEach((list) => {
  list.style.border = '1px solid #333'
})

// 問題2. 特定のp要素全ての文字色を赤色に変更してください
const texts = document.querySelectorAll('.red')

texts.forEach((text) => {
  text.style.color = '#ff0000'
})


// 問題1. li要素全て、ボーダーを設定してください
const lists = 

lists.forEach((list) => {
  
});

// 問題2. 特定のp要素全ての文字色を赤色に変更してください
const texts = 


任意のCSSセレクターから全ての要素を取得しよう

document.getElementsByClassName()

element.textContent

~~~javascript
var element = $(1).getElementById($('2'));
element.textContent = $('3');
console.log(element.textContent);
~~~

要素のテキスト内容を変更しよう

document.getElementsByTagName()

document.addEventListener()

mouseoverイベント

タグの種類から要素を取得しよう

document.querySelector()

background-color

border-radius

任意のCSSセレクターから特定の要素を取得しよう

clickイベント

text-decoration

演習

parentElement

createElement(tag_type)

element.appendChild(element)

親要素を取得しよう

children

font-weight

子要素を取得しよう

nextElementSibling

previousElementSibling

```html
<div id="firstDiv">これは1番目の要素です</div>
<div id="secondDiv">これは2番目の要素です</div>
```

```javascript
const secondDiv = document.getElementById('$(1)');
const firstDiv = secondDiv.previousElementSibling;

firstDiv.style.backgroundColor = '$(2)'; 
```

前後の要素を取得しよう

firstElementChild

lastElementChild

最初と最後の要素を取得しよう

総合問題

JavaScriptを使ったDOM要素の取得方法を幅広く学び、Webページ内での柔軟な要素制御を可能にします。
タグから親子関係まで詳細に扱います。

webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【基礎を学ぼう🔰】はじめて学ぶDOM操作入門

「さまざまな要素の取得方法を学ぼう」レッスンの総復習クイズです。