码迷,mamicode.com
首页 > Web开发 > 详细

JS-DOM节点操作

时间:2020-02-25 20:10:30      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:bsp   dom节点   ext   返回   one   false   文本   clone   color   

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

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=()=>{ 函数体 }
//为对象添加点击事件

 

JS-DOM节点操作

标签:bsp   dom节点   ext   返回   one   false   文本   clone   color   

原文地址:https://www.cnblogs.com/-Archenemy-/p/12363040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!