■
[javascript] 自分メモ
このメモは、個人的メモ書きで技術的裏付けは薄いです。
createElement 後の getElementById
dom = document.createElement('div') dom.id = 'hoge'としても
dom.getElementById('hoge')とgetElementsByNameはできない。
ただし、getElementsByTagName は問題ない。
そのためgetElementsByTagName('*')としてやることにより、すべての要素の配列が取得できる。
innerHTMLの落とし穴
innerHTMLは間違った要素や文法のHTMLが入ると自動的にそれらが削除される。
そのため、tableなどで
dom = document.createElement('tr') dom.innerHTML = '<td>hoge</td><td>piyo</td>' table.appendChild(dom)
なんてことはできない。
出来ても、domの中身には
上記のことがしたければ
dom = document.createElement('tr') dom2 = document.createElement('td') dom2.textContent = 'hoge' dom3 = document.createElement('td') dom2.textContent = 'piyo' dom.appendChild(dom2) dom.appendChild(dom3) table.appendChild(dom.row[0])
しかない。しかし、これではinnerHTMLが使えないので、この方法でもOK。
dom = document.createElement('table') dom.innerHTML = '<tr><td>hoge</td><td>piyo</td></tr>' table.appendChild(dom.rows[0]) // rowsはテーブルでtrに直接アクセスするtableコレクション
tableのセルやtr, tdへのアクセス
tableのセルへのアクセスは見た目以上にめんどくさい。
<table><tr><td></td></tr></table>
となっていても、DOMアクセスすると
<table><tbody><tr><td></td><tr></tbody></table>
となりtbodyが余計につく。
なのでテーブルのセルにアクセスするには以下のような方法がある
1. trにアクセス
table.rows[0] // １つ目のtr table.rows[1] // ２つ目のtr
2. tdにアクセス
table.rows[0].cells[0] //１つめのtrの中の１つ目のtd table.rows[0].cells[1] //１つめのtrの中の２つ目のtd
3. tbodyにアクセス
table.lastChild
table.firstChildやtable.childNode[0]だと \nなどの改行コードが入っていることがある。
DOMの持つメソッド・プロパティを調べる。
取得したDOMやcreateElementで作ったDOMがどんなメソッドやプロパティを持っているかはkeys()を使うとよい
dom = document.createElement('div') keys(dom).sort() ["ATTRIBUTE_NODE", "CDATA_SECTION_NODE", "COMMENT_NODE", "DOCUMENT_FRAGMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_POSITION_CONTAINED_BY", "DOCUMENT_POSITION_CONTAINS", "DOCUMENT_POSITION_DISCONNECTED", "DOCUMENT_POSITION_FOLLOWING", "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", "DOCUMENT_POSITION_PRECEDING", "DOCUMENT_TYPE_NODE", "ELEMENT_NODE", "ENTITY_NODE", "ENTITY_REFERENCE_NODE", "NOTATION_NODE", "PROCESSING_INSTRUCTION_NODE", "TEXT_NODE", "addEventListener", "align", "appendChild", "attributes", "baseURI", "blur", "childNodes", "className", "clientHeight", "clientWidth", "cloneNode", "compareDocumentPosition", "dir", "dispatchEvent", "firstChild", "focus", "getAttribute", "getAttributeNS", "getAttributeNode", "getAttributeNodeNS", "getElementsByTagName", "getElementsByTagNameNS", "getFeature", "getUserData", "hasAttribute", "hasAttributeNS", "hasAttributes", "hasChildNodes", "id", "innerHTML", "insertBefore", "isDefaultNamespace", "isEqualNode", "isSameNode", "isSupported", "lang", "lastChild", "localName", "lookupNamespaceURI", "lookupPrefix", "namespaceURI", "nextSibling", "nodeName", "nodeType", "nodeValue", "normalize", "offsetHeight", "offsetLeft", "offsetParent", "offsetTop", "offsetWidth", "ownerDocument", "parentNode", "prefix", "previousSibling", "removeAttribute", "removeAttributeNS", "removeAttributeNode", "removeChild", "removeEventListener", "replaceChild", "scrollHeight", "scrollLeft", "scrollTop", "scrollWidth", "setAttribute", "setAttributeNS", "setAttributeNode", "setAttributeNodeNS", "setUserData", "spellcheck", "style", "tabIndex", "tagName", "textContent", "title"]
