【Javascript】「DOM（Document Object Model）」の使い方

//要素を「ID」で指定する
var 変数名 = document.querySelector('#ID名');

//クラス名の最初の要素を指定する
var 変数名 = document.querySelector('.クラス名');

//クラス名の要素を全て取得する
var 変数名 = document.querySelectorAll('.クラス名');

//要素を「ID」で指定する
var 変数名 = document.getElementById("ID名");

//タグ名で要素を指定する
var 変数名 = document.getElementsByTagName("タグ名");

//タグのname属性で要素を指定する
var 変数名 = document.getElementsByName("name値");

//要素を「ID」で指定・参照する
var 変数名 = document.querySelector('#ID名').style.color;
var 配列名 = document.querySelector('#ID名').childNodes;
//要素を指定した後に、要素を参照する
var 要素指定した変数名 = document.querySelector('#ID名');
var 変数名 = 要素指定した変数名.style.color;
var 配列名 = 要素指定した変数名.childNodes;

//要素を「ID」で指定する
var Get_ChildNodes = document.querySelector('#ID名').childNodes;
//要素を指定した後に、要素を参照する
var Get_ID = document.querySelector('#ID名');
var Get_ChildNodes = Get_ID.childNodes;

var Count_ChildNodes = Get_ChildNodes.length;
var Get_Child = Get_ChildNodes[0];
var Get_Child = Get_ChildNodes(0);
var Get_Child = Get_ChildNodes.id1;
var Get_Child = Get_ChildNodes.item(0);
var Get_Child = Get_ChildNodes.item("name名");
var Get_Child = Get_ChildNodes.namedItem("name名");
var Get_Child = Get_ChildNodes.tags("タグ名");


var Get_Child;
for (i = 0; i < Count_ChildNodes; i++) {
Get_Child = Get_ChildNodes[i];
document.write(Get_Child);
}

//要素を「ID」で指定する
var Get_ChildNodes = document.querySelector('#ID名').childNodes;
//要素を指定した後に、要素を参照する
var Get_ID = document.querySelector('#ID名');
var Get_ChildNodes = Get_ID.childNodes;


var 要素内の文字を格納する変数 = Get_ChildNodes.firstChild.nodeValue;
var 要素内の文字を格納する変数 = Get_Child.innerText;
var 要素内の文字を格納する変数 = Get_Child.innerHTML;

//要素を「ID」で指定・参照する
var Get_ChildNodes = document.querySelector('#ID名').childNodes;
var 変数名 = document.querySelector('#ID名').id;
var 変数名 = document.querySelector('#ID名').getAttribute("属性名");
var 変数名 = document.querySelector('#ID名').getAttributeNode("属性名").value;
var 変数名 = document.querySelector('#ID名').getAttributeNode("属性名").nodeValue;
var 変数名 = document.querySelector('#ID名').attributes.getNamedItem("属性名").value;
var 変数名 = document.querySelector('#ID名').attributes.getNamedItem("属性名").nodeValue;
//要素を指定した後に、属性値を参照する
var Get_ID = document.querySelector('#ID名');

var 変数名 = Get_ID.id;
var 変数名 = Get_ID.getAttribute("属性名");
var 変数名 = Get_ID.getAttributeNode("属性名").value;
var 変数名 = Get_ID.getAttributeNode("属性名").nodeValue;
var 変数名 = Get_ID.attributes.getNamedItem("属性名").value;
var 変数名 = Get_ID.attributes.getNamedItem("属性名").nodeValue;

//要素を「ID」で指定・変更する
document.querySelector('#ID名').id = value;
document.querySelector('#ID名').setAttribute("属性名", value);
document.querySelector('#ID名').getAttributeNode("属性名").value = value;
document.querySelector('#ID名').getAttributeNode("属性名").nodeValue = value;
document.querySelector('#ID名').attributes.getNamedItem("属性名").value = value;
document.querySelector('#ID名').attributes.getNamedItem("属性名").nodeValue = value;
document.querySelector('#ID名').setAttributeNode("属性名");


//要素を指定した後に、属性値を変更する
var Get_ID = document.querySelector('#ID名');

Get_ID.id = value;
Get_ID.setAttribute("属性名", value);
Get_ID.getAttributeNode("属性名").value = value;
Get_ID.getAttributeNode("属性名").nodeValue = value;
Get_ID.attributes.getNamedItem("属性名").value = value;
Get_ID.attributes.getNamedItem("属性名").nodeValue = value;
Get_ID.setAttributeNode("属性名");

createAttribute

removeAttribute

removeAttributeNode