首页 > 代码库 > JS操作DOM

JS操作DOM

什么是DOM?
     什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了

    因此,必须要对DOM有一定的认识,才能把Javascript应用于WEB当中。

 

 

接下来我给大家讲一下DOM操作的方法:

  创建节点

    var createNode = document.createElement("div");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    document.body.appendChild(createNode);

    document.documentElement.appendChild(createNode);

 

  插入节点

    var createNode = document.createElement("div");

    var createTextNode = document.createTextNode("hello world");

    createNode.appendChild(createTextNode);

    var div1 = document.getElementById("div1");

    document.body.insertBefore(createNode,div1);

 

  替换元素

    var replaceChild = document.body.replaceChild(createNode,div1);

 

  删除元素

    var removeChild = document.body.removeChild(div1);

 

 

最后呢给大家总结一下:

W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型

  • XML DOM - 针对 XML 文档的标准模型

  • HTML DOM - 针对 HTML 文档的标准模型

 

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点

 

一些常用的 HTML DOM 方法:

  • getElementById(id) - 获取带有指定 id 的节点(元素)

  • appendChild(node) - 插入新的子节点(元素)

  • removeChild(node) - 删除子节点(元素)

 

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值

  • parentNode - 节点(元素)的父节点

  • childNodes - 节点(元素)的子节点

  • attributes - 节点(元素)的属性节点

 

若有不懂请点以下参考:

参考

JS操作DOM