<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"));
}
<!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);
}
<!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);
}
<!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);
}
<!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;
}
