javascript学习之DOM模型(1)

2012-08-03

javascript学习之DOM模型(一)1.访问相关节点var ohtml document.documentElement\\\\\方法一var ohead

javascript学习之DOM模型(一)
1.访问相关节点

var ohtml = document.documentElement;

\\\\\方法一

var ohead = ohtml.firstChild;

var obody = ohtml.lastChild;

\\\\\\方法二

var ohead = ohtml.childNodes[0]

var obody = ohtml.childNodes[1];

getElementsByTagname("xxx")

获取标签名称为xxx的tag的元素集合

getElementsByName("xxx")

获取元素名称为xxx的集合

元素.getAttribute("") setAttribute("xx" , newvalue) removeAttribute("xx")

对于属性的增删改查

getElementById("ddd")

获取id为ddd的元素

2.节点的增删改查增var op = document.createElement("p")var otext = document.createTextNode("Helloworld")op.appendChild（otextf)document.body.appendChild(op)删var op = document.getElementById("aa")document.body.removeChild(op)不过最好还是用父节点的方式保证每次都访问的目标节点的父节点避免混乱如下：op.parentNode.removeChild(op);改var onew = 新的节点 var old = document.body.getElementById("aa")old.parentNode.replaceChild(onew , old)插var onew = 新的节点 var old = document.body.getElementById("aa")old.parentNode.insertBefore(onew , old)
3.文档碎片当需要一次性建立多个内容然后插入到页面中时候由于每一次插入会造成一次页面更新，所以需要创建一个文档碎片将新的文档插入进去然后一次性加入到页面当中var frag = document.createDocumentFragment();for(var i = 0;i < 10;i++) {var op = document.createElement("p")
var otext = document.createTextNode("oh!shit!")op.appendChild(otext);frag.appendChild(op);}document.body.appendChild(frag);

热点排行

JavaScript

javascript学习之DOM模型(1)