<html>
<head>
<meta charset="utf-8">
<title>使用getElementById方法查找元素</title>
<script type="application/javascript" src="DOM1.js"></script>
</head>

<body>
    <div id="myDiv">我的div块</div>
    <textarea class="t1" id="content" cols="30" rows="10">好好学习，天天向上</textarea>
    <input type="text" id="txtName" value="按我呀"><br>
    <input type="button" id="btn_show" value="访问三个元素的内容" onClick="get5()">
</body>
</html>
// JavaScript Document
//通用的获取元素的方式
//1.(1)通过id获取元素节点document.getElementById("id值");

//(2)通过class属性值获取元素节点数组document.getElementsByClassName("class值");
//(3)通过元素名获取元素节点数组
//2.
//文本节点=元素节点.innerHTML;
//属性节点值=元素及诶单.属性名（不通用）
//属性节点值=元素节点.getAtrribute("属性名")（通用）
function get(){
    //元素节点
    var mydiv=document.getElementById("myDiv");
    //文本节点
    var text=mydiv.innerHTML;
    alert(text);
}
function get2(){
    var a=document.getElementById("content");
    var b=a.innerHTML;
    alert(b);
}
function get3(){
    //获取class为t1的所有元素节点数组
    var ts=document.getElementsByClassName("t1");
    //获取第一个元素的文本节点
    alert(ts[0].innerHTML);
}
function get4(){
    //获取元素名为textarea的所有元素节点数组
    var ts=document.getElementsByTagName("textarea");
    //获取数组中第一个元素的文本节点
    alert(ts[0].innerHTML);
}
function get5(){
    //获取元素节点
    var input=document.getElementById("txtName");
    //获取属性节点值
    /*alert(input.value);*/
    alert(input.getAttribute("value"));
}


 






JS学习（DOM）8.31_表单


 


 




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用节点关系查找HTML元素</title>

<style type="text/css">
    /*以赵六为参照物*/
    #n4{color:red}
    </style>
</head>

<body>
<ul id="names">
    <li id="n1">张三</li>
    <li id="n2">李四</li>
    <li id="n3">王五</li>
    <li id="n4">赵六</li>
    <li id="n5">小红</li>
    <li id="n6">小明</li>
</ul>

<input type="button" value="父节点" onClick="get(li.parentNode)">
<input type="button" value="第一个子节点" onClick="get(li.parentNode.firstChild.nextSibling)">
<input type="button" value="上一个节点" onClick="get(li.previousSibling.previousSibling)">
<input type="button" value="下一个节点" onClick="get(li.nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onClick="get(li.parentNode.lastChild.previousSibling)">
<input type="button" value="得到所有li的元素个数" onClick="get3()">
</body>
<script type="application/javascript" src="DOM2.js"></script>
</html>






// JavaScript Document
//获取赵六的父节点
function get1(){
    //通过id获取赵六所在的元素节点
    var li=document.getElementById("n4");
    //获取赵六的父节点
    var father=li.parentNode;
    //获取文本节点
    alert(father.innerHTML);
}
//写一个通用的方法获取元素的文本节点
var li=document.getElementById("n4");
function get(node){
    alert(node.innerHTML);
}
function get3(){
    var a=document.getElementsByTagName("li");
    alert(a.length);
}




JS学习（DOM）8.31_表单_02


 


 




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找表单控件</title>
<script type="application/javascript" src="DOM3.js"></script>
</head>

<body>
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
    <input name="username" type="text" value="张三"><br>
    <input name="password" type="text" value="123"><br>
    <select name="city">
        <option value="shanghai">上海</option>
        <option value="beijing" selected>北京</option>
    </select><br>
    <input type="button" value="获取表单内第一个控件" onClick="get(form.elements[0])">
    <input type="button" value="获取表单内第二个控件" onClick="get(form.elements['password'])">
    <input type="button" value="获取表单内第三个控件" onClick="get(form.city)">
    <input type="button" value="操作表单" onClick="form.submit()">
</form>
</body>
</html>






// JavaScript Document
//页面加载完成后执行
window.onload=function(){
    var form=document.getElementById("myform");
}
//写一个通用的方法获取元素节点value属性节点值
function get(node){
    alert(node.value);
}




JS学习（DOM）8.31_表单_03


 


 




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>查找列表框、下拉菜单控件</title>
<script type="application/javascript" src="DOM4.js"></script>

</head>

<body>
<select name="city" id="city" size="5">
    <option value="beijing">北京</option>
    <option value="shanghai" selected>上海</option>
    <option value="tianjin">天津</option>
    <option value="nabjing">南京</option>
    <option value="shenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select><br>
<input type="button" value="第一个城市" onClick="get(sel.options[0])">
<input type="button" value="上一个城市" onClick="get(sel.options[sel.selectedIndex-1])">
<input type="button" value="下一个城市" onClick="get(sel.options[sel.selectedIndex+1])">
<input type="button" value="最后一个城市" onClick="get(sel.options[sel.length-1])">

</body>
</html>






// JavaScript Document
//页面加载完成后执行
var sel;
window.onload=function(){
    sel=document.getElementById("city");
}
//写一个通用的方法来获取option的文本
function get(node){
    alert(node.text);
}




JS学习（DOM）8.31_表单_04


 


 




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>对表格操作</title>
<script type="application/javascript" src="DOM5.js"></script>
</head>

<body>
<table id="mytable" border="1">
    <caption>甲骨文课程表</caption>
    <tr>
        <td>HTML</td>
        <td>JavaScript</td>
    </tr>
    <tr>
        <td>javaSE</td>
        <td>Oracle</td>
    </tr>
    <tr>
        <td>MySQL</td>
        <td>Struts2</td>
    </tr>
</table>
<input type="button" value="表格标题" onClick="get(table.caption)">
<input type="button" value="第一行、第一格" onClick="get(table.rows[0].cells[0])">
<input type="button" value="第二行、第二格" onClick="get(table.rows[1].cells[1])">
<input type="button" value="第三行、第二格" onClick="get(table.rows[2].cells[1])"><br>
设置指定单元格的值：第<input type="text" id="row" size="2">行，
第<input type="text" id="cell" size="2">列的值为
<input type="text" id="course" size="10">
<input type="button" id="btn_set" value="修改" onClick="set()">
</body>
</html>






// JavaScript Document
var table;
//页面加载完成后执行
window.onload=function(){
    table=document.getElementById("mytable");
}
//写一个通用的方法获取元素节点的文本节点
function get(node){
    alert(node.innerHTML);
}
function set(){
    //获取行列课程的value属性值
    var row=document.getElementById("row").value;
    var cell=document.getElementById("cell").value;
    var course=document.getElementById("course").value;
    //设置单元格的值
    table.rows[row-1].cells[cell-1].innerHTML=course;
}




JS学习（DOM）8.31_元素节点_05