位置: 编程技术 - 正文
的结构可能是这样的:
<P> ---------------- -------------- ALIGN This is a <B> | | right paragraph这就是元素节点,文本节点和参数节点。%的HTML页面都是由他们组成,你的主要任务也就是如何放置他们。当然还有很多的其他节点,暂且略过。
就像你所了解的,p元素也有他自己的父节点,通常就是document,有时候也可能是一个DIV。所以整个文档都可以看做是一颗由很多的节点组成的树,而且这些节点大多都有自己的子节点。
<BODY> |------------------------------------- <P> ---------------- lots more nodes -------------- ALIGN This is a <B> | | right paragraph遍历DOM树 知道了DOM树的结构,你就可以遍历他来找到你想要的元素。举个例子,假设元素节点p已经存储在变量x中(等一会介绍这是怎么做到的)。这时候如果我们想访问BODY那么: 我们就得到了x的父元素,然后就可以修改它了。这样可以到达B节点: childNode是一个包含所有x的子节点的数组。当然,数组是从0开始编号的,所以childNode[0]就是文本节点"This is a " childNode[1]就是B节点。 两个特别的:x.firstChild就表示x的第一个子节点;x.lastChild就表示x的最后一个子节点。 假设p是BODY的第一个子节点,BODY又是document的第一个子节点,所以为了到达B节点,你可以用下面的任意方法: 甚至是下面这个比较笨的: 得到一个元素 然而,这样遍历文档实在是太麻烦了。因为Level 1 DOM设计的目标就是允许你修改整个DOM树,所以你必须准确的知道DOM树的结构,这会很快导致一些问题。 所以还有一些方法能够很快的到达你想要的元素。只要你到达了这里,就可以遍历整个DOM树的每一个节点。 让我们继续前面的例子。你想要到达元素B。最简单的办法就是直接跳过去。通过document.getElementByTagName你就能很快的创建一个包含文档内的所有B标签的数组。假设我们的B是第一个,那么你就可以简单的写: x就包含了元素节点B。首先你命令浏览器得到整个文档的所有元素B(document.getElementByTagName(‘B')) ,然后你选择了第一个文档的第一个元素B([0]),就得到了你想要的。 你也可以写: 现在你先到了文档的第一个段落P(假设我们的P是第一个元素),然后到达p的最后一个子元素。 最好的能准确到达元素并且不需要DOM结构的办法就是给B一个ID: <P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>现在你就可以简单的写: 元素B就存储在了x里。 修改一个节点 现在我们已经到达了节点,就可以做一些修改了。假设我们想把加粗的文字部分修改为'bold bit of text'。我们需要访问正确的元素然后修改它的nodeValue。现在正确的元素不是元素B而是他的子元素text node:我们想改变的是文字,不是元素。所以可以写: 元素就改变了。 你可以通过nodeValue来修改任何文本节点或者参数。比如你可以修改段落的ALIGN参数。这也是非常的简单,先找到需要的元素(在这个例子中是B元素的父元素),然后使用setAttribute()方法来设置你想要的值: 创建和删除元素 修改元素固然有用,但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。 创建元素使用下面的方法: var x=document.createElemnt(‘HR') 这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN,我们就把它插入到这。所以我们使用appendChild()方法: 删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN,然后我告诉他移除他的第一个子元素: 同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。 你可以试一试,你会注意到用老的办法可能不会移除新加的文本,那是因为他们已经成为分离的两部分了: <B> ------------ paragraph A new text node has been appended!(可以通过normalize()来把他们合并,但是IE5不支持) 我不打算告诉你怎么移除它,自己练习会比较有收获 翻译地址: 转载请保留以下信息 作者:北玉(tw:@rehawk)推荐整理分享JavaScript DOM学习第一章 W3C DOM简介(js domcontentloaded),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:javascript中的dom,js dom操作方法,javascript的dom操作,javascript的dom操作,javascriptdom编程,js domcontentloaded,js中dom的用法,javascript的dom,内容如对您有帮助,希望把文章链接给更多的朋友!
JavaScript DOM 学习第二章 编辑文本 例子这个页面就是个例子。点击一个段落,编辑,然后点Ready。你的修改就会呈现。问题遇到的第一个问题是:我想用文本框作为编辑区域。一开始我
JavaScript DOM 学习第三章 内容表格 如果你也想这么做,那么你还需要我的getElementByTagNames()函数。functioncreateTOC(){vary=document.createElement('div');y.id='innertoc';vara=y.appendChild(document.createElement('span
JavaScript DOM学习第四章 getElementByTagNames getElementByTagNames(注意是复数的names)会获得一些tag的元素,然后按照他们的顺序保存在一个数组中。这非常的有用,比如在上一章的TOCScript中,就需要
下一篇:JavaScript DOM 学习第二章 编辑文本(js中dom的用法)
友情链接: 武汉网站建设