Dom总结

最新推荐文章于 2024-09-11 20:08:48 发布

zhiming1164

最新推荐文章于 2024-09-11 20:08:48 发布

阅读量385

点赞数

分类专栏： javascript 文章标签： input 文档 button function html xml

本文链接：https://blog.csdn.net/zhiming1164/article/details/6330955

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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">

</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].οnchange=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> 标签的直接访问。

zhiming1164

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom总结

Dom总结
复制链接

扫一扫

专栏目录