// 問題1. ul要素の最初の子要素にピンク色の背景色を設定してください
const ulContents = document.querySelector('.contents')
const firstUlChild = ulContents.firstElementChild

firstUlChild.style.backgroundColor = '#ffc0cb'

// 問題2. ul要素の最後の子要素にオレンジ色の背景色を設定してください
const lastUlChild = ulContents.lastElementChild

lastUlChild.style.backgroundColor = '#ffa500'


firstElementChild

lastElementChild

document.querySelector()

element.style

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

background-color

// 問題1. ul要素の最初の子要素にピンク色の背景色を設定してください

firstUlChild.style.backgroundColor = '#ffc0cb';

// 問題2. ul要素の最後の子要素にオレンジ色の背景色を設定してください

lastUlChild.style.backgroundColor = '#ffa500';

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

document.getElementsByClassName()

element.textContent

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

document.getElementsByTagName()

document.addEventListener()

mouseoverイベント

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

color

border-radius

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

document.querySelectorAll()

配列操作/forEach

border

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

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

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

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