• 转:DOM操作


    转载来自:https://www.jianshu.com/p/632c7dcc67a3

    javascript 原生方法对dom节点的操作包括:访问(查找)、创建、添加、删除、替换、插入、复制、移动等。

    //查找节点
    document.getElementById("id");// 通过id查找,返回唯一的节点
    document.getElementsByClassName("class");// 通过class查找,返回值为nodeList类型
    document.getElementsByTagName("div");// 通过标签名查找,返回值为nodeList类型
    
    //创建节点
    document.createDocumentFragment();//创建内存文档碎片
    document.createElement();//创建元素
    document.createTextNode();//创建文本节点
     
    //添加节点
    var ele = document.getElementById("my_div");
    var oldEle = document.createElement("p");
    var newEle=document.createElement("div");
    ele.appendChild(oldEle);
    
    //删除节点
    ele.removeChild(oldEle);
    
    //替换节点
    ele.replaceChild(newEle,oldEle);
    
    //插入节点
    ele.insertBefore(oldEle,newEle);//在newEle之前插入 oldEle节点
    
    //复制节点
    var cEle = oldEle.cloneNode(true);//深度复制,复制节点下面所有的子节点
    cEle = oldEle.cloneNode(false);//只复制当前节点,不复制子节点
    
    //移动节点
    var cloneEle = oldEle.cloneNode(true);//被移动的节点
    document.removeChild(oldEle);//删除原节点
    document.insertBefore(cloneEle,newEle);//插入到目标节点之前
    

    createElemet:创建文档碎片~

    var node = document.createElement("nodeName");
    

    createTextNode: 创建文本节点

    var txt = document.createTextNode("这是一段文本");
    

    appendChild: 添加子节点(属性节点,文本节点,元素节点)

    var parent = document.getElementById("parent");
    parent.appendChild(node) ;
    

    insertBefore: 把一个新元素插入到现有元素之前

    parentEment.insertBefore(newElement,targetElement);
    

    元素节点的父元素必须死元素节点,属性节点和文本节点的自元素不允许是元素节点

    自己实现一个insertAfter:把一个元素插到现有元素之后

    function insertAfter(newElement,targetElement){
      var parent = targetElement.parentNode;
      if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
      }else{
        parent.insertBefore(newElement,targetElement.nextSibling)
      }
    }
    

    自己实现一个 lastChildrenElement: 获取最后一个元素节点

    // * 通配符
    function lastChildElement(element) {
        var elementArray = element.getElementsByTagName('*');
        if (elementArray.length<1) return;
        return elementArray.pop();
    }
    

    js 设置和更新 css

    var para = document.getElementById("element");
    para.style.color = "black";
    para.style.font = "2em 'times',serif";
  • 相关阅读:
    BZOJ2512 : Groc
    BZOJ3644 : 陶陶的旅行计划
    BZOJ1439 : YY的问题
    BZOJ2872 : 优莱卡
    BZOJ3273 : liars
    BZOJ4133 : Answer的排队
    URAL Palindromic Contest
    ZOJ Monthly, January 2018
    BZOJ2689 : 堡垒
    2017-2018 ACM-ICPC, Central Europe Regional Contest (CERC 17)
  • 原文地址:https://www.cnblogs.com/Galesaur-wcy/p/13684339.html
Copyright © 2020-2023  润新知