Dom API

DOMとは?
ちなみにDOMはブラウザがJavaScriptに提供する一連のインタフェース(window.documnetで提供されている)で、これらのインタフェースを通じてwebページを操作することができます.しかし、DOMはプログラミング言語ではなく、ドキュメントオブジェクトのモデルであり、プログラミング言語とは独立しています.例えばPythonでもDOMを操作できます.

import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");

したがって、Webフロントエンドでよく使われるDOM API(webまたはXMLページ)=DOM+JS(スクリプト言語)
DOM作成
DOMノード(Node)は、通常、ラベル、テキスト、またはHTMLプロパティに対応します.DOMノードには、現在の要素のタイプを表すnodeType属性があります.これは整数です.

Element、要素

Attribute,属性

Text,テキスト

DOMノードの作成で最も一般的なのはdocumentです.これは電子メールとdocumentです.createTextNodeメソッド:

var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

DOMクエリー
documentは2つのQueryメソッドを提供します.

/               "myclass"    
var el = document.querySelector(".myclass");

//           class "note"   "alert" div  
var els = document.querySelectorAll("div.note, div.alert");

//     
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

Elementは、要素に対するDOMナビゲーション方法も多く提供しています.

//      、   
var parent = ele.parentElement;
var parent = ele.parentNode;

//      ，            ，    nodeType   
var nodes = ele.children;    

//      
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');

//         /         
var el = ele.firstElementChild;
var el = ele.lastElementChild;

//    /         
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;

DOM変更

//   、     
ele.appendChild(el);
ele.removeChild(el);

//      
ele.replaceChild(el1, el2);

//      
parentElement.insertBefore(newElement, referenceElement);

属性アクション

//     {name, value}   
var attrs = el.attributes;

//   、    
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');

//   、    
el.hasAttribute('class');
el.removeAttribute('class');

//        
el.hasAttributes(); 

http://harttle.com/2015/10/01/javascript-dom-api.html