JavaScript（5）节点操作和位置操作

1，节点操作

1.1节点概述

网页中所有内容都是节点(如：标签，属性，文本，注释等)，在DOM中，节点使用node来表示。HTML DOM树中所有节点均可通过JavaScript进行访问，所有HTML元素均可被修改，创建或删除。

1.2节点属性

一般来说，至少有nodeType(节点类型)，nodeName(节点名称)，nodeValue(节点值)这三个基本属性。

节点分类	nodeName	nodeType	nodeValue
文档节点	#document	9	null
属性节点	标签名	1	null
文本节点	#text	3	文本内容
注释节点	#comment	8	注释内容

1.3父级节点

在DOM中，父级节点使用parentNode属性来获取

node.parentNode  //返回指定节点的上一个父节点，如果指定节点没有父节点，则返回null

1.4子级节点

通过childNodes属性来获取指定节点的子节点集合，在这些子节点中包括元素节点和文本节点。

	<script>
        var ul =document.querySelector('ul');
        console.log(ul.childNodes);
    </script>
    //换行也会被当成一个字节点 

1.5兄弟节点

使用nextElementSibling(下一个)和previousElementSibling（上一个）属性获取兄弟节点。

1.6节点创建

创建节点通过document.createElemrnt(‘tagName’)语法来创建。tagName指的是要创建的HTML元素。

 var li = document.createElement('li');
 //创建了一个li节点，在内存中创建出来。

1.7添加节点

方法	说明
appendChild(child)	将指定节点添加到父节点的子节点的末尾
insertBefore(chile,element)	将指定节点添加到父节点的子字节的前面

1.8克隆节点

	

<script>
        //克隆ul
        //1，获取被克隆元素
        var ul =document.querySelector('ul');
        //2，调用cloneNode方法进行克隆
        var newNode = ul.cloneNode(false);
        //把新结点添加到body中
        document.body.prepend(newNode);
        //3,深拷贝
        newNode = ul.cloneNode(true);
        document.body.prepend(newNode);

    </script>

1.9删除节点

通过使用removeChild(child) 方法来实现，该方法是从指定节点中删除一个子节点，并返回被删除的节点。

1.10修改节点

使用replaceChild()方法，该方法有两个参数，第一个参数是新节点，第二个参数是被替换的子节点。

父级节点.repalceChild(新节点，被替换的字节点)

2,位置操作

2.1偏移量

①offset
offset 几个参数可以获取盒子在页面的偏移量
其中 offsetTop 是从盒子边框到页面顶部的距离
offsetLeft是从盒子边框到页面左边的距离
offsetHeight是包括边框、内边距、内容的高度
offsetWidth是包括边框、内边距、内容的宽度。
②计算当前元素在页面中的偏移量

• 获取相对document的偏移量

//通过向上迭代offsetParent，可以计算出相对于document的偏移量，也就是相对页面偏移量
//但每次都需要一级一级向上查找offsetparent，效率太低
        function getOffsetSum(ele) {
            var top = 0, left = 0;
            while(ele) {
                top += ele.offsetTop;
                left += ele.offsetLeft;
                ele = ele.offsetParent;
            }
            return {
                top : top,
                left : left
            }
        }

• 获取相对与视口的偏移量加上页面的滚动量

	<script>
        function getOffsetRect(ele) {
            var box = ele.getBoundingClientRect();
            var body = document.body, docElem = document.documentElement;
            //获取页面的scrollTop,scrollLedt
            var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
                scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
            var clientTop = docElem.clientTop || body.clientTop,
                clientLeft = docElem.clientLeft || body.clientLeft;
            var top = box.top + scrollTop - clientTop,
                left = box.left + scrollLeft - clientLeft;
            return {
                top : Math.round(top),
                left : Math.round(left)
            }
        }
    </script>

③offset和style的区别

2.2偏移量

①client
指当前元素内容到内边距占据的空间的大小

2.3滚动区

①滚动高度

②滚动长度和宽度