dom元素和方法总结

主要是参考《精通javascript》。

全局变量有：

document。这个变量包含浏览器的html dom文档的引用。

 

HTMElement

 这个变量是所要html dom 元素的超类对象，扩展这个变量的原型prototype就可以扩展所有的html dom元素。

HTMLElement.prototype.newFunciton=function() {.......};

 

dom操作如下：

body document.body直接执行body元素。

 

getElementById

getElementsByTagName

 

childNodes. 下面展示了如何使用childNodes属性为一个父元素的所有子元素增加样式

var c=document.body.childNodes;

for(var i=0;i<c.lenght;i++{

 if(c[i].nodeType==1)//确保该节点是一个元素

     c[i].style.border="1px solid red";

 

documentElement         指向的是html。

 

firstChild            指向第一个子元素，如果元素没有子节点，则firstChild为null。

从一个元素中删除所有子节点

var e=document.getElementById("body");

while(e.firstChild)

    e.removeChild(e.firstChild);

 

lastChild 如果不存在子节点，则为null。

下面演示了使用lastChild来为文档插入元素的例子：

创建一个新的div元素并插入到body最后一个元素之前

var n=document.createElement("div");

n.innerHTML=“thanks for visiting!";

document.body.insertBefore(n,document.body.lastchild);

 

nextSibing 指向下一个兄弟节点

 

parentNode 

 

previousSibing

 

dom操作属性

className

 

getAttribute(attrName)

 

removeAttribute(attrNmame) 同setAttribute(atrr,"");设置为空字符串一样。

 

 

setAttrbute(atrr,value)

 

 

dom修改

appendChild appendchild必须在你所期望追加的元素上调用。

cloneNode(true|false)  

该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

查找文档的第一个ul元素，完全复制它，并追加到ul之后

var ul=document.getElementsByTagName("ul")[0];

//clone节点并追加到旧元素的后面

ul.parentNode.appendChild(ul.cloneNode(true) );

 

createElement(tagNasme)

createElementNS

 

createTextNode(textString)

 

innerHTML

 

insertBefore(nodeToInsert,nodeToInsertBeforE)

 这是一个用来在文档任意地方插入dom节点函数，该函数必须在你希望插入到前面元素的父元素上调用

 

经常这么用

elem.parentNode.insertBefore(newNode,ul);

 

removeChild(nodeToremvoe); 该函数必须在你希望删除节点的父元素上调用。

div.parentNode.removeChild(div);

 

replaceChild(noteToInsert,nodeToRepalce)； 该函数必须在你需要替换的节点的父元素上调用。

//查找文档中的所有<a>连接
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
    //创建一个strong对象
    var s=document.createElement("strong");
    
    //使内容为<a>的url
    s.appendChild( document.createTextNode( a[i].href ) );
    
    //使用<strong>元素替换<a>元素
    a[i].parentNode.replaceChild(s,a[i]);
}

原书上有错误，写的是a[i].replacechild(s,a[i]); 错误之处在于replaceChild必须在被替换元素的父元素上调用。