Elementとは

Elementとは文書の要素を示すインターフェイスです。

プロパティ

兄弟要素

<div>
  <p id="pa">A</p>
  <p id="pb">B</p>
  <p id="pc">C</p>  
</div>

console.log(document.getElementById('pb').previousElementSibling);
//=> <p id="pa">A</p>
console.log(document.getElementById('pb').nextElementSibling);
//=> <p id="pc">C</p>

各要素の値

<div id="box">
  <p>テスト</p>
</div>

console.log(document.getElementById('box').innerHTML);
//=> " <p>テスト</p> "
console.log(document.getElementById('box').outerHTML);
//=> "<div id="box"> <p>テスト</p> </div>"
console.log(document.getElementById('box').id);
//=> "box"
console.log(document.getElementById('box').localName);
//=> "div"
console.log(document.getElementById('box').tagName);
//=> "DIV"
console.log(document.getElementById('box').tabStop);
//=> undefined

属性のリスト attributes

<div id="box" name="boxName" class="style"></div>

console.log(document.getElementById('box').attributes);
//=> NamedNodeMap {0: id, 1: name, 2: class, id: id, name: name, class: class, length: 3}

クラス

<div id="box" class="classA classB classC"></div>

console.log(document.getElementById('box').classList);
//=> DOMTokenList(3) ["classA", "classB", "classC", value: "classA classB classC"]

console.log(document.getElementById('box').className);
//=> classA classB classC
undefined

要素の大きさと位置

console.log(document.getElementById('text').clientWidth); // 要素の内部の幅
console.log(document.getElementById('text').clientHeight); //要素の内部の高さ
console.log(document.getElementById('text').clientLeft); //要素左の位置
console.log(document.getElementById('text').clientTop); //要素上の位置

スクロール

console.log(document.getElementById('text').scrollHeight);  //スクロールビューの幅
console.log(document.getElementById('text').scrollWidth); //スクロールビューの高さ
console.log(document.getElementById('text').scrollLeft); //水平方向スクロール位置
console.log(document.getElementById('text').scrollTop); //垂直方向スクロール位置

メソッド

セレクタで祖先要素または地震を取得

<div>
  <div id="pa" class="class1">
    <div id="pb" class="class2">
      <div id="pc" class="class1">

      </div>
    </div>    
  </div>
</div>

console.log(document.getElementById('pc').closest('div.class1'));
// => <div id="pc" class="class1"> </div>
console.log(document.getElementById('pc').closest('div.class2'));
// => <div id="pb" class="class2">…</div>

要素の取得

<div id="box">
  <p id="p1" class="classA">テスト1</p>
  <p id="p2" class="classB">テスト2</p>
  <p id="p3" class="classA">テスト3</p>
</div>

const div = document.getElementById('box');
console.log(div.getElementsByClassName('classA'));
//=> HTMLCollection(2) [p#p1.classA, p#p3.classA, p1: p#p1.classA, p3: p#p3.classA]
console.log(div.getElementsByTagName('p'));
//=> HTMLCollection(3) [p#p1.classA, p#p2.classB, p#p3.classA, p1: p#p1.classA, p2: p#p2.classB, p3: p#p3.classA]
console.log(div.querySelector('#p2'));
//=> <p id="p2" class="classB">テスト2</p>
console.log(div.querySelectorAll('p.classA'));
//=> NodeList(2) [p#p1.classA, p#p3.classA]

属性の取得

<div id="box" class="className" style="border:solid 1px black"></div>

const div = document.getElementById("box");
for(const name of div.getAttributeNames()) {
  const value = div.getAttribute(name);
  console.log(`${name}=${value}`);
}
//"id=box"
//"class=className"
//"style=border:solid 1px black"

属性の存在チェック

<div id="box" class="className">A</div>

const div = document.getElementById("box");
console.log(div.hasAttribute('id'));　// true
console.log(div.hasAttribute('style')); // false
console.log(div.hasAttributes()); // true

属性の削除チェック

<div id="box" class="className">A</div>

const div = document.getElementById("box");
div.removeAttribute('class');
div.setAttribute('id','newid');
console.log(div.outerHTML);// => "<div id="newid">A</div>"

属性の切り替え

<input type="text" />
<button>クリック</button>

const button = document.querySelector("button");
document.querySelector("button").addEventListener("click", function(){
  var input = document.querySelector("input");
  input.toggleAttribute("disabled");
});

要素、テキストの追加

const div = document.createElement("div");
const divnew1 = document.createElement("div");
divnew1.id = "n1";
divnew1.textContent ="テスト"
div.appendChild(divnew1);

const divnew2 = document.createElement("div");
divnew2.id = "n2";
divnew1.insertAdjacentElement('beforebegin',divnew2);

console.log(div.outerHTML);
// => <div><div id="n2"></div><div id="n1">テスト</div></div>

const div = document.createElement("div");
const divnew1 = document.createElement("div");
divnew1.id = "n1";
divnew1.textContent ="テスト"
div.appendChild(divnew1);

divnew1.insertAdjacentHTML('afterbegin','<div id="n2"></div>');

console.log(div.outerHTML);
// => <div><div id="n1"><div id="n2"></div>テスト</div></div>

const div = document.createElement("div");
const divnew1 = document.createElement("div");
divnew1.id = "n1";
divnew1.textContent ="テスト"
div.appendChild(divnew1);

divnew1.insertAdjacentText('beforeend','追加');

console.log(div.outerHTML);
// => <div><div id="n1">テスト追加</div></div>

第一引数の位置指定は以下の中から選択できる。

• beforebegin 対象要素の前
• afterbegin 対象要素内の先頭
• beforeend 対象要素内の末尾
• afterend 対象要素の後

一致

<ul>
  <li class="classA">1</li>
  <li class="classB">2</li>
  <li class="classA">3</li>
</ul>

const items = document.querySelectorAll('li');
items.forEach(item => {
  console.log(item.matches('.classA'));
});
// => true false true