// //alert(inputElements.length);
// for(var i=0;i< ;inputElements.length;i ){
// if(inputElements[i].type!='button'){//提交
//alert(inputElements[i].value);
/ / }
// }
//處理select
// //取得select標籤
// var selectElements=document.getElementsByTagName("select");// //取得select下的子標籤
// for(var j=0;j// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0; i//alert(optionElements[i].value);
// }
// }
var textareaElements=document. getElementsByTagName("textarea");
alert(textareaElements[0].value);
}
var selectElements=document.getElementsByTagName("select");
for (var i = 0; i
selectElements[i].onchange=function(){
alert (this.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); } }
八、parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段:
在上面的HTML代码中,第一个
是 | 元素的首个子元素(firstChild),而最后一个 是 |
元素的最后一个子元素(lastChild)。
此外,
是每个 元 素的父节点(parentNode)。
var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i < textareaElements.length; i++) { textareaElements[i].onchange = function(){ alert(this.value); }; }
var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i < textareaElements.length; i++) { textareaElements[i].onchange = function(){ alert(this.value); }; }<BR>
九、查看是否存在子节点
hasChildNodes() 该方法用来检查一个元素是否有子节点,返回值是 true 或 false. var booleanValue = element.hasChildNodes(); 文本节点和属性节点不可能再包含任何子节点,所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false. 如果 hasChildNodes 方法的返回值是 false,则 childNodes,firstChild,lastChild 将是空数组和空字符串。
hasChildNodes()
var selectElements=document.getElementsByTagName("select"); alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input"); for(var i=0;ialert(inputElements[i].hasChildNodes()); }
var selectElements=document.getElementsByTagName("select"); alert(selectElements[0].hasChildNodes())var inputElements=document.getElementsByTagName("input");for(var i=0;i<inputElements.length;i++){ alert(inputElements[i].hasChildNodes());}<BR>
十、根节点
有两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。 第二个属性是对 HTML 页面的特殊扩展,提供了对 标签的直接访问。
十一、DOM节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是: nodeName(节点名称)
nodeName 属性含有某个节点的名称。 var name = node.nodeName; 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:nodeName 所包含的 html 元素的标签名称永远是大写的
nodeValue(节点值)
nodeValue:返回给定节点的当前值(字符串) 如果给定节点是一个属性节点,返回值是这个属性的值。 如果给定节点是一个文本节点,返回值是这个文本节点的内容。 如果给定节点是一个元素节点,返回值是 null nodeValue 是一个 读/写 属性,但不能对元素节点的 nodeValue 属性设置值, 但可以为文本节点的 nodeValue 属性设置一个值。 var li = document.getElementById(“li”); if(li.firstChild.nodeType == 3) li.firstChild.nodeValue = “国庆60年”;
nodeType(节点类型)
nodeType:返回一个整数,这个数值代表着给定节点的类型。 nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种: Node.ELEMENT_NODE ---1 -- 元素节点 Node.ATTRIBUTE_NODE ---2 -- 属性节点 Node.TEXT_NODE ---3 -- 文本节点 nodeType 是个只读属性
陳述:本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn |