qqmmcc123 发表于 2011-12-20 09:48

javaScript DOM方法与属性摘要

<span class="Apple-style-span" style="font-family: Verdana, Arial, Tahoma; font-size: 14px; line-height: 25px; "><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">1 createElement(element)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">eg) var para = document.createElement("p");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">&nbsp;&nbsp;&nbsp; document.body.appendChild(para);</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">2 createTextNode()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">reference = document.createTextNode()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">参数为新建文本节点所包含的文本字符串&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">eg)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var message = document.createTextNode("hello world");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var container = document.createElement("p");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">container.appendChild(message);&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">document.body.appendChild(container);</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">3 cloneNode()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">reference = node.cloneNode(deep)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">为给定节点创建一个副本,参数为true或者false,true表示同时复制该节点的子节点,false则不复制任何子节点。&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var para = document.createElement("p");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var message = document.createTextNode("hello world");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">para.appendChild(message);&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">document.body.appendChild(para);&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var newpara = para.cloneNode(true);&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">document.body.appendChild(newpara);</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">4 appendChild()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">reference = node.appendChild(newChild);&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">插入节点,例子参考前面。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">5 insertBefore()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">reference = element.insertBefore(newNode,targetNode)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">将一个给定节点插入到一个给定元素节点的给定子节点的前面,返回一个指向新增子节点的引用指针。&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">eg)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var container = document.getElementById("content");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var message = document.getElementById("fineprint");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var para = document.createElement("p");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">container.insertBefore(para,message);</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">6 removeChild()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">reference = element.removeChild(node)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">将从一个给定元素利删除一个子节点,返回一个指向已被删除的子节点的引用指针。&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">当某个节点被removeChild()删除后,此节点所有子节点都被删除。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">7 replaceChild()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">reference = element.replaceChild(newChild,oldChild)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">把一个给定父元素里的一个子节点替换为另外一个节点,oldChild节点必须是element元素的一个子节点,返回值是一个指向已被替换的那个&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">子节点的引用指针。&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">eg)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var container = document.getElementById("content");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var message = document.getElementById("fineprint");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">var para = document.createElement("p");&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">container.replaceChild(para,message);</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">8 setAttribute()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">element.setAttribute(attributeName,attributeValue);&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">为给定元素节点添加一个新的属性值或是改变它的现有属性</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">9 getAttribute&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">attributeValue = element.getAttribute(attributeName)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">返回一个给定元素的一个给定属性节点的值。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">10 getElementById()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">element = document.getElementById(ID)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">寻找一个有着给定id属性值的元素,返回一个元素节点</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">11 getElementByTagName()&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">用于寻找有着给定标签名的所有元素:&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">elements = document.getElementsByTagName(tagName)&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">返回一个节点集合。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">12 hasChildNodes&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">用来检查一个给定元素是否有子节点&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">booleanValue = element.hasChildNodes&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">返回true或false。</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">13 DOM属性&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">节点的属性&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">nodeName属性将返回一个字符串,其内容是给定节点的名字。&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">如果节点是元素节点,返回这个元素的名称;&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">如果是属性节点,返回这个属性的名称;&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">如果是文本节点,返回一个内容为#text的字符串;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">nodeType属性将返回一个整数,这个数值代表给定节点的类型&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">nodeValue属性将返回给定节点的当前值&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">如果节点是元素节点,返回null;&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">如果是属性节点,返回这个属性的名称;&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">如果是文本节点,返回文本节点的内容;</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">遍历节点树&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">childNodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">firstChild 返回第一个子节点&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">lastChild 返回最后一个子节点&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">nextSibling 返回给定节点的下一个子节点&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">parentNode 返回一个给定节点的父节点&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">previousSibling 返回给定节点的下一个子节点??</p><p style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 22px; margin-left: 0px; padding-top: 0px; ">14 setTimeout&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">javaScript函数,能够让某个函数在经过一段预定的时间之后才开始执行,函数有两个参数,第一个参数是将要执行的那个函数的名字;&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">第二个参数是一个数值,以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数:&nbsp;<br style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; ">setTimeout("function",interval);</p></span>
               
               
               
               
页: [1]
查看完整版本: javaScript DOM方法与属性摘要