常见javaScript DOM方法与属性

1. createElement(element)
创建一个指定标签名创建一个新的元素节点,返回值为指向新建元素节点的引用指针。
eg)
var para = document.createElement("p"); 
document.body.appendChild(para);


2. createTextNode()
创建一个包含着给定文本的新文本节点,返回一个指向新建文本节点的引用指针:
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串
eg)
var message = document.createTextNode("hello world"); 
var container = document.createElement("p"); 
container.appendChild(message); 
document.body.appendChild(container); 


3. cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本,参数为 true 或者 false,true 表示同时复制该节点的子节点,false 则不复制任何子节点。
var para = document.createElement("p"); 
var message = document.createTextNode("hello world"); 
para.appendChild(message); 
document.body.appendChild(para); 
var newpara = para.cloneNode(true); 
document.body.appendChild(newpara); 


4. appendChild()
reference = node.appendChild(newChild);
插入节点,例子参考前面。

5. insertBefore()
reference = element.insertBefore(newNode,targetNode)
将一个给定节点插入到一个给定元素节点的给定子节点的前面,返回一个指向新增子节点的引用指针。
eg)
var container = document.getElementById("content"); 
var message = document.getElementById("fineprint"); 
var para = document.createElement("p"); 
container.insertBefore(para,message);


6. removeChild()
reference = element.removeChild(node)
将从一个给定元素利删除一个子节点,返回一个指向已被删除的子节点的引用指针。
当某个节点被 removeChild()删除后,此节点所有子节点都被删除。

7. replaceChild()
reference = element.replaceChild(newChild,oldChild)
把一个给定父元素里的一个子节点替换为另外一个节点,oldChild 节点必须是 element 元素的一个子节点,返回值是一个指向已被替换的那个
子节点的引用指针。
eg)
var container = document.getElementById("content"); 
var message = document.getElementById("fineprint"); 
var para = document.createElement("p"); 
container.replaceChild(para,message);


8. setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

9. getAttribute()
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

10. getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素,返回一个元素节点

11. getElementByTagName()
用于寻找有着给定标签名的所有元素:
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

12. hasChildNodes
用来检查一个给定元素是否有子节点
booleanValue = element.hasChildNodes
返回 true 或 false。

13. DOM属性
i.节点的属性
(1)nodeName 属性将返回一个字符串,其内容是给定节点的名字。
如果节点是元素节点,返回这个元素的名称;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回一个内容为#text 的字符串;

(2)nodeType 属性将返回一个整数,这个数值代表给定节点的类型   1代表元素

(3)nodeValue 属性将返回给定节点的当前值
如果节点是元素节点,返回null;
如果是属性节点,返回这个属性的名称;
如果是文本节点,返回文本节点的内容;

ii.遍历节点树
(1)childNodes 该属性返回一个数组,这个数组由给定元素节点的子节点构成
(2)firstChild 返回第一个子节点
(3)lastChild 返回最后一个子节点
(4)nextSibling 返回给定节点的下一个子节点
(5)parentNode 返回一个给定节点的父节点
(6)previousSibling 返回给定节点的下一个子节点??

14. setTimeout()
javaScript 函数,能够让某个函数在经过一段预定的时间之后才开始执行,函数有两个参数,第一个参数是将要执行的那个函数的名字;
第二个参数是一个数值,以毫秒为单位设定了需要经过多长时间才开始执行由第一个参数所给出的函数:
setTimeout("function",interval);



15. javascript DOM 遍历

以下一系列的辅助函数可以帮助您,他们能取代标准的previousSibling,nextSibling,firstChild,lastChild,parentNode;
 //------------------------DOM 遍历,如果元素没找到则返回null-----------------------//    
     //---查找相关元素的前一个兄弟元素---//    
     function prev(elem){    
         do{    
             elem=elem.previousSibling;    
         }while(elem&&elem.nodeType!=1);    
         return elem;    
    }    
    //---查找相关元素的下一个兄弟元素---//    
    function next(elem){    
        do{    
            elem=elem.nextSibling;    
        }while(elem&&elem.nodeType!=1);    
        return elem;    
    }    
    //---查找第一个子元素的函数---//    
    function first(elem){    
        elem=elem.firstChild;    
        return elem && elem.nodeType!=1 ?next(elem):elem;    
    }    
   //---查找最后一个子元素的函数---//    
    function last(elem){    
        elem=elem.lastChild;    
        return elem && elem.nodeType!=1 ?prev(elem):elem;    
    }    
    //---查找父级元素的函数---//    
    //num是父级元素的级次,parent(elem,2)等价于parent(parent(elem))    
    function parent(elem,num){    
        num=num||1;    
        for(var i=0; i<num; i++){    
            if(elem!=null){    
               elem=elem.parentNode;    
            }    
        }    
        return elem;    
    } 

你可能感兴趣的:(JavaScript)