主要是参考《精通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必须在被替换元素的父元素上调用。