位置: 编程技术 - 正文
一、DOM
DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.D:文档 ? html 文档 或 xml 文档O:对象 ? document 对象的属性和方法M:模型DOM 是针对xml(html)的基于树的API。DOM树:节点(node)的层次。DOM 把一个文档表示为一棵家谱树(父,子,兄弟)DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
二、DOM的结构
三、节点
根据 DOM,HTML 文档中的每个成分都是一个节点。DOM 是这样规定的:整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点
四、Node 层次
节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。
五、节点及其类型
节点 * 由结构图中我们可以看到,整个文档就是一个文档节点。 * 而每一个HMTL标签都是一个元素节点。 * 标签中的文字则是文本节点。 * 标签的属性是属性节点。 * 一切都是节点……
节点树 节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……
六、查找并访问节点
你可通过若干种方法来查找您希望操作的元素:通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
七、查找元素节点
getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.var oElement = document.getElementById ( sID ) 该方法只能用于 document 对象
<input type="text" value="国庆周年" id="tid"> function test(){ var usernameElement=document.getElementById(“tid"); //获取元素的值 alert("usernameElement.value: "+usernameElement.value) //获取元素的类型 alert("usernameElement.type: "+usernameElement.type)}
getElementsByName()寻找有着给定name属性的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。
<form name="form1"> <input type="text" name="tname" value="国庆年_1" /><br> <input type="text" name="tname" value="国庆年_2" /><br> <input type="text" name="tname" value="国庆年_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); } }
在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。此外,<tr> 是每个 <td>元 素的父节点(parentNode)。
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());}十、根节点
有两种特殊的文档属性可用来访问根节点:document.documentElement document.body 第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
十一、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 = “国庆年”;nodeType(节点类型)
nodeType:返回一个整数,这个数值代表着给定节点的类型。nodeType 属性返回的整数值对应着 种节点类型,常用的有三种:Node.ELEMENT_NODE ---1 -- 元素节点Node.ATTRIBUTE_NODE ---2 -- 属性节点Node.TEXT_NODE ---3 -- 文本节点nodeType 是个只读属性
推荐整理分享在javascript中对于DOM的加强(javascript的对象主要包括),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:js里面的对象,在JavaScript中对函数类型对象类型变量,在javascript中对数组元素进行排序,javascript对象有什么用,javascript对象有什么用,在javascript中对象包含以下哪些要素,在JavaScript中对函数类型对象类型,在javascript中对数组元素进行排序,内容如对您有帮助,希望把文章链接给更多的朋友!
javascript标签在页面中的位置探讨 在制作网页的过程中,我们经常写类似下面的代码:[html]htmlheadtitleExampleHTMLPage/titlescripttype="text/javascript"src="example1.js"/scriptscripttype="text/javascript"src="exampl
JavaScript在XHTML中的用法详解 编写XHTML代码的规则要比编写HTML要严格得多,类似下面的代码在HTML中是有效的,但在XHTML中则是无效的。[javascript]scripttype="text/javascript"functioncompare(a,b){i
Js中setTimeout()和setInterval() 何时被调用执行的用法 定义setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定
友情链接: 武汉网站建设