DOM 总结(二)
查找元素的方法:
1,getElementByName()方法:
寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
举例:
<form name="form1">
<input type="text" name="tname" value="吃饭_1" /><br>
<input type="text" name="tname" value="吃饭_2" /><br>
<input type="text" name="tname" value="吃饭_3" /><br>
<input type="button" name="ok" value="保存" id="ok" οnclick="test();">
</form>
function test(){
// 获取属性的Name
var tnameArray=document.getElementsByName("tname");
//输出长度
alert(tnameArray.length);
//迭代输出获得的值
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
2,getElementById()方法:
寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素 节点。如果不存在这样的元素,它返回 null.
var oElement = document.getElementById ( sID )
**该方法只能用于 document 对象
举例:
3,通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
<input type="text" value="吃饭" id="tid">
function test(){
//获取ID
var usernameElement=document.getElementById(“tid");
//获取元素的值
alert("usernameElement.value: "+usernameElement.value)
//获取元素的类型
alert("usernameElement.type: "+usernameElement.type)
}
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。
此外,<tr> 是每个 <td>元 素的父节点(parentNode),这就是DOM父与子之间的关系;但是有的时候有的父节点不存在子节点那么就需要进行判断在读取,在判断是我们用到了一个方法hasChildNodes()方法
hasChildNodes()
该方法用来检查一个元素是否有子节点,返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。
在用元素子节点的属性读取时我们先要获得根节点:
有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问
DOM的属性
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
1,DOM属性nodeName
nodeName 属性含有某个节点的名称。
var name = node.nodeName;
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
注:nodeName 是一个只读属性。
2,DOM属性nodeValue
nodeValue:返回给定节点的当前值(字符串)
如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容。
如果给定节点是一个元素节点,返回值是 null
nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值,
但可以为文本节点的 nodeValue 属性设置一个值。
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “国庆60年”;
3,DOM属性 nodeType
nodeType:返回一个整数,这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:
Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType 是个只读属性
举例:
如下的html: 请将select中的文本输出(用两种方法来写)
<body>
<div>
<form action="">
用户名:<input type="text" name="name" />
学历:<select id="edu" name="education">
<option value="大专">大专生</option>
<option value="本科">本科生</option>
<option value="硕士">硕士生</option>
<option value="博士">博士生</option>
</select>
<input type="submit" value="注册" />
</form>
</div>
用户的学历是:
<div id="showMsg">
</div>
</body>
第一种(用getElementById()和getElnmentByNmae()方法读取)
<script type="text/javascript">
window.onload = function() {
//通过getElementById("edu")方法获取select的对象
var edus = document.getElementById("edu");
//通过select中options集合获取所有的option对象
var edus1 = edus.options;
var msg ="";
//遍历所有的option对象的文本值
for(var i=0;i<edus1.length;i++){
msg+=edus1[i].innerHTML+",";
}
//把获取的msg信息写入到showMsg的div中
document.getElementById("showMsg").innerHTML=msg;
}
</script>
第二种(通过元素节点的属性来读取)
<script type="text/javascript">
window.onload = function() {
//通过getElementById("edu")方法获取select的对象
var edus = document.getElementById("edu");
var edus1 = edus.childNodes;
alert(edus1.length);
var fc = edus.firstChild;
alert(fc.nodeName);
var lc = edus.lastChild;
alert(lc.nodeName);
var llc = lc.firstChild;
alert(llc.nodeValue);
var msg="";
for(var i=0;i<edus1.length;i++){
if(edus1[i].nodeType==1)
msg+=edus1[i].lastChild.nodeValue+",";
}
document.getElementById("showMsg").innerHTML=msg;
}
</script>