DOM节点常用方法介绍01
1.查找元素节点
1.1getElementById()
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定id属性值的元素节点。如果不存在这样的元素，它返回null.
var oElement = document.getElementById ( sID )
该方法只能用于document对象
例子:
<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<form name="form1" action="test.html" method="post">
<input type="text" name="username" value="快快乐乐又一年" id="tid"/>
<input type="button" name="ok" value="保存"/>
</form>
<script language="javascript">
//输出<input type="text" name="username" value="快快乐乐又一年" id="tid"/>标签value与method的值
var inputElement=document.getElementById("tid");
alert("usernameElement.value:"+inputElement.value);
alert("usernameElement.type:"+inputElement.type);
</script>
</body>
</html>
1.2getElementsByName()寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<form name="form1" action="test.html" method="post">
<!--当input标签写死onchange方法时
<input type="text" name="tname" value="快快乐乐又一年1" id="tid1" οnchange="change(this.id)"/><br/>
<input type="text" name="tname" value="快快乐乐又一年2" id="tid2" οnchange="change(this.id)"/><br/>
<input type="text" name="tname" value="快快乐乐又一年3" id="tid3" οnchange="change(this.id)"/><br/>
-->
<input type="text" name="tname" value="快快乐乐又一年1" id="tid1"/><br/>
<input type="text" name="tname" value="快快乐乐又一年2" id="tid2"/><br/>
<input type="text" name="tname" value="快快乐乐又一年3" id="tid3"/><br/>
<input type="button" name="ok" value="保存"/>
</form>
<script language="javascript">
//通过元素的name属性获取所有元素的引用
var tnameElements=document.getElementsByName("tname");
//测试该数据的长度
alert(tnameElements.length);
//遍历元素，输出所有value属性的值
for(var i=0;i<tnameElements.length;i++){
alert(tnameElements[i].value);
}
//当input标签写死onchange方法时
//为每个文本框(<input type="text" ... οnchange="change(this.id)"/>)增加change事件，当值改变时，输出改变的值
function change(id){
alert(document.getElementById(id).value);
}
//当input标签没有写死onchange方法时，想在改变的时候做提示，可以内部指定事件
for(var i=0;i<tnameElements.length;i++){
var tnameElement=tnameElements[i];
tnameElement.οnchange=function(){
alert(this.value);
}
}
</script>
</body>
</html>
1.3getElementsByTagName()
寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="开心每一年_1" id="tid_1" ><br>
<input type="text" name="tname" value="开心每一年_2" id="tid_2" ><br>
<input type="text" name="tname" value="开心每一年_3" id="tid_3" ><br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<select name="job" id="job" >
<option value="美容">美容^^^^^</option>
<option value="IT">IT^^^^^</option>
<option value="程序员">程序员^^^^^</option>
<option value="建筑师">建筑师^^^^^</option>
</select>
<script language="javascript">
//获取所有input元素，返回值是数组
var inputElements=document.getElementsByTagName("input");
//测试长度
alert(inputElements.length);
//遍历输出value的值,不包含按钮(button)
for(var i=0;i<inputElements.length;i++){
if(inputElements[i].type!='button'){
alert(inputElements[i].value);
}
}
//输出下拉选项中option标签中的value属性的值
var selectElements=document.getElementsByTagName("select");
//测试长度
alert(selectElements.length);
//输出所有下拉选项id="edu"中option标签中的value属性的值
for(var i=0;i<selectElements.length;i++){
if(selectElements[i].id=='edu'){
var optionElements=selectElements[i].getElementsByTagName("option");
for(var j=0;j<optionElements.length;j++){
alert(optionElements[j].value);
}
}
}
//输出所有下拉选项中option标签中的value属性的值
for(var i=0;i<selectElements.length;i++){
var optionElements=selectElements[i].getElementsByTagName("option");
for(var j=0;j<optionElements.length;j++){
alert(optionElements[j].value);
}
}
//输出下拉选项选中的值
alert(document.getElementById("edu").value);
alert(document.getElementById("job").value);
</script>
</body>
</html>
2.查看是否存在子节点
hasChildNodes()
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="开心每一年_1" id="tid_1" ><br>
<input type="text" name="tname" value="开心每一年_2" id="tid_2" ><br>
<input type="text" name="tname" value="开心每一年_3" id="tid_3" ><br>
<input type="button" name="ok" value="保存1"/>
</form>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科" selected="selected" >本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<script language="javascript">
//查看id="edu"的节点是否含有子节点，返回true
var eduElement=document.getElementById("edu");
alert(eduElement.hasChildNodes());
//查看id="tid_1"的节点是否含有子节点，返回false
var tidElement=document.getElementById("tid_1");
alert(tidElement.hasChildNodes());
</script>
</body>
</html>
3.DOM 属性
3.1nodeName
文档里的每个节点都有以下属性。
nodeName:一个字符串，其内容是给定节点的名字。
var name = node.nodeName;
* 如果节点是元素节点，nodeName返回这个元素的名称
* 如果是属性节点，nodeName返回这个属性的名称
* 如果是文本节点，nodeName返回一个内容为#text 的字符串
注:nodeName 是一个只读属性。
3.2nodeType
返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
3.3nodeValue
返回给定节点的当前值（字符串）
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
如果给定节点是一个元素节点，返回值是 null
nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，
但可以为文本节点的 nodeValue 属性设置一个值。
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “你好”;
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<form name="form1" action="test.html" method="post" >
<input type="text" name="tname" value="开心每一年_1" id="tid_1" /><br>
<input type="text" name="tname" value="开心每一年年_2" id="tid_2" /><br>
<input type="text" name="tname" value="开心每一年_3" id="tid_3" /><br>
<input type="button" name="ok" value="保存1"/>
</form>
<p id="pid" name="8888">
明天上课
</p>
<script language="javascript">
//元素节点id="tid_1"，输出nodeName、nodeType、nodeVlaue
var tnameElement=document.getElementById("tid_1");
alert(tnameElement.nodeName);//input
alert(tnameElement.nodeType);//1
alert(tnameElement.nodeValue);//null
//文本节点id="pid"，输出nodeName、nodeType、nodeVlaue
var pidElement=document.getElementById("pid");
//var textElement=pidElement.ChildNodes[0];
//var textElement=pidElement.lastChild;
var textElement=pidElement.firstChild;
alert(textElement.nodeName);//#text
alert(textElement.nodeType);//2
alert(textElement.nodeValue);//明天上课
//属性节点id="pid"中name这个属性节点 输出nodeName、nodeType、nodeVlaue
var pidElement=document.getElementById("pid");
var nameElement=pidElement.getAttributeNode("name");
alert(nameElement.nodeName);//name
alert(nameElement.nodeType);//3
alert(nameElement.nodeValue);//8888
</script>
</body>
</html>
练习1:
<ul>
<li id="bj" value="beijing">
北京
<p>
海淀
</p>
奥运
</li>
<li id="sh" value="shanghai">上海</li>
</ul>
问题:
打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
同时打印文本值 北京 海淀 奥运
解:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<ul>
<li id="bj" value="beijing">
北京
<p>
海淀
</p>
奥运
</li>
<li id="sh" value="shanghai">上海</li>
</ul>
<script language="javascript">
//打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
var bjElement=document.getElementById("bj");
var bjchildren=bjElement.childNodes;
for(var i=0;i<bjchildren.length;i++){
var bjchild=bjchildren[i];
alert(bjchild.nodeName);
alert(bjchild.nodeType);
alert(bjchild.nodeValue);
}
//同时打印文本值 北京 海淀 奥运
alert(bjElement.childNodes[0].nodeValue);
alert(bjElement.childNodes[1].childNodes[0].nodeValue);
alert(bjElement.childNodes[2].nodeValue);
</script>
</body>
</html>
练习2:
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
问题:
输出所有select元素下的所有option元素中对应的文本内容
例如:<option value="中专">中专^^</option> 输出--->中专^^
解:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js测试</title>
</head>
<body>
<select name="edu" id="edu">
<option value="博士">博士^^^^^</option>
<option value="硕士">硕士^^^^^</option>
<option value="本科">本科^^^^^</option>
<option value="幼儿园">幼儿园^^^^^</option>
</select>
<script language="javascript">
//输出所有select元素下的所有option元素中对应的文本内容
//标准答案
var selectElement=document.getElementById("edu");
var optionElements=selectElement.getElementsByTagName("option");
for(var i=0;i<optionElements.length;i++){
alert(optionElements[i].childNodes[0].nodeValue);
}
//我自己的写法
var selectElement=document.getElementById("edu");
var selectChlids=selectElement.childNodes;
for(var i=0;i<selectChlids.length;i++){
if(selectChlids[i].hasChildNodes){
for(var j=0;j<selectChlids[i].childNodes.length;j++){
alert(selectChlids[i].childNodes[j].nodeValue);
}
}
}
</script>
</body>
</html>
