zoukankan      html  css  js  c++  java
  • 转: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";
  • 相关阅读:
    C#通过正则表达式统计词频的一个方法
    本地服务器远程连接其它数据库
    拼字符串成为时间,和两个计算时间点的中间值
    删除文件夹里的图片,打印删除日志
    行转列SQL语句
    加载出一个有层次的下拉框
    查询结果列传行
    【Java&Python双管齐下复健002】回文数和反转数
    【Java&Python双管齐下复健001】冒泡排序和质数判断
    【LeetCode记录】初级算法:数组之删除排序数组中的重复项
  • 原文地址:https://www.cnblogs.com/Galesaur-wcy/p/13684339.html
Copyright © 2011-2022 走看看