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> 标签的直接访问。
分享到:
相关推荐
JavaScript_——DOM总结.txt
Javascript DOM 总结
史上最详细的DOM笔记,最全DOM操作详解。
DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM ...
JavaScript_——DOM总结,word文档,很好的资源!!!!
文章目录DOM总结1、DOM1)DOM结构2)DOM节点a、节点分类b、节点之间的关系c、选择器——找到节点3)DOM修改a、innerTextb、innerHTMLc、 属性 : value,style ,width2、DOM操作1) 单个HTML DOM节点的操作a、找到...
Javascript DOM 总结 Javascript DOM 总结 Javascript DOM 总结
DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...
博文链接:https://qmug.iteye.com/blog/245240
dom学习总结
javascript 常用DomAPI总结
对于xml&dom&sax&dom4j 文件解析的代码总结
对于DOM的一些总结,DHTML,BOM,DOM对象里的一些属性和方法
DOM事件总结(教辅).pdf
本文是基础知识系列的第三篇文章,主要介绍javascript中BOM,DOM的一些心得总结,非常实用,有需要的朋友可以参考下
JavaScript获取HTMLDOM节点元素的方法的总结
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。 提示: 在 W3C 2 级 DOM 事件中规范了事件模型。
dom4j 总结
DOM总结 tomcat服务器 servlet基础 Request&Response编程 Cookie&Session XML语言 JSP技术入门 EL表达式语言 JSTL标签库: JSP标准标签库 MVC程序架构思想&案例 [总结]Path路径问题 [总结]JavaWeb乱码问题 [转自IBM]...
javascript DOM 总结 一直以为DOM(文档对象模型)是JS中最简单的一部分。不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门...