JS DOM ( 7.21)

DOM:DOM定义了 JavaScript 操作HTML文档的接口，提供了访问HTML文档（如body、form、div、textarea等）的途径以及操作方法。

• •  获取子节点：var childArr=ele.children||ele.childNodes,
  • 获取第一个子节点： nodeObject.firstChild
  • 获取最后一个子节点： nodeObjectlastChild
  • 获取兄弟节点 上一个节点   nodeObject.previousSibling
  • 获取兄弟节点 下一个节点   nodeObject.nextSibling
  • 获取父节点: nodeObject.parentNode
  • 获取节点类型：nodeObject.nodeType
  • 获取节点名称：nodeObject.nodeName
  • 获取节点值：nodeObject.nodeValue

获取DOM节点：

• document.getElementById("")
• document.getElementsByTagname("")

1.JS通过DOM修改css样式：nodeObject.style.cssProperty=newStyle

      获取css样式：nodeObject.style.cssProperty

eg:document.getElementById("sore").color="#000";

注意：对于由 “ - ” 分隔的CSS属性，要去掉 “ - ” ，并将 “ - ” 后的第一个字母大写。

document.getElementById("sore").textAlign="center";

2.删除节点： parent.removeChild(thisNode)

eg：

<div id="demo">
    <div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    this.parentNode.removeChild(this);
}
</script>

3.克隆节点： nodeObject.cloneNode(boolean)

true表示完全克隆，false表示只克隆当前节点，不克隆子节点和子节点包含的文本等信息

4.innerHEML

( 1 ) innerHTML可以向指定的节点直接插入HTML代码

( 2 )也可以通过 innerHTML 来获取指定节点内部的HTML代码。

添加节点

方法1：insertBefore()在指定节点前插入  parentNode.insertBefore(newNode , thisNode)

方法2：appendChild()在指定节点后插入     parentNode.appendChild(newNode)