前端之dom操作

1.HTML DOM(文档对象类型)
Document Object Mode
2.HTML DOM 树

3.取dom节点

• document.getElementById(“id名”);
  根据Id选择dom，唯一

• document.getElementsByClass(“class名”);
  根据class选择dom，不唯一

• document.getElementsByTagName(“标签名”);
  根据tag选择dom，不唯一

• document.getElementsByName(“name 属性名")
  根据name属性选择dom，不唯一
  注意：页面的body节点可以直接用document.body来取
  4.如何取

• 父节点.childNodes;
  即取出所有子节点

• 父节点.children[0];
  即取出第一个子节点

• 子节点.parentNode;
  即取出父节点

• 子节点.parentNode.children[1];
  即取出兄弟节点，先取父节点再取子节点
  补充：通过父节点来创建子节点

• 父节点.insertBefore(子节点1,子节点2);
  子节点1：需要创建的新子节点
  子节点2：选择一个子节点，新创建的子节点1将会放到该节点之前,如果没有就用null

• 父节点.appendChild(子节点);
  在父节点末尾追加一个新的子节点
  var divEle = document.createElement(“div”);
  /先创建一个元素赋给divEle/
  document.body.insertBefore(divEle,container);
  /然后在body里面插入，并且插入的元素放在container节点之前,并且选择的元素具有唯一性，不能有多个/
  5.删除dom节点
  通过父节点来删除子节点
  父节点.removeChild(子节点);
  6.修改dom节点
  container.innerText = “这是被插入的文本内容，这是一个链接”;
  testDiv[0].innerHTML = “这是被插入的html内容，这是一个链接”;
  运行结果：
  
  注意：不要使用在文档加载之后使用 document.write()
  innerText和innerHTML重复插入原来内容均会被覆盖