KnowHow

技術的なメモを中心にまとめます。
検索にて調べることができます。

JavaScriptチートシート５（DOM操作１：基本）

登録日 ：2025/02/09 14:57
カテゴリ ：Linux

DOM操作の基本
DOM: Document Object Model
WebPagewo JavaScriptで表現したもの

ブラウザ上では、HTMLに対応した、Javascriptのオブジェクトがツリー構造で作成されている。
documentがオブジェクトのrootとなっている

ブラウザの検証で「console.dir(document)」と入力することで表示できる。

要素の取得

document.getElementById('toc')
document.getElementsByTagName('p') -> HTMLコレクションを返す
document.getElementsByClassName('square')

querySelector:Id名、タグ名、クラス名をすべて扱える
　querySelectorは最初の一つのみ
document.querySelector('h1');
document.querySelector('#red');
document.querySelector('.big');

document.querySelector('img:nth-of-type(2)')
document.querySelector('a[title="ヒツジ"')

全部取得する
querySelectorAll

document.querySelectorAll('p')
document.querySelectorAll('p a')

プロパティとメソッド

text

innerHTML : HTMLとしての要素も含まれる
innerText :
textContent :　HTMLの改行やスペースの要素も含まれる（ノード内のすべての要素を返す）

const h1 = document.querySelector('h1');
undefined
h1.innerHTML
'ニワトリ'
h1.innerText
'ニワトリ'
h1.textContent
'ニワトリ'
属性
document.querySelector('#banner').id
document.querySelector('a')
<a href=​"/​wiki/​%E5%BA%AD" title=​"庭">​I am a link!!!!!​</a>​
document.querySelector('a').href
'http://127.0.0.1:5500/wiki/%E5%BA%AD'
document.querySelector('a').title
'庭'

# getAttribute
# setAttribute

const firstlink = document.querySelector('a');
firstlink.href
'http://127.0.0.1:5500/wiki/%E5%BA%AD'
firstlink.getAttribute('href')
'/wiki/%E5%BA%AD'

firstlink.getAttribute('title')
'庭'
firstlink.setAttribute('title', '公園')
undefined
firstlink.getAttribute('title')
'公園'

const input = document.querySelector('input[type="text"]')
undefined
input
<input type=​"text" name id>​
input.text
undefined
input.type
'text'
input.type='color'
'color'
input.setAttribute('type', 'text')

const image= document.getselector('img[alt="egg"]')
image.src=""
image.alt=""
スタイルを変える
h1 = document.querySelector('h1')
<h1>​ニワトリ​</h1>​
h1.text
undefined
h1.style
CSSStyleDeclaration {accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
h1.style.color
''
h1.color = 'green'
'green'
h1.style.color = 'green'
'green'
h1.style.fontSize = '20px'
'20px'
getComputedStyle
const h1 = document.querySelector('h1')
undefined
h1
<h1>​ニワトリ​</h1>​
getComputedStyle(h1).color
'rgb(0, 0, 0)'
getComputedStyle(h1).fontSize
'32px'
class
h2 = document.querySelector('h2')
<h2 id=​"mw-toc-heading">​目次​</h2>​
h2.getAttribute('class')
null
h2.setAttribute('class', 'purple')
undefined
h2.setAttribute('class', 'purple')

h2.classList.add('border')

h2.classList.toggle('purple')
親・子
parentElement
children
nextSibling
previousSibling

const firstBold = document.querySelector('b');
undefined
firstBold
<b>​カケ​</b>​
firstBold.parentElement
<p>​…​</p>​
firstBold.parentElement.parentElement
<body>​…​</body>​
firstBold.children
HTMLCollection []length: 0[[Prototype]]: HTMLCollection
const paragraph = firstBold.parentElement.children
要素の追加
const newH3 = document.createElement('h3');
h3.innerText='Hello World'
# appendChild
document.body.appendChild(newH3)

# append(後ろに追加)
append
# prepend(一番前に追加)
prepend

#insetAdjacentElement(間に設置)
要素の削除
removeChild

const firstLi = document.querySelector('li')
const ul = firstLi.parentElement
ul.removeChild(firstLi)

const b = document.querySelector('b')
p.parentElement.removeChild(b)

const img = document.querySelector('img')
<img id=​"banner" src=​"https:​/​/​images.unsplash.com/​photo-1563281577-a7be47e20db9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" alt>​
img.remove()

戻る