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

节点查找方法

**

  • 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();
  • **
    查找节点、操作节点、删除节点_第1张图片
    查找节点、操作节点、删除节点_第2张图片

你可能感兴趣的:(节点)