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要素取得になる。

f:id:liguofeng29:20160208145459g:plain

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>

f:id:liguofeng29:20160208151423g:plain

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>

f:id:liguofeng29:20160208152117g:plain

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>

f:id:liguofeng29:20160208153043g:plain

liguofeng29’s blog

個人勉強用ブログだっす。

javascript - HTML要素アクセス