动态操作DOM节点

动态操作DOM节点

1. 节点属性
   

2. 动态操作DOM节点
   （1） 创建节点
   创建元素节点 document.createElement(‘标签名’)，返回元素节点对象
   创建文本节点 document.createTextNode(‘文本内容’) 返回文本元素节点对象
   （2） 加入节点
   追加子节点 父节点.appendChild(子节点)
   向某个节点前插入节点 父节点.insertBefore(要插入的子节点，插入到哪个节点之前)
   （3） 删除节点
   父节点.removeChild(要移除的节点)
   也可以获取到你要移除的节点，该节点.remove()
   （4） 替换节点
   父节点.replaceChild(新节点，旧节点)
   （5）复制（克隆）节点
   dom.cloneNode(true) 参数true表示复制包含子节点，false表示不包含子节点，默认为false

3. 获取元素的非行内样式
   非IE浏览器：window.getComputedStyle(dom).样式名
   IE浏览器7、8版本： dom.currentStyle.样式名

4. 元素偏移量
   （1）没有定位的情况下，获取到的是元素边框外侧到页面内测的距离，向上的偏移量：dom.offsetTop,向左的偏移量：dom.offsetLeft.
   （2）有定位的情况下，获得的是离父元素的距离。

5. 获取元素宽高
   元素宽高 = 内容宽高 + padding + border
   dom.offsetWidth
   dom.offsetHeight
   三种方式：
   offsetWidth = 内容width + padding + border
   clientWidth = 内容width + padding
   window.getComputedStyle(divEle).width = 内容width