JavaScritpt的DOM初探之Node(一) · JS重塑学习

DOM(文档对象模型）是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加，移除和修改页面的某一部分。DOM脱胎于微软公司的DHTLM（动态HTML），但是现在它已经成为表现和操作页面标记的真正跨平台，语言中立的方式。 [JavaScript](http://lib.csdn.net/base/18 "JavaScript知识库")和DOM通常被视为一个单一的实体,因为JavaScript是最常见的用于此目的(与web上的内容交互)。使用DOM API访问、遍历和操作HTML和XML文档。 ![](https://box.kancloud.cn/2016-05-06_572c45a8071d9.jpg) 典型的DOM的基本轮廓层次结构(简化) 这里有一个关于DOM的一些值得注意的事情: * 窗口对象作为全局对象,您只需键入“窗口”访问它。在这个对象的所有执行JavaScript代码。像所有对象的属性和方法。 * 属性是一个变量存储在一个对象。网页上创建的所有变量authomatically成为窗口对象的属性。 * 一个方法是存储在一个对象的函数。以来所有的功能都存储在窗口对象(至少)下他们都可以称为“方法”。 * DOM创建一个hierarcy对应于每个web文档的结构。这种层次结构是由节点。有几种不同类型的DOM节点,最重要的是“元素”,“文本”和“文档”。 * 一个“元素”节点表示一个元素在一个页面。如果你有一个段落元素(“”),那么它可以通过访问DOM节点。 * “文本”节点表示一个页面内所有文本(元素)。所以如果你的段落的文本可以直接通过DOM访问。 * 文档的节点代表整个文档。 (这是DOM层次/树的根节点)。 * 还要注意,元素属性是DOM节点本身。 * 每个布局引擎实现DOM标准略有不同。例如,[火狐](http://www.mozilla.com/en-US/firefox/)使用web浏览器[壁虎](http://en.wikipedia.org/wiki/Gecko_(layout_engine))布局引擎,有一个很好的实现(虽然不是完全内联与W3C规范)[Internet Explorer](http://www.microsoft.com/windows/products/winfamily/ie/default.mspx),它使用[三叉戟](http://en.wikipedia.org/wiki/Trident_(layout_engine))布局引擎闻名车和不完整的实现,导致web开发社区内的多痛苦! Node类型: dom1级定义了一个NODE接口，该接口将由DOM中的所有节点类型实现。这个Node接口在javaScript中是作为node类型实现的，除了IE之外，在其他所有浏览器中都可以访问到这个类型。javaScript中的所有节点都继承自NODE类型，因此所有节点类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在node类型中定义的下列12个数值常量来表示，任何节点类型必居其一： ~~~ Node.ELEMENT_NODE(1); Node.ATTRIBUTE_NODE(2); Node.TEXT_NODE(3); Node.CDATA_SECTION_NODE(4); Node.CDATA_REFERENCE_NODE(5); Node.ENTITY_NODE(6); Node.PROCESSING_INSTRUCTION_NODE(7); Node.COMMENT_NODE(8); Node.DOCUMENT_NODE(9); NODE.DOCUMENT_TYPE_NODE(10); Node.DOCUMENT_FRAGMENT_NODE(11); Node.NOTATION_NODE(12) ~~~ 通过比较上面这些常量，可以很容易地确定节点的类型，例如： ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk"> <title>test for javascript</title> </head> <body> <p id="a">漫步人生路！</p> <p> <script type="text/javascript"> var someNode=document.getElementById('a'); alert(someNode.nodeType); </script> </body> </html> ~~~ 要了解Node节点的信息可以使用nodeName和nodeValue这两个属性: ~~~ <script type="text/javascript"> var someNode=document.getElementById('a'); alert(someNode.nodeType); alert(someNode.nodeName); //是元素的标签名 <p> alert(someNode.nodeValue); //要坚持node是不是一个元素只要看nodeValue的值为null就可以了 </script> ~~~