`
GoodWell
  • 浏览: 29536 次
  • 性别: Icon_minigender_1
  • 来自: 河北邢台
社区版块
存档分类

Dom总结

阅读更多
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> 标签的直接访问。
分享到:
评论

相关推荐

    DOM知识总结

    史上最详细的DOM笔记,最全DOM操作详解。

    JavaScript_——DOM总结.txt

    ### 七、总结 通过 DOM 和 BOM,JavaScript 能够实现对网页的动态控制和操作,这是现代 Web 开发的核心技术之一。理解 DOM 和 BOM 的工作原理对于成为一名合格的前端开发者至关重要。此外,掌握这些技术也有助于...

    HTML 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 ...

    JavaSript DOM总结笔记.rar

    在本篇总结笔记中,我们将深入探讨JavaScript与DOM的互动,包括查找、修改和添加网页元素。 1. **DOM基本概念** - DOM树:HTML文档被解析后形成一棵节点树,每个节点代表文档的一部分。 - 元素节点:HTML标签对应...

    DOM事件总结(教辅)

    DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...

    Javascript DOM 总结

    以下是对JavaScript DOM操作的总结,主要涉及创建、复制和插入节点的方法: 1. **创建节点** - `createElement()`:此方法用于创建一个新的元素节点。例如,`document.createElement('p')`会创建一个`&lt;p&gt;`元素。...

    javascript DOM总结

    JavaScript DOM(文档对象模型)是Web开发中的一个重要概念,它是一种标准,允许程序和脚本动态...结合jQuery等库,DOM操作变得更加简便,但理解基本的DOM概念和BOM机制对于任何JavaScript开发者来说都是非常重要的。

    dom学习总结

    7. **DOM Level**:DOM分为不同的级别,如DOM Level 1、DOM Level 2和DOM Level 3,每级扩展了更多的功能,如DOM Level 2引入了CSS操作,DOM Level 3增加了XML命名空间和比较文档的功能。 8. **性能考虑**:虽然DOM...

    xml&dom&sax&dom4j 代码编写和总结

    对于xml&dom&sax&dom4j 文件解析的代码总结

    DOM内容总结

    对于DOM的一些总结,DHTML,BOM,DOM对象里的一些属性和方法

    JavaScript(四):JavaScript版的DOM总结

    DOM的核心在于将文档分解为一个个节点,这些节点包括元素节点、文本节点、属性节点等,形成了一个树状结构,称为DOM树。 1、DOM结构 DOM树是由各种类型的节点构成的,例如元素节点(如`&lt;div&gt;`)、文本节点(包含...

    Javascript基础知识(三)BOM,DOM总结

    BOM和DOM是JavaScript中两个非常重要的概念,它们是实现网页动态交互的核心技术。BOM(Browser Object Model)指的是浏览器对象模型,它允许开发者通过JavaScript操作浏览器窗口、导航历史、定时器等浏览器自身功能...

    JavaScript获取HTML DOM节点元素的方法的总结

    以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...

    javascript 常用DomAPI总结

    ### JavaScript DOM API 总结 #### 一、概述 JavaScript 的 Document Object Model (DOM) API 是一种用于 HTML 和 XML 文档的标准编程接口。通过 DOM API,开发者能够动态地访问、更新文档的内容、结构和样式。...

    dom4j 总结

    dom4j 总结

    JAVAWeb全课程笔记( html版)

    DOM总结 tomcat服务器 servlet基础 Request&Response编程 Cookie&Session XML语言 JSP技术入门 EL表达式语言 JSTL标签库: JSP标准标签库 MVC程序架构思想&案例 [总结]Path路径问题 [总结]JavaWeb乱码问题 [转自IBM]...

    使用dom4j 和本地dom 解析xml 文件

    总结来说,DOM解析是标准的XML处理方式,而DOM4J是其增强版,提供了更多的特性。在Java开发中,根据XML文件的大小和处理需求,可以选择DOM4J以获得更好的性能和便利性。理解并熟练掌握这两种解析技术,对于处理XML...

    dom4j_1.6.1.jar dom4j_2.1.0.jar

    总结来说,DOM4J是一个强大的XML处理库,提供了丰富的API和功能,包括解析、操作和查询XML文档。两个不同版本的jar文件包含了源码和文档,方便开发者深入学习和自定义。了解和掌握DOM4J对于处理XML任务的Java开发...

Global site tag (gtag.js) - Google Analytics