JavaScript基础（十一）：DOM的增删改和操作样式

DOM的增删改

常见方法：

• createElement()
  • 新建一个元素节点，参数是元素节点的标签名
  • 语法： document.createElement("标签名");
• createTextNode()
  • 新建一个文本节点，参数是文本节点的内容
  • 语法： document.createTextNode("文本内容");
• appendChild()
  • 向一个父节点中添加一个子节点
  • 语法： 父节点.appendChild(子节点);
• insertBefore()
  • 向一个子节点前添加一个新的节点
  • 语法： 父节点.insertBefore(新节点, 原节点);
• removeChild()
  • 移除一个子节点
  • 语法： 父节点.removeChild(子节点);
• replaceChild()
  • 将原节点替换成新节点
  • 语法： 父节点.replaceChild(新节点, 原节点);
• 由于许多方法都要通过父节点调用对应的方法来操作节点，因此可使用：
  • 子节点.parentNode.removeChild(子节点);

对DOM的增删改操作可以用父节点的innerHTML的字符串操作来代替，由于是整体修改所以这个父节点包括它的子节点绑定的函数都会失效

操作样式

在css的属性中如果有用-来间接的情况，在JavaScript需要使用驼峰命名法来修改属性名从而设置或者读取对应的样式

• style
  • 语法： 节点对象.style.属性值
  • 通过这个属性能够修改和读取到节点的内联样式，当节点没有内联样式时获取到的是空字符串
• currentStyle
  • 语法： 节点对象.currentStyle.属性值
  • 此属性只能在IE浏览器中使用并且是只读的，当未给某个节点设置属性时会返回默认值
• getComputedStyle()
  • 语法： getComputedStyle(节点对象, 伪元素（常设置为null）)[样式名]
  • 此方法是window的方法，可以直接使用，而且也是只读的
  • 此方法支持IE8以上以及其他浏览器
• 常用属性：
  • clientHeight
    获取元素的视图高度，包括元素的内容高度与内边距高度，返回值是一个数字，只读，在根标签的此属性就是指代视口大小，与此规则无关
  • clientwidth
    获取元素的视图宽度，包括元素的内容宽度与内边距宽度，返回值是一个数字，只读，在根标签的此属性就是指代视口大小，与此规则无关
  • offsetHeight
    获取元素的真实高度，包括元素的内容高度，内边距高度与边框高度，当被父元素隐藏或者滚动时不会影响这个值，返回值是一个数字，只读，在IE11以下浏览器中的根标签的此属性就是指代视口大小，与此规则无关
  • offsetWidth
    获取元素的真实宽度，包括元素的内容宽度，内边距宽度与边框宽度，当被父元素隐藏或者滚动时不会影响这个值，返回值是一个数字，只读，在IE11以下浏览器中的根标签的此属性就是指代视口大小，与此规则无关
  • offsetParent
    获取当前元素的定位父元素，即设置了position的最近父元素，当所有父元素都没有设置时，返回body元素
  • offsetTop
    获取当前元素相对于定位父元素的上侧偏移量(相对于offsetParent的内边距)，即使父元素自身有偏移量也不改变这个值的大小，返回值是一个数字，只读
  • offsetLeft
    获取当前元素相对于定位父元素的左侧偏移量(相对于offsetParent的内边距)，即使父元素自身有偏移量也不改变这个值的大小，返回值是一个数字，只读
  • scrollHeight
    获取当前元素的真实高度,包括元素的内容高度与内边距高度，当被父元素隐藏或者滚动时不会影响这个值，返回值是一个数字，只读
  • scrollWidth
    获取当前元素的真实宽度,包括元素的内容宽度与内边距宽度，当被父元素隐藏或者滚动时不会影响这个值，返回值是一个数字，只读
  • scrollTop
    获取当前元素的右侧滚动条滚动的像素，返回值是一个数字，只读
  • scrollLeft
    获取当前元素的下侧滚动条滚动的像素，返回值是一个数字，只读
    公式：scrollHeight - scrollTop = clientHeight 可以证明滚动条滚动到最底端