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必须在被替换元素的父元素上调用。

巴特西

dom元素和方法总结

全局变量有：

dom操作如下：

dom操作属性

dom修改

最新文章

热门文章