// # DOMツリー

// ノードオブジェクトのDOMツリーの階層を表すプロパティ
// テキストノード、空白ノードを無視しない
console.log(document.childNodes);
console.log(document.firstChild);
console.log(document.lastChild);
console.log(document.lastChild.parentNode);
console.log(document.firstChild.nextSibling);
console.log(document.lastChild.nodeType);
console.log(document.lastChild.nodeValue);
console.log(document.lastChild.nodeName);

// ノードオブジェクトのHTMLツリーの階層を表すプロパティ
// テキストノード、空白ノードを無視する
console.log(document.children);
console.log(document.firstElementChild);
console.log(document.lastElementChild);
console.log(document.lastChild.parentElement);
console.log(document.firstChild.nextElementSibling);
console.log(document.lastChild.previousElementSibling);
console.log(document.lastChild.childElementCount);

// # ノードオブジェクトの取得
document.getElementById('id');
document.getElementsByTagName('tag'); // -> NodeListは生きている
document.getElementsByClassName('class'); // -> NodeListは生きている
document.getElementsByName('name'); // -> NodeListは生きている

document.querySelectorAll('CSS_selector'); // -> NodeListは生きていない
document.querySelector('CSS_selector');

// Documentオブジェクトのプロパティ
document.documentElement;
document.head;
document.body;
document.forms[]; // -> HTMLCollectionオブジェクト
document.images[]; // -> HTMLCollectionオブジェクト
document.anchors[]; // -> HTMLCollectionオブジェクト
document.applets[]; // -> HTMLCollectionオブジェクト
document.links[]; // -> HTMLCollectionオブジェクト
document.images[]; // -> HTMLCollectionオブジェクト
document.embeds[]; // -> HTMLCollectionオブジェクト
document.plagins[]; // -> HTMLCollectionオブジェクト
document.scripts[]; // -> HTMLCollectionオブジェクト

// # 属性値の取得と設定
element.attribute // -> 標準的な属性の属性値の取得
element.getAttribute('attribute');
element.setAttribute('attribute');
element.hasAttribute('attribute');
element.removeAttribute('attribute');

element.attributes // -> NamedNodeMapオブジェクト

// # 要素内容の取得と設定
element.innerHTML // -> 要素内のHTMLコード
element.textContent // -> Webページで表示されるテキスト
element.innerText // -> IE9以前

function textContent(element) {
  var content = element.textContent;
  if (content !== undefined) return content;
  return element.innerText;
}

// # ノードの作成
document.createElement('element'); // -> 要素ノードオブジェクト
document.createTextNode('text'); // -> テキストノード
document.createAttribute('attribute');
document.createComment('text');
document.createDocumentFragment();
document.importNode(他文章のノード, deep); // -> 他文章ノードの複製 deepをtrueで子孫ノードも複製
node.cloneNode(deep); // -> ノードの複製

// # ノードの挿入
element.appendChild('node');
element.insertBefore('node', 子ノード);

function elt(name, attributes) {
  const node = document.createElement(name);
  if (attributes) {
    for (let attr in attributes) {
      if (attributes.hasOwnProperty(attr)) {
        node.setAttribute(attr, attributes[attr]);
      }
    }
  }
  for (let i = 2; i < arguments.length; i++) {
    let child = arguments[i];
    if (typeof child == 'string') {
      child = document.createTextNode(child);
    }
    node.appendChild(child);
  }
  return node;
}

const bloodtypes = ['A', 'B', 'O', 'AB'];
const form = elt('form', { id: 'menu' });
const select = elt('select', { name: 'bloodtype', id: 'bloodtype' });
bloodtypes.forEach(function (type) {
  select.appendChild(elt('option', null, type));
});
form.appendChild(select);
document.body.appendChild(form);

// # ノードの削除
node.removeChild(子ノード);
node.parentNode.removeChild(node);

// # ノードの置換
node.replaceChild(newnode, 子ノード);
node.parentNode.replaceChild(newnode, node);