day01

作者: 撕心裂肺1232 | 来源:发表于2019-04-12 00:37 被阅读0次

    1.写一下节点增删改

    (1) document.createElement()
    (2).appendChild()
    (3).insertBefore()
    (4).cloneNode(true) / .cloneNode(false)
    (5).removeChild()
    (6).replaceChild()

    var parent = document.getElementById('.parent');
    var d = document.createElement('div');     //动态创建元素div,不会在页面显示
    var s = document.createElement('span');
    parent.appendChild('d')     //在parent的最后一个子节点后面添加 d
    parent.insertBefore(s,d)  //(新元素,已有元素) 要判断第二个参数是否存在
    s.cloneNode(true)   //克隆
    parent.removeChild('d');  //移除
    var a = document.createElement('a'); 
    parent.replaceChild(a,s);   //(新元素节点,原有元素节点)
    

    2.如何获取元素的父节点和兄弟节点

    父节点:
    .parentNode
    .parentElement
    .offsetParent
    子节点:
    .parentNode.children[n];
    .previousElementSibling;
    .previousSibling (previousSibling会匹配字符, 包括换行和空格,而不是节点。)
    .nextElementSibling
    .nextSibling (nextSibling会匹配字符, 包括换行和空格,而不是节点。)

    // 获取父节点:
    
    // 1. parentNode获取父节点
    // 获取的是当前元素的直接父元素。
    var p = document.getElementById("test").parentNode;
    
    // 2. parentElement获取父节点
    // parentElement和parentNode一样,只是parentElement是ie的标准。
    var p1 = document.getElementById("test").parentElement;
    
    // 3. offsetParent获取所有父节点
    var p2 = document.getElementById("test").offsetParent;
    
    获取兄弟节点:
    
    // 1. 通过获取父亲节点再获取子节点来获取兄弟节点
    var brother1 = document.getElementById("test").parentNode.children[1];
    
    // 2. 获取上一个兄弟节点
    // 在获取前一个兄弟节点的时候可以使用previousSibling
    // 和previousElementSibling。
    // 他们的区别是previousSibling会匹配字符,
    // 包括换行和空格,而不是节点。
    // previousElementSibling则直接匹配节点。
    var brother2 = document.getElementById("test").previousElementSibling;
    var brother3 = document.getElementById("test").previousSibling;
    
    // 3. 获取下一个兄弟节点
    var brother4 = document.getElementById("test").nextElementSibling;
    var brother5 = document.getElementById("test").nextSibling;
    

    相关文章

      网友评论

          本文标题:day01

          本文链接:https://www.haomeiwen.com/subject/kbmibqtx.html