jquery js 兄弟父元素的获取

Posted 2020-10-04

jQuery提供的方法

　　上来就把jQuery提供的方法摆在这里是不是有点不好呀，不过，我们从jQuery的方法名称上就能知道这些方法是干嘛的了。

parent(selector)	查找父元素，可传入selector进行过滤(下同)
parents(selector)	查找所有的祖先节点
children(selector)	返回所有的子节点，不过该方法只会返回直接的子节点，不会返回所有的子孙节点
prev()	返回该节点的上一个兄弟节点
prevAll()	返回该节点之前所有的节点
next()	返回该节点的下一个兄弟节点
nextAll()	返回该节点之后所有的节点
siblings()	返回该节点所有的兄弟节点，不分前后
find(selector)	返回该节点所有的子孙节点

　　看完所有的方法之后，我们可以发现：children()只能获取直接的子节点；而find能获取所有的子孙节点，当然也包括直接的子节点。

js提供的方法

1 获取元素节点
    // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个)
    document.getElementById(‘div1‘);

    // 通过类名查找元素，多个类名用空格分隔,得到一个htmlCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)
    var cls = document.getElementsByClassName(‘a b‘);
    console.log(cls);

    // 通过标签名查找元素 返回一个HTMLCollection
    document.getElementsByTagName(‘div‘);

    // 通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)
   var nm =  document.getElementsByName(‘c‘);
    console.log(nm);

    // 获取所有form标签(得到一个HTMLCollection集合）
    var form = document.forms;

  // html5新加标签（ie8+）
    // document.querySelector(); //  返回单个node，如果有多个匹配元素就返回第一个
    // document.querySelectorAll(); // 返回一个nodeList集合

// 2 创建节点

    // 创建元素，只是创建出来并未添加到html中，需要与appendChild 配合使用
    var elem = document.createElement(‘p‘);
    elem.id = ‘test‘;
    elem.style = ‘color: red‘;
    elem.innerHTML = ‘我是新创建的节点‘;
    document.body.appendChild(elem);

    // 创建文本节点 createTextNode
    var txt = document.createTextNode(‘我是文本节点‘);
    document.body.appendChild(txt);

    // 克隆节点（需要接受一个参数来表示是否复制元素）
    var form =  document.getElementById(‘test‘);
    var clone = form.cloneNode(true);
    clone.id = ‘test2‘;
    document.body.appendChild(clone);

    //文档碎片的方式（提升性能）
    (function()
    {
        var start = Date.now();
        var str = ‘‘, li;
        var ul = document.getElementById(‘ul‘);
        var fragment = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement(‘li‘);
            li.textContent = ‘第‘+i+‘个子节点‘;
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log(‘耗时：‘+(Date.now()-start)+‘毫秒‘); // 63毫秒
    })();

// 3 节点修改API
    //节点修改APi有两个特点
    // 1 不论新增还是替换节点，如果原本就在页面上，就会被替换
    // 2 修改之后节点本身绑定的事件不会小时

    // 1 appendChild ()
    // 用法是： parent.appendChild(child)
    // 会将child节点添加到parent里的最后面，如果子节点原本就存在，会移除原节点，添加新节点
    // 到最后，但是事件会保留

    // 2 insertBefore()
    // 用法是 parent.insertBefore(newNode,refNode);
    // refNode 是必须传的 不传会报错
    // 如果 refNode 是undefined 和null 就会将新节点传入到parent节点的最后

    // 3 removeChild()
    // 用法是：parent.removeChild(child)
    // 如果删除的不是父元素的子节点会报错
    // var deleted = parent.removeChild(child)
    // deleted 可以继续引用节点 ，被删除节点依然存在与内存中

    // 4 replaceChild()
    // 用法是：parent.replaceChild(newChild, oldChild);

// 4 节点的关系APi
    // 1 父关系API
       //  parentNode 父节点
       //  parentElement父元素

    // 2 子关系API
        // children 子元素
        // childNodes 子节点
        // firstElementChild 第一个子元素
        // firstChild 第一个子节点
        // lastElementChild 最后一个子元素
        // lastChild 最后一个子节点

    // 3 兄弟关系的API
        // previousSibling 节点的上一个兄弟节点
        // previousElementSibling  节点的上一个兄弟元素（ie9以下不支持）
        // nextSibling  节点的下一个兄弟节点
        // nextElementSibling 节点的下一个兄弟元素（ie9以下不支持）


// 5 节点属性API
    // setAttribute(name,value) 给元素设置属性
    // getAttribute(name)   获取元素属性

// 6 直接修改元素的样式
    elem.style.color = ‘red‘;
    elem.style.setProperty(‘font-size‘, ‘16px‘);
    elem.style.removeProperty(‘color‘);

// 7 动态添加样式
    var style = document.createElement(‘style‘);
    style.innerHTML = ‘body{color:red} #top:hover{background-color: red;color: white;}‘;
    document.head.appendChild(style);

// 8 window.getComputedStyle

// 用法是：var style = window.getComputedStyle(element[, pseudoElt]);
// element:目标元素的DOM对象
 // pseudoElt:指明要匹配的伪元素,对于普通元素必须指定为null(或省略)