}
}
//此方法回傳的是備份類型
var usernameElements=document.getElementsByName("username");
for (var i = 0; i / /取得元素的類型
//alert(usernameElements[i].type)
//取得元素值的值
/ /alert(usernameElements[i].value);
//擁抱函數直接量的方法
usernameElements[i].onchange = function(){
alert(this.value);
}
}
;
<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);
此方法不一定需要在整個文件上使用。可以用來在某個特定元素的子節點尋找有給定標籤名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”) ;
警報(元素.length)警報(元素.
複製程式碼
程式碼如下:// //處理input//var inputElements=document.getElementsByTagName("input");
// //輸出輸入標籤的長度// //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);
// //处理input// var inputElements=document.getElementsByTagName("input");// //输出input标签的长度// //alert(inputElements.length);// for(var i=0;i<inputelements.length if alert var selectelements='document.getElementsByTagName("select");//' for j="0;j<selectElements.length;j++){//" optionelements='selectElements[j].getElementsByTagName("option");//' i="0;i<optionElements.length;i++){//" textareaelements='document.getElementsByTagName("textarea");'> 🎜><div class="codetitle">程式碼如下:<span><a style="CURSOR: pointer" data="39839" class="copybut" id="copybut39839" onclick="doCopy('code39839')"><u>var inputElements= document.getElementsByTagName("input");</u>for(var i=0;i<inputelements.length>if (inputElements.type != '提交') {</inputelements.length></a>inputElements[i] .onchange = function(){</span>alert(this.value)</div>};<div class="codebody" id="code39839">}<br><br>var selectElements=document.getElementsByTagName("select");<br>for (var i = 0; i <selectelements.length i>selectElements[i].onchange=function(){ <br>alert (this.value);<br>}<br>}<br><br> <pre style="DISPLAY: none" class="html" name="code"> var inputElements=document.getElementsByTagName("input"); for(var i=0;i<inputelements.length if inputelements function alert var selectelements='document.getElementsByTagName("select");' for i="0;" selectelements.length>
<p><br></p>
<p><strong>八、parentNode、firstChild以及lastChild</strong></p>
<p>这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。<br>请看下面这个 HTML 片段:</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="79360" class="copybut" id="copybut79360" onclick="doCopy('code79360')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code79360">
<br><table> <br><tr>
<br><td>John</td> <br><td>Doe</td>
<br><td>Alaska</td> <br>
</tr>
<br>
</table> <br>
</div>
<p><br>在上面的HTML代码中,第一个 </p>
<td> 是 </td>
<tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 </td>
</tr>
<tr>元素的最后一个子元素(lastChild)。<br>此外,</tr>
<tr> 是每个 <td>元 素的父节点(parentNode)。
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="60797" class="copybut" id="copybut60797" onclick="doCopy('code60797')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code60797">
<br>var textareaElements=document.getElementsByTagName("textarea");<br>for (var i = 0; i textareaElements[i].onchange = function(){<br>alert(this.value);<br>};<br>}<br>
</div>
<pre style="DISPLAY: none" class="html" name="code"> var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i
九、查看是否存在子节点
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 alert>
</inputelements.length>
十、根节点
有两种特殊的文档属性可用来访问根节点:
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 是个只读属性