DOM中常见的节点操作方法

1.创建节点

    a.创建元素节点:document.createElement("div");

    b.创建文本节点:document.createNode("Hello world");

2.插入节点

    a.在父元素中插入节点:parentNode.appendChild(newNode); 

    b.将节点插入到父元素之前:parentNode.insertBefore(newNode,positionNode);

3.获取节点

    a.获取单个节点

        1) document.getElementById();

        2) document.querySelector();匹配指定css选择器元素的第一个子元素 

    b.获取多个元素

        1) document.getElementsByTagName(); //返回一个对象数组(准确的说是HTMLCollection集合
        2) document.getElementsByName(); //返回一个有相同name的数组
        3) document.getElementsByClassName(); 返回文档中所有指定类名的元素集合,作为 NodeList 对象

        4) document.querySelectorAll();//匹配指定css选择器元素的所有子元素 

    c.获取父元素  ele.parentNode;

    d.获取子元素 ele.children;

    e.获取兄弟节点

        1) ele.previousElementSibling;//上一个兄弟元素 

        2)ele.nextElementSibling//下一个兄弟元素

     e.节点移除   parentNode.removeChild(childNode)

     f.替换子元素  parentNode.replaceChild(newNode,oldNode)

    g.复制元素  ele.cloneNode(boolean);      boolean为true,同时复制子节点。

4.属性操作 

    ele.setAttribute(name,value)//设置属性 
    ele.getAttribute(name)//获取元素的属性 
    ele.removeAttribute(name)//移除属性




猜你喜欢

转载自blog.csdn.net/mayue24/article/details/80834477