① 获取所有子节点对象

  • childeNodes 

② 获取第一个子节点

  • firstChild   

③ 获取最后一个子节点

  • lastChild    

④ 获取父节点

  • parentNode  

⑤ 获取下一个兄弟节点

  • nextSibling

⑥ 获取前一个兄弟节点

  • previousSibling

⑦ 获取节点的HTML标记名称(大写字母)

  • nodeName 

⑧ 获取DOM元素:

  • document.getElementById("***");
  • document.getElementsByClassName("***")[0];
  • document.getElementsByTagName("***")[0];
  • document.getElementsByName("***")[0];

⑨ 修改CSS样式

  • document.getElementById("***").style.***= "***";

⑩ 修改CLASS属性

  • document.getElementById("***").className = "***";
  • document.getElementById("***").className = "";

⑪ 修改文本

  • document.getElementById("***").innerHTML = "***";

⑫ 创建、插入、删除、复制节点

  • document.createElement('div');
  • document.createTextNode('123');
  • ***.appendChild(***);
  • ***.parentNode.removeChild(***)
  • ***.cloneNode(true)或***.cloneNode()
  • ***父节点.insertBefore(***待插入节点, ***参考节点)

注意:原生JS没有insertAfter()方法。

原生JSjQuery操作DOM的对比请见:http://blog.csdn.net/zhouziyu2011/article/details/60961444


本文转载:CSDN博客