查找节点、操作节点、删除节点

节点查找方法

**

  • document.getElementById()
    获取id名
  • document.getElementsByName()
    获取类名或id名
  • document.getElementsByTagName()
    获取标签名
  • Ele.getElementsByClassName()
    获取类名
  • Ele.querySelector()
    返回文档中匹配制定css选择器的一个元素
  • Ele.querySelectorAll()
    返回文档中匹配制定css选择器的一组元素**

操作节点方法

**

  • appendChild()
    为指定元素节点的最后一个子节点之后添加节点,该方法返回新的子节点。 ul.appendChild(li4);
  • insertBefore()
    在指定的已有子节点之前插入新的子节点 ul.insertBefore(linew, li2);
  • replaceChild()
    该方法用新节点替换某个子节点
    两个参数:
    -replaceChild(要插入的节点, 被替换的节点)
    返回被替换的节点
  • cloneNode()
    1、创建节点的拷贝,并返回该副本。
    2、拷贝的节点要有父节点,如果没有父节点,要通过appendChild()、insertBefore()、replaceChild()等方法对其进行添加
    (参数值有true,false,默认值是false,若为true则可深度复制,即复制子元素)
document.body.appendChild(newNode);
  • normalize()
    合并相邻的Text节点
  • splitText()
    1、按照指定的位置把文本分割成两个节点
    2、返回分割后半部分的的文本节点
    参数值为数字,指明分割点所在
    **

删除节点

**

  • removeChild();
    删除元素中的节点,返回删除的节点,参数值为删除的节点
  • removeNode();
    1、IE的私有实现
    2、将目标节点从文档中删除,返回目标节点
    3、参数是布尔值Boolean,默认值是false,true会删除子元素
  • innerHTML();
var myUl = documnet.getElementById('myUl');
myUl.parentNode.removeChild(myUl);
console.log(myUl.id + ":" + myUl.innerHTML);  //可以显示li的内容(断树枝)
var myUl2 = documnet.getElementById('myUl2');
myUl2.parentNode.innerHTNL = '';
console.log(myUl2.id + ":" + myUl2.innerHTML);  //在IE6-8上无法显示,为空(断树枝,烧掉)
  • deleteContent();
  • textContent();
  • **
    在这里插入图片描述
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值