`
GoodWell
  • 浏览: 28780 次
  • 性别: Icon_minigender_1
  • 来自: 河北邢台
社区版块
存档分类

Dom总结

阅读更多
Dom节点信息:
每个节点都拥有包含着关于节点的某些信息的属性,他们是:
1、nodeName:
nodName属性还有某个节点的名称
var name=node.nodeName;
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
nodeName所包含的xml元素的标签永远是大写的。
注:nodeName是一个只读的属性
2、nodeValue:
返回给定节点的当前值(字符串)
如果给定节点是一个属性节点,返回值是这个属性的值。
如果给定节点是一个文本节点,返回值是这个文本节点的内容
如果给定节点是一个元素节点,返回值是null
nodeValue是一个读/写属性,但不能对元素节点的nodeValue属性设置值,但可以为文本节点的nodeValue属性设置一个值。
3、nodeType:
返回一个整数,这个数值代表着给定节点的类型。
nodeType属性返回的整数值对应着12中节点类型常用的有三种
Node.ELEMENT_NODE ---1-- 元素节点
Node.ATTRIBUTE_NODE---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点
nodeType是个只读的属性
查找元素节点:
1、getElementById
寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象
2、getElementByName
寻找有着给定name属性的所有元素,这个方法将返回一个节点集合 length 属性等于当前文档里有着给定name属性的所有元素的总个数。,这个集合可以当作一个数组来处理。这个集合的
譬如:
form name="form1">
<input type="text" name="tname" value="国庆60年_1" /><br>
<input type="text" name="tname" value="国庆60年_2" /><br>
<input type="text" name="tname" value="国庆60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok"onclick="test();">
</form>
function test(){
var tnameArray=document.getElementsByName("tname");
alert(tnameArray.length);
for(var i=0;i<tnameArray.length;i++){
window.alert(tnameArray[i].value);
}
}
3、getElementsByTagName
寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(sid);
var elements = container.getElementsByTagName(p);
alert(elements .length);
譬如:
处理input
var inputElements=document.getElementsByTagName("input");
输出input标签的长度
alert(inputElements.length);
for(var i=0;i<inputElements.length;i++){
if(inputElements[i].type!='button'){//submit
alert(inputElements[i].value);
}
}
处理select
获取select标签
var selectElements=document.getElementsByTagName("select");
获取select下的子标签
for(var j=0;j<selectElements.length;j++){
var optionElements=selectElements[j].getElementsByTagName("option");
for(var i=0;i<optionElements.length;i++){
alert(optionElements[i].value);
}
}
var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
if (inputElements.type != 'submit') {
inputElements[i].onchange = function(){
alert(this.value)
};
}
var selectElements=document.getElementsByTagName("select");
for (var i = 0; i < selectElements.length; i++) {
selectElements[i].onchange=function(){
alert(this.value);
}
}
查看是否还有子节点:
hasChildNodes
该方法用来检测一个元素是否还有子节点返回的是true或false
Var boolean = element.hsoChileNodes();
文本节点和属性节点不可能包含任何子节点所以对这两类节点使用hasChildNodes返回的永远是false
如果该方法返回的是空则childNode.firstChild,lastChild将是空数组或空字符串
根节点:
有两种特殊的属可以来访问根节点
1、document.documentElement
该属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
2、document.body
该属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics