br>
<input type="text" name="username" value="国庆60年_1" /><br> <input type="text" name="username" value="国庆60年_2" /><br> <input type="text" name="username" value="国庆60年_3" /><br> <input type="button" name="ok" value="保存" id="ok"><br><script language="JavaScript"> //该方法返回是数组类型 var usernameElements=document.getElementsByName("username"); for (var i = 0; i < usernameElements.length; i++) { //获取元素的类型 //alert(usernameElements[i].type) //获取元素value的值 //alert(usernameElements[i].value); //采用函数直接量的方法 usernameElements[i].onchange = function(){ alert(this.value); }} </script><br>
getElementsByTagName()
は、指定されたタグ名に含まれるすべての要素を取得します。このメソッドは、現在のテキストに含まれる現在のテキストの集合として処理できるノード ポイントの集合を返します。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
このメソッドは、文書全体で使用する必要はありません。特定の要素の子ノードに、指定された名前の要素を表示するために使用できます。 ;
alert(要素 .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// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0; i//alert(optionElements[i].value);
// }
// }
var textareaElements=document. getElementsByTagName("textarea");
alert(textareaElements[0].value);
// //处理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
if (inputElements.type != 'submit') {
inputElements[i] .onchange = function(){
alert(this.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 までご連絡ください。 |