`
neil-jh
  • 浏览: 145521 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

DOM操作以前的学习笔记

阅读更多
这两天整理一下以前的学习笔记,上一篇简单整理了一点javascript的,这次简单整理下DOM操作的。
一、DOM模型分三种节点 元素节点(html) 文本节点 属性节点
二、访问节点的两种方式
  a: getElementsByTagName()  例如:var a = document.getElementsByTagName("img"); 得到a 是所有页面中img的数组   a.length 有多少个img  a[0].tagName a第一个原色的tagname,a[0].childNodes[0].nodeValue;
  b: getElementById("id"); var a = document.getElementById("id")  a.tagName  a.childNodes[0].nodeValue
三、设置节点属性 getAttribute() setAttribute();
    该方法不能通过document对象调用,只能通过一个元素节点对象来调用
     <img src="01.jpg" title="abc"/>
     var a = document.getElementsByTagName("img")[0];
    alert(a.getAttribute("title"));
    a.setAttribute("src","02.jpg");
四、创建节点 创建元素节点用 createElement()  创建文本节点 createTextNode()
    三步
     1、var op = document.createElement("p");
    2、var oText = document.createTextNode("create text");
    3、op.appendChild(oText);
    document.body.appendChild(op);
五、删除节点 删除节点是通过父节点的removeChild()方法完成的。
    var op = document.getElementsByTagName("p")[0];
    op.parentNode.removeChild(op);
六、替换节点 替换节点通过replaceChild()完成也是需要针对节点的父节点来操作
     var oldOp= document.getElementsByTagName("p")[0];
    var newOp = document.createElement("p"); 
    var newText = document.createTextNode("create Text");
    newOp.appendChild(newText);
   oldOp.parentNode.replaceChild(newOp,oldOp); 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics