1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- childNodes --> <!-- <select id="mySel" size="4"> <option>Audi</option> <option>BMW</option> <option>Saab</option> <option>Volvo</option> </select> --> <select id="mySel" size="4"><option>Audi</option><option>BMW</option><option>Saab</option><option>Volvo</option></select> <br><br> <button onclick="myfunc()">버튼</button> <p = id="demo"></p> <script type="text/javascript"> function myfunc() { var c = document.getElementById("mySel").childNodes; document.getElementById("demo").innerHTML = c[1].text; } </script> <!-- parentNode : 현재 node의 부모 노드의 태그를 취득 --> <p id="demo">여기가 태그</p> <ul> <li id="myli">커피</li> <li>홍차</li> </ul> <button type="button" onclick="pNode()">pNode 버튼</button> <script type="text/javascript"> function pNode() { var nName = document.getElementById("myli").parentNode.nodeName; alert("nName="+nName); } </script> <!-- nodeName node의 이름을 취득 --> <h3 id="myH3">여기가 h3태그입니다.</h3> <script type="text/javascript"> var name = document.getElementById("myH3").nodeName; alert(name); </script> </body> </html> | cs |
'IT Study > Web' 카테고리의 다른 글
| [JQuery] 기분 문법 2 (0) | 2018.08.06 |
|---|---|
| [JQuery] 기본 문법 (0) | 2018.08.06 |
| [JavaScript] DOM (0) | 2018.08.06 |
| [JavaScript] Node 응용 예제 2 (0) | 2018.08.06 |
| [JavaScript] Node 응용 예제 (0) | 2018.08.06 |