JS-DOM节点操作

Posted 2021-03-07 是非_大道克己

元素节点的增、删、改、查

Element/对象

增加元素节点

//1.创建一个新的元素
    let Obj = document.createElement("元素标签名称");
    //创建了<标签名></标签名>，未加载到内存中、空标签

    let textNode = document.createTextNode("文本节点");
    //创建一个文本节点，未加载到内存中

//2.添加元素节点

    Obj.appendChild(textNode);
    //为元素添加一个子节点.appendChild();
    //把文本添加到元素节点中
    //appendChild()返回不是一个对象
    //添加位置在最后
    //一个子节点只有一个父节点！！！！！！

    let divObj = document.querySelector("css选择器");
    //获得要添加的位子的元素节点 6种方法都可以

    divObj.appendChild(Obj);
    //将创建的元素作为子节点添加到找到的节点中，

删除元素节点

//删除元素子节点
    父节点对象.removeChild(子节点对象);
    //如果子节点不存，在会报错

查询是否拥有子节点

//查询是否拥有子节点
    hasChildNodes();
    //有子节点返回 true ， 没有子节点返回 false

替换子节点

//替换子节点
    父节点对象.replaceChild(新节点,被替节点);
    //替换节点两个值必须都要书写
    //第一个值表示你要替换上的新节点
    //第二个值表示被替换的节点

插入子节点

//插入子节点
    父节点对象.insertBefore(新节点,插入节点)
    //在插入节点之前添加新节点

复制节点

//克隆节点
    let Obj = 节点对象.cloneNode(布尔值);
    //如果布尔值为true 则克隆对象本身以及其子对象
    //如果布尔值为false(默认) 则只克隆对象本身，子节点不克隆 
    //!!!!元素中的文本类容属于文本节点

其他

元素对象.onclick=()=>{ 函数体 }
//为对象添加点击事件