<div class="container">
  <p>子要素1</p>
  <p>子要素2</p>
  <p>子要素3</p>
</div>
<button id="changeButton">太字にする</button>

<style>
  button {
    border: none;
    border-radius: 100vh;
    background-color: #eb6100;
    color: #fff;
    padding: 10px 30px;
    cursor: pointer;
  }
</style>


// 問題1. p要素全てを太字に設定してください
const changeButton = document.querySelector('#changeButton');

changeButton.addEventListener('click', () => {
  const container = document.querySelector('.container');
  const paragraphs = container.children;
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.fontWeight = 'bold';
  }
});

children

document.querySelector()

document.addEventListener()

clickイベント

element.style

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

font-weight

// 問題1. p要素全てを太字に設定してください
const changeButton = document.querySelector('#changeButton');


  
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.fontWeight = 'bold';
  }


子要素を取得しよう

document.getElementsByClassName()

element.textContent

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

document.getElementsByTagName()

mouseoverイベント

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

color

background-color

border-radius

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

document.querySelectorAll()

配列操作/forEach

border

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

text-decoration

演習

parentElement

createElement(tag_type)

element.appendChild(element)

親要素を取得しよう

nextElementSibling

previousElementSibling

前後の要素を取得しよう

firstElementChild

lastElementChild

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

総合問題

さまざまな要素の取得方法を学ぼう

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

```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)'; 
```

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

子要素を取得しよう

まずは必要なスキルを確認しましょう！