DOM 操作

获取元素尺寸

offsetWidth / offsetHeight

1. 节点对象.offsetWidth : 获取当前节点对象的相对宽度（width + border + padding)
   
2. 节点对象.offsetHeight : 获取当前节点对象的相对对高度（height + border + padding)
   

clientWidth / clientHeight

1. 节点对象.clientWidth : 获取当前节点对象的可视区宽度（width + padding)
   

1. 节点对象.clientHeight : 获取当前节点对象的可视区高度（height + padding)
   

获取元素偏移量

offsetLeft / offsetTop

1. offsetLeft : 相对左边的距离
   

• 如果父元素没有定位，则当前元素相对于页面左边（body）的left值
  

• 如果父元素有定位，则当前元素相对于父元素左边的left值。
  

1. offsetTop : 相对上边的距离
   

• 如果父元素没有定位，则当前元素相对于页面上边（body）的top值
  

• 如果父元素有定位，则当前元素相对于父元素上边的top值。
  

clientLeft / clientTop

1. clientLeft : 表示一个元素的左边框的宽度，以像素表示。
   

1. clientTop : 表示一个元素的上边框的宽度，以像素表示。
   

DOM节点及以节点操作

DOM节点

• DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
  
• 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
  
• 比如我们标签里面写的文字，那么就是文本节点
  
• 写在每一个标签上的属性，就是属性节点
  

获取节点

1. firstChild : 第一个子节点
   
2. firstElementChild : 第一个元素子节点
   
3. lastChild : 最后一个子节点
   
4. lastElementChild : 最后一个元素子节点
   
5. previousSibling : 前一个兄弟节点
   
6. previousElementSibling : 前一个元素兄弟节点
   
7. nextSibling : 下一个兄弟节点
   
8. nextElementSibling : 下一个元素兄弟节点
   
9. parentNode : 父节点
   
10. childNodes : 获取到所有的元素子节点 与 文本子节点

//删除空白文本子节点
function noSpaceNode(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;
}

1. children ： 获取所有的元素子节点
   

节点属性

nodeType

• nodeType：获取节点的节点类型，用数字表示
  

nodeName

• nodeName：获取节点的节点名称
  

nodeValue

• nodeValue： 获取节点的值
  

汇总

创建节点

1. document.createElement('标签名') : 创建元素节点
   
2. document.createTextNode('文本') : 创建文本节点
   

1. document.createDocumentFragment() : 创建文档碎片 (为了减少与页面的交互，提高性能)
   

插入节点

1. 父节点.appendChild(子节点) : 将这个子节点追加到父节点中子节点列表的末尾。
   

1. 父节点.insertBefore(新节点,指定的旧的节点) ： 在指定的旧节点前面插入新节点
   

修改节点

1. 父节点.replaceChild(新节点，旧节点) : 替换节点
   

删除节点

1. 父节点.removeChild(子节点) : 删除子节点
   

1. 当前节点.remove() : 删除当前节点
   

克隆节点

1. 当前节点.cloneNode([true]) : 复制节点
   

false(默认) : 只克隆当前节点，不包含内容。 true : 克隆当前节点，包含内容