在某网课学习前端笔记整理js篇26-dom元素节点的属性、创建节点和添加、删除节点、元素位置大小的一些属性

###dom元素节点的属性、创建节点和添加、删除节点、元素位置大小的一些属性

一、dom元素节点的属性

dom元素是对象，所以可以直接给其添加属性，但这种对象的属性是不能添加到标签上的，如果要设置和获取标签上的属性可以通过`setAtrribute(attr, value)`，`getAttribute(attr)`, `removeAttribute(attr)`。

example1

<div id="div" a='abc'>div</div>
<script>
    console.log(div.a);//undefiend
    console.log(div.getAttribute('a'));//abc
    div.setAttribute('a', 'aa');
    console.log(div.getAttribute('a'));//aa
    div.removeAttribute('a');
    console.log(div.getAttribute('a'));//null
    div.setAttribute('b', 'bb');
    console.log(div.getAttribute('b'));//bb
</script>

​ dataset是dom元素的一个属性，可以用来存放数据。不过有兼容问题（ie11以下g了）。可以delete用来删除该属性。

example2

<div id="div" a='abc' data-y='2'>div</div>
<script>
    div.dataset.x = 1;
    console.log(div.getAttribute('data-x'));//1
    console.log(div.dataset.x);//1
    console.log(div.dataset.y);//2
    delete div.dataset.x;
    console.log(div.dataset.x);//undefined
</script>

二、创建节点和添加、删除节点

document.createElement()： 创建元素节点。

document.createTextNode()： 创建文本节点。

parentnode.appendchild()： 添加子节点。注意这里的添加子节点不是动态的会把原来位置的元素插到最后面（因为你获取了原来位置的节点对象插入的，那么原来的节点当然会没了）。

parendnode.insertBefore(node1, node2)： node1插到parentnode的子节点node2的前面。

parentnode.replaceChild(node1, node2)： 替换parentnode下的node2节点为node1.

parentnode.removeChild(child)： js中删除自己，是通过其父节点删除自己。

domobj.cloneNode(boolean)： 参数是true，克隆子节点，false不克隆子节点。属性样式也会克隆。

example3

<div id='box'>
    <p class="p">p1</p>
    <p class="p">p2</p>
    <p class="p">p3</p>
</div>
<script>
    var element = document.createElement('p');
    var textNode = document.createTextNode('new node');
    box.appendChild(element);
    box.appendChild(textNode);
    element.appendChild(textNode);
    var p1 = box.querySelector('.p');
    box.appendChild(p1);
    box.insertBefore(p1,element);
    box.replaceChild(p1,element);
    box.removeChild(p1);
    var clone = p1.cloneNode(false);
    console.log(clone);
    box.appendChild(clone);
    var clone2 = p1.cloneNode(true);
    console.log(clone2);
    box.appendChild(clone2);
</script>

三、元素位置大小的一些属性

clientWidth: padding+可视宽度。

clientHeight: padding+可视高度.

offsetWidth: padding+width+boder.

offsetHeight: pading+height+border.

scrollWidth: padding+width.

scrollHeight: padding+height.

<style>

    #wrap{width:150px;height:150px;overflow:scroll;}
    #box{width:200px;height:200px;background-color:red;margin:10px 10px;border:10px solid blue;padding:10px;}
</style>
<div id='wrap'>
    <div id='box'></div>
</div>

<script>
    console.log(getStyle(wrap).width);//133.2px
    console.log(wrap.clientWidth);	//134
    console.log(wrap.offsetWidth);//150
    console.log(wrap.scrollWidth);//250
    function getStyle(el){
        return el.currentStyle||getComputedStyle(el);
    }
</script>

offsetParent: 具有定位属性的父元素。

offsetLeft: 距有定位属性父元素的左边距。

offsetTop: 距有定位属性父元素的上边距。

<style>
    #outer{position:relative;top:100px;left:100px;width:100px;height:100px;background-color:blue;}
    #inner{position:relative;left:50px;top:50px;width:30px;height:30px;background-color:red;}
</style>
<div id="outer">
    <div id="inner"></div>
</div>
<script>
    console.log(offset(inner));
    //获取元素左上角在文档的位置
    function offset(el, position){
        var pos = position||{left:0,top:0};
        pos.top += el.offsetTop;
        pos.left += el.offsetLeft;
        if(el.offsetParent)
            pos = offset(el.offsetParent,pos);
        return pos;
    }
</script>