javascript - HTML要素アクセス
アクセス方法
- 要素IDでアクセス : document.getElementById(idVal)
要素間の関係でアクセス
- Node parentNode
- Node previousSibling
- Node nextSibling
- Node childNodes
- Node getElementsByTasName(tagName)
- Node firstChild
- Node lastChild
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> </title> <style type="text/css"> .selected { background-color: #66f } </style> <script type="text/javascript"> var accessById = function() { // IDで要素取得 alert(document.getElementById("a").innerHTML + "\n" + document.getElementById("b").value); } </script> </head> <body> <div id="a">aタグのテキスト</div> <textarea id="b" rows="3" cols='25'>textareaタグの内容</textarea><br> <input type="button" value="IDで要素取得" onclick="accessById();" /> <ol id="books"> <li id="java">java</li> <li id="ssh">ssh</li> <li id="ajax" class="selected">ajax</li> <li id="xml">xml</li> <li id="ejb">ejb</li> <li id="workflow">workflow</li> </ol> <!-- 関係で要素取得 --> <input type="button" value="親要素" onclick="getByRelation(curTarget.parentNode);" /> <input type="button" value="最初の要素" onclick="getByRelation(curTarget.parentNode.firstChild.nextSibling);" /> <input type="button" value="前の要素" onclick="getByRelation(curTarget.previousSibling.previousSibling);" /> <input type="button" value="次の要素" onclick="getByRelation(curTarget.nextSibling.nextSibling);" /> <input type="button" value="最後の要素" onclick="getByRelation(curTarget.parentNode.lastChild.previousSibling);" /> <!-- headに書くidで取得できないね--> <script type="text/javascript"> // 1. IDで要素取得 var curTarget = document.getElementById("ajax"); var getByRelation = function(target) { alert(target.innerHTML); } </script> </body> </html>
※ 上記olは全部で13個のノード持っている。HTMLでは、空白もdocumentのnodeになるから。
curTarget.previousSibling.previousSiblingで前のli要素取得になる。
HTMLFormElement
・属性値
- action
- elements
- length
- method
- target
- reset()
- submit()
・HTMLFormElement内のアクセス
- formObj.elements[index]
- formObj.elements["elementsName"]
- formObj.elementselementsName
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> HTMLFormElement </title> </head> <body> <form id="form1" action="nothing" method="get"> <input name="user" type="text" /><br /> <input name="pass" type="text" /><br /> <select name="color"> <option value="red">赤</option> <option value="blue">青</option> </select><br /> <input type="button" value="0番要素" onclick="alert(document.getElementById('form1').elements[0].value);" /> <input type="button" value="name Or id = nameの要素" onclick="alert(document.getElementById('form1').elements['pass'].value);" /> <input type="button" value="name Or id = colorの要素" onclick="alert(document.getElementById('form1').color.value);" /> </form> </body> </html>
HTMLSelectElement
・属性値
- form
- length
- options
- selectedIndex
- type
・HTMLSelectElement内のアクセス
- select.options[index]
- form
- defalutSelected
- index
- selected
- text
- value
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> HTMLSelectElement </title> </head> <body> <select id="mySelect" name="mySelect" size="6"> <option value="java">java</option> <option value="ssh">ssh</option> <option value="ajax" selected>ajax</option> <option value="xml">xml</option> <option value="ejb">ejb</option> </select><br /> <input type="button" value="0番option" onclick="change(curTarget.options[0]);" /> <input type="button" value="選択INDEX - 1のoption" onclick="change(curTarget.options[curTarget.selectedIndex - 1]);" /> <input type="button" value="選択INDEX + 1のoption" onclick="change(curTarget.options[curTarget.selectedIndex + 1]);" /> <input type="button" value="最後のoption" onclick="change(curTarget.options[curTarget.length - 1]);" /> <script type="text/javascript"> var curTarget = document.getElementById("mySelect"); var change = function(target) { alert(target.text); } </script> </body> </html>
HTMLTableElement
・属性値
- 通常のHTML要素と属性
- caption
- HTMLCollection rows
- tFoot
- tHead
・HTMLTableElement内のアクセス
- table.rows[index]
HTMLTableRowElement
・属性値
- cells
- rowIndex
- selectionRowIndex
HTMLTableCellElement
・属性値
- cellIndex
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> HTMLTableElement </title> </head> <body> <table id="table1" border="1"> <caption>タイトル</caption> <tr> <td>行1列1</td> <td>行1列2</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> </tr> <tr> <td>行3列1</td> <td>行3列2</td> </tr> </table> <input type="button" value="タイトル取得" onclick="alert(document.getElementById('table1').caption.innerHTML);" /> <input type="button" value="1行1列目" onclick="alert(document.getElementById('table1').rows[0].cells[0].innerHTML);" /> <input type="button" value="2行2列目" onclick="alert(document.getElementById('table1').rows[1].cells[1].innerHTML);" /> <input type="button" value="3行2列目" onclick="alert(document.getElementById('table1').rows[2].cells[1].innerHTML);" /> </body> </html>