JS 获取元素对象/添加节点

Posted 2021-02-09 pppoe

一、设置或获取元素对象中（标签中）的属性和自定义属性

    对象.属性

    对象[‘属性‘]

    对象.getAttribute(‘属性名‘)

    对象.setAttribute(‘属性名‘,‘属性值‘);

    对象.removeAttribute(‘属性名‘)

二、outerhtml : 当前节点对象及所有子节点（标签及所有内容）

innerHTML : 当前节点中所有的内容（包含标签，会自动解析标签)

    innerText : 当前节点中所有的纯文本内容（不包含标签，不会自动解析标签）

三、如何获取所有的子节点？

    1. childNodes : 元素节点与文本节点（需要去除空白文本节点）

    function removeSpace(node){

        var childs = node.childNodes;

        for(var i = 0;i < childs.length;i ++){

            if(childs[i].nodeType === 3 && /^s+$/.test(childs[i].nodeValue)){

                node.removeChild(childs[i]);

            }

        }

        return node;

    }

    2. children : 元素子节点

四、高级选取

    parentNode

    firstChild

    firstElementChild

    lastChild

    lastElementChild

    previousSibling

    previousElementSibling

    nextSibling

    nextElementSibling

五、offsetWidth = width + border + padding

    offsetHeight = height + border + padding

六、获取非行内样式

    function getStyle(obj,attr){

        return window.getComputedStyle ? getComputedStyle(obj,1)[attr] : obj.currentStyle[attr];

    }

七、父节点.insertBefore(newNode,oldNode)

八、offsetLeft : 指定对象相对于父对象的left值

    offsetTop : 指定对象相对于父对象的top值