DOM编程
1.DOM编程图解：
document对象
（1）all：获取的当前页面中所有的标签对象,返回的是标签对象数组
（2）forms：获取当前页面中所有的form标签对象,返回的标签对象数组
（3）images：获取当页面中所有的img标签对象,返回的也是一个数组
（4）links：获取当前页面中所有的a标签对象,返回的是标签对象数组
注：属性nodeName 为获取节点标签的名称
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用document对象和集合来获取标签对象</title>
</head>
<body>
<a href="">超链接</a>
<form><img src=""/><a href="">超链接</a></form>
<form><a href="">超链接</a><img src=""/></form>
</body>
<script type="text/javascript">
// 获取所有标签对象
var nodeList = document.all;
// 获取标签个数
alert(nodeList.length);
// 遍历节点列表 // 属性nodeName：获取节点名称
for(var i = 0 ; i < nodeList.length; i ++){
alert(nodeList[i].nodeName) ;
}
</script>
</html>
节点对象的关系以及获取标签对象
1.节点（node）关系：
（1）parentNode 父节点
（2）childNodes 子节点
（3）firstChild 第一个子节点
（4）nextChild 最后一个子节点
（5）nextSibling 下一个兄弟节点
（6）previousSibling 上一个兄弟节点
（2）childNodes 子节点
（3）firstChild 第一个子节点
（4）nextChild 最后一个子节点
（5）nextSibling 下一个兄弟节点
（6）previousSibling 上一个兄弟节点
注1：在childNodes,firstChild,lastChilde 这三个属性中，存在一个属性叫节点类型：nodeType
2.节点类型：
（1）空格和换行的节点类型：3
（2）标签的节点类型： 1
（3）html 注释的节点类型： 8
注2：可用节点类型（nodeType）进行筛选，若节点类型为1，则就为标签对象类型
练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点关系和类型</title>
</head>
<body>
<form><a href="">超链接</a><!--这是html注释--><input type="text"/><input type="button"/></form>
<form><a href="">超链接</a><input type="button"/></form>
</body>
<script type="text/javascript">
//需求:获取第一个a标签对象
var aNode = document.links[0] ;
alert(aNode.nodeName) ;
//需求:获取该节点的父节点对象
var formNode = aNode.parentNode ;
alert(formNode.nodeName) ;
//需求:获取form节点下所有的子节点
var nodeList = formNode.childNodes ;
//遍历
for(var i = 0 ; i < nodeList.length ; i ++){
if(nodeList[i].nodeType==1){
//空格换行它是由节点名称:#text
document.write(nodeList[i].nodeName+",节点类型是:"+nodeList[i].nodeType+"<br/>") ;
}
}
//需求:获取到formNode对象的第一个子节点
var firstNode = formNode.firstChild;
alert(firstNode.nodeName);
//需求:获取最后一个子节点
var lastNode = formNode.lastChild ;
alert(lastNode.nodeName);
//需求:获取第二个a标签对象<br />
var aNode = document.links[1] ;
alert(aNode.nodeName) ;
//获取下一个兄弟节点
var next = aNode.nextSibling ;
alert(next.nodeName) ;
//获取上一个兄弟节点
var previous = next.previousSibling ;
alert(previous.nodeName) ;
</script>
</html>通过document对象的方法获取标签对象
1.方式一：通过id属性获取标签对象
document.getElementById("id属性值")
注： <1>标签中必须指定id属性
<2>在同一个html页面中，不能给多个标签指定同名id属性，会影响标签的获取
2.方式二：通过标签中的name属性获取标签对象
document.getElementsByName("name属性值")
注： <1>标签中必须指定name属性
<2>在同一个html页面中，例如“多选框场景”，可以指定同名的name属性
3.方式三：通过标签名称获取标签对象
document.getElementsByTagName("标签名称")
注：返回的是一个标签对象数组
练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通过document对象的方法获取标签对象</title>
</head>
<script type="text/javascript">
function getValue(){
//(1)通过id属性获取input标签对象
//var username = document.getElementById("username") ;
//(2)getElementsByName() :它返回标签对象数组
//var username = document.getElementsByName("name")[0];
//(3)通过标签名称获取标签对象
var username = document.getElementsByTagName("input")[0] ;
//提示框显示用户输入的信息的内容
alert(username.value) ;
}
</script>
<body>
用户名:<input type="text" id="username" name="name" οnblur="getValue()" />
</body>
</html>设置标签对象的属性
1. 修改innerHTML属性:经常用在span,div,select标签中会经常用，用于给标签对象设置文本的
2. value属性:：用在表单中 :<input type = "text" id = "username" value = "默认值" />
3. src属性：用在img标签中:<img src ="xxx"/>
4. checked属性：选中的状态
注：常常用于多选框中。默认值，没有选中的话就是false，选中了则为true
练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置标签对象的属性</title>
</head>
<body>
<span id="tip"></span><br/>
用户名:<input type="text" value="4-14位的数字或者字母" id="username"/><br/>
<img src="4.jpg" width="300px" height="200px" /><input type="button" value="切换图片" οnclick="textClick()" /><br/>
<input type="button" value="全选" οnclick="quanxuan()"/>
<input type="checkbox" value="篮球" name="hobit"/>篮球
<input type="checkbox" value="足球" name="hobit"/>足球
<input type="checkbox" value="乒乓球" name="hobit"/>乒乓球
</body>
<script type="text/javascript">
//获取span标签对象
var tip = document.getElementById("tip") ;
//设置tip的innerHTML属性
tip.innerHTML ="<h3>这是一个标题</h3>" ;
//value属性
var username = document.getElementById("username");
//修改value属性
username.value = "" ;
function textClick(){
//通过标签名称获取标签对象
var img = document.getElementsByTagName("img")[0] ;
//修改src属性
img.src = "mm.jpg" ;
}
function quanxuan(){
//获取所有的input标签对象,返回的数组
var hList = document.getElementsByName("hobit") ;
for(var i = 0 ; i < hList.length ; i ++){
hList[i].checked = true ;
}
}
</script>
</html>效果：
标签对象的方法
1.添加相关的方法：
（1）创建一个节点：
var 标签对象 = document.createElement("标签名称");
（2）给节点添加属性
标签对象.setAttribute("属性名称"，"属性值")
2.和插入相关的方法：
父节点对象.appendChild(新节点对象) 注：默认在最后添加子节点
insertBefore(新节点对象，指定对象)
3.和删除相关的方法：
父节点对象.removeChild(需要被移出的节点对象)
练习：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签对象的方法</title>
</head>
<script type="text/javascript">
function addItem(){
//1)创建一个input节点
var input = document.createElement("input") ; //相当于--- <input/>
input.setAttribute("type","button") ;// 相当于--- <input type="button"/>
input.setAttribute("value","新按钮") ;//相当于---<input type="button" value="新按钮"/>
//2)获取body的节点对象
var bodyNode = document.getElementsByTagName("body")[0] ;
//利用appendChild()方法
bodyNode.appendChild(input);
}
function delItem(){
//获取父节点对象
var bodyNode = document.getElementsByTagName("body")[0] ;
//通过父节点在获取最后一个子节点lastChild
var input = bodyNode.lastChild ;
bodyNode.removeChild(input) ;
}
</script>
<body>
<input type="button" value="添加" οnclick="addItem()" /><input type="button" value="删除" οnclick="delItem()" /><input type="button" id="btn" value="按钮"/>
</body>
</html>效果：
课堂练习：标签对象属性练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签对象属性练习</title>
<script type="text/javascript">
//选中所有input的状态
//this:代表当前标签对象
function checkAll(obj){
//定义选中标记:
var status = obj.checked ;
//通过name属性获取所有的input标签对象
var itemList = document.getElementsByName("item");
for(var i = 0 ; i < itemList.length ; i ++){
//全选/反选
itemList[i].checked = status ;
}
}
//求金额
function getSum(){
//获取所有的item所在的标签对象
var itemList = document.getElementsByName("item");
//定义最终结果变量
var result= 0 ;
//遍历所有的商品列表,获取到每一个商品
for(var i = 0 ; i < itemList.length ; i ++){
//哪些被选中
if(itemList[i].checked){
//才需要去计算
//求和
//获取每一个商品的价格
var value = itemList[i].value ;//value一定要字符串类型
//函数转换
value = parseInt(value);
result += value ;
}
}
//获取span标签对象
var sumid = document.getElementById("sumid");
//设置innerHTML属性
sumid.innerHTML = result+"元" ;
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="all" οnclick="checkAll(this)" /> 全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="button" value="总金额：" οnclick="getSum()" /><span id="sumid"></span>
</body>
</html>效果：
点击“全选”可以选中全部商品，点击总金额可以得出选中商品的总价格
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
