当前位置：首页 -> 网页设计 -> 经验技巧 -> DOM 精简知识教程

DOM 精简知识教程

时间： 2021-07-31 作者：daque

先来看一张大略的文书档案树

很鲜明树的高层节点是nodea节点,接下来不妨经过指定的符合节点挪动到树中的任何点,贯串以次的代码你不妨更好的领会这棵树节点间的彼此联系:nodea.firstchild = nodea1 nodea.lastchild = nodea3 nodea.childnodes.length = 3 nodea.childnodes［0］ = nodea1 nodea.childnodes［1］ = nodea2 nodea.childnodes［2］ = nodea3 nodea1.parentnode = nodea nodea1.nextsibling = nodea2 nodea3.prevsibling = nodea2 nodea3.nextsibling = null nodea.lastchild.firstchild = nodea3a nodea3b.parentnode.parentnode = nodeadom设置对操纵一个文书档案东西的节点构造供给了适用的本领,它供给了像实行东西插入,革新,简略,克隆等那些常用的本领。insertbefore()--在参考子节点之前插入一个新的子节点.即使参考的子节点为null,则新的子节点将动作挪用节点的结果一个子节点插入。replacechild()--在childnodes汇合种运用指定的newchild来包办oldchild;即使包办胜利,则归来oldchild;即使newchild是null,则只需简略oldchild即可。removechild()--从节点的childnodes汇合中简略removechild指定的节点,即使简略胜利,则归来简略的子节点。appendchild()--增添一个新节点到childnodes汇合的结束,即使胜利,则归来新节点。clonenode()--创造一个新的、复制的节点,而且即使传入的参数是true时,还将复制子节点,即使节点是一个元素,那么还将复制相映属性,归来新的节点。为了在一棵文书档案树中考察大概创造一个新的节点,不妨用底下那些本领:getelementbyid()getelementsbytagname()createelement()createattribute()createtextnode()提防:在一个页面中惟有一个文书档案东西,除去getelementsbytagname()外,其它本领均只能经过document.methodname()挪用。再看一下底下这个例子:<html><head><title></title></head><body><p>this is a sample paragraph.</p><script language="javascript"></script></body></html>截止将会表露"p",底下是少许证明document.documentelement - gives the page's html tag. lastchild - gives the body tag. firstchild - gives the first element in the body. tagname - gives that element's tag name, "p" in this case.另一个:<html><head><title></title></head><body><p>this is a sample paragraph.</p><script language="javascript"></script></body></html>这个例子和上头并没有什么大的辨别,只是是多了一个空行,然而在ns中,会机动为空行加上一个节点以是归来值是"undefined",而在ie中将跳过空行仍旧指向p标签。更常用的本领:<p id="myparagraph">this is a sample paragraph.</p>...alert(document.getelementbyid("myparagraph").tagname);这种本领你不必关怀节点在文书档案树的哪一个场合,而只有保护在页面中它的id号是独一的就不妨了。接下来一种考察元素节点的本领是document.getelementsbytagname(),它的归来值是一个数组,比方你不妨经过底下的例子变换所有页面包车型的士贯穿：var nodelist = document.getelementsbytagname("a");for (var i = 0; i < nodelist.length; i++)nodelist[i].style.color = "#ff0000";attribute和attributesattribute东西和元素关系,然而却没有被觉得是文书档案树的一局部,所以属性不许动作子节点汇合的一局部来运用。有三种本领不妨为元素创造新的属性1.var attr = document.createattribute("myattribute");attr.value = "myvalue";var el = document.getelementbyid("myparagraph");el.setattributenode(attr);2.var el = document.getelementbyid("myparagraph");el.setattribute("myattribute", "myvalue");3.var el = document.getelementbyid("myparagraph");el.myattribute = "myvalue";你不妨在html标签种设置本人的属性:<p id="myparagraph" myattribute="myvalue">this is a sample paragraph.</p>...alert(document.getelementbyid("myparagraph").getattribute("myattribute"));归来值将是"myvalue".然而请提防这边必需运用getattribute,而不是attributename,由于有少许欣赏器并不扶助自设置属性。attributes也不妨被简单的从一个元素中简略,你不妨运用removeattribute()大概将element.attributename指向一个null值。经过attributes咱们就不妨爆发少许动静功效：<p id="sample1" align="left">text in a paragraph element.</p>... code for the links ...document.getelementbyid('sample1').setattribute('align', 'left');document.getelementbyid('sample1').setattribute('align', 'right');另一种:<p id="sample2" style="text-align:left;">text in a paragraphelement.</p>... code for the links ...document.getelementbyid('sample2').style.textalign = 'left';document.getelementbyid('sample2').style.textalign = 'right';跟上头的例子一律,展现了可用经过元素窜改style中的属性,以至是class中的.独一要提到的是textalign是从style中的text-align中演化而来的,有一条基础顺序,即是style中的属性即使展示-则在dom中将会被去掉而且随后的一个假名将改为小写,再有一点即是即使纵然元素中没有style属性,上述例子同样不妨运用。text nodes:先看一下例子：<p id="sample1">this is the initial text.</p>... code for the links ...document.getelementbyid('sample1').firstchild.nodevalue ='once upon a time...';document.getelementbyid('sample1').firstchild.nodevalue ='...in a galaxy far, far away';开始text nodes并没有像elements那么具备id属性,一切它并不许径直经过document.getelementbyid()大概document.getelementsbytagname()考察看一下底下的构造大概会更领会少许：

dom 精简知识教程图1

不妨看出经过document.getelementbyid('sample1').firstchild.nodevalue就不妨读取大概树立text nodes的值了。另一个越发搀杂一点的例子：<p id="sample2">this is the <b>initial</b> text.</p>它的文书档案构造

dom 精简知识教程图2

在这边经过document.getelementbyid('sample1').firstchild.nodevalue讲只是变换"this is the"而initial text.将不会变换.在这边大师该当看到了它和innerhtml的各别了.固然你也不妨如许用：document.getelementbyid('sample3').firstchild.nodevalue ='<b>once</b> upon a time...';document.getelementbyid('sample3').firstchild.nodevalue ='...in a galaxy <i>far, far</i> away';个中的html代码将不会被证明,欣赏器将把她们当成普遍的文从来表露。创造和简略text nodes:var mytextnode = document.createtextnode("my text");经过上头的代码你不妨创造一个新的text node,然而它并不是文书档案树的一局部,要让它表露在页面上就必需让它变成文书档案树中某一个节点的child,由于text nodes不许有儿子,以是你不许将它介入到一个text nodes中,attribute也不属于文书档案树的一局部,这条路也不行,此刻只剩下elements nodes了,以次的例子展现了怎样增添和简略一个text node：<p id="sample1">initial text within a paragraph element.</p>... code to add a text node ...var text = document.createtextnode(" new text " + (++counter1));var el = document.getelementbyid("sample1");el.appendchild(text);... code to remove the last child node ...var el = document.getelementbyid("sample1");if (el.haschildnodes())el.removechild(el.lastchild);减少文本是很简单的,上头的代码创造了一个新的text node而且经过appendchild()本领将其介入到childnodes数组的结束,并树立了一个counter1的全部变量,利于查看haschildnodes()的归来值是true or false;用来确定暂时节点能否再有child,以遏止当其没有child的功夫挪用removechild()爆发的缺点。创造element nodes有了上头的普通,该当更简单领会了,先看一下底下的代码<div id="sample1">this text is in a div element.</div>... code for the link ...var parael, boldel;parael = document.createelement("p");boldel = document.createelement("b");parael.appendchild(document.createtextnode("this is a new paragraph with "));boldel.appendchild(document.createtextnode("bold"));parael.appendchild(boldel);parael.appendchild(document.createtextnode(" text added to the div"));document.getelementbyid("sample1").appendchild(parael);你还不妨径直为新加的element nodes树立attribute,以次两种都不妨:boldel.style.color = "#ffff00";parael.appendchild(boldel);大概:parael.appendchild(boldel);boldel.style.color = "#ffff00";注:此文重要来自于少许英文材料和身边的少许参考书,即使有缺点大师请指出,一道计划,dom我一点也不熟。

dom 精简知识教程图3

DOM 精简知识教程

相关推荐

推荐下载

热门阅览

最新排行