从原型链看DOM－－Node类型

前言：

本系列从原型，原型链，属性类型等方面下手学习了DOM文档对象模型，旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事，这样对于理解代码有一定启发。全靠自己在总结中摸索，所以对于一个问题要是深究还真能挖出许多有意思的东西，现在觉得JavaScript这个东西简直越来越有意思了。

 

正文：每个节点（Node原型链上的实例对象）都可继承该属性（通过 Node.prototype 原型链访问），用于表明节点类型。表示节点具体信息。nodeName保存的为元素的标签名，nodeValue的值为null。

var someNode=document.documentElement;// 获取HTML元素if(someNode.nodeType==1){ console.log(someNode.nodeName+"是元素节点名"); console.log("它的nodeValue："+someNode.nodeValue);}/*HTML是元素节点名  它的nodeValue：null */

nodeName值是特性的名称，nodeValue值是特性的值。这个对象是NamedNodeMap类型的实例，这个对象的原型链关系为html.attributes.__proto__->NamedNodeMap.prototype->Object.prototype。这个对象里面又有几个属性，这几个属性才是我们需要的真正特性对象。

html.attributes["0"];// lang="zh-cn" 是一个特性节点html.attributes["1"];// 是另一个特性节点html.attributes["lang"].nodeName;// "lang" lang特性节点的nodeName值html.attributes["lang"].nodeValue;// "zh-cn"html.attributes["0"] instanceof Attr;// true

nodeName值为"#text"，nodeValue值为节点所包含的文本。nodeName值为"#cdata-section"，nodeValue值为CDATA区域中的内容。nodeName值为"#comment"，nodeValue值为注释的内容。可以看到Document.prototype上的属性和方法很多有176个，返回这个数组是Array类型的实例。发现了document节点对象和element元素节点对象的事件属性还不是统一继承的，是在各自原型链上继承的事件属性。nodeName的值为doctype的名称，nodeValue的值为null。注意到这也和Document.prototype上的方法重合了。每个节点都可继承该属性，其中保存着NodeList对象。对于原型上的item方法，返回NodeList对象中指定索引的节点，如果索引越界，则返回 null 。等价的写法是 nodeList[idx] , 不过这种情况下越界访问将返回 undefined （因为是以数组形式访问的）。(3)NodeList类型集合大部分时候和HTMLCollection类型集合都是即时更新的，当其所包含的文档结构发生改变时，它会自动更新。以下图片为示例，nodechilds集合和lis集合虽然保存的内容一样，但它两不相等，是因为nodechilds保存的引用地址和lis保存的引用地址不一样，但这两引用地址所指向的内存堆中各的自集合对象里的每一项引用都是同一个element节点对象。所以删除一个li节点后，nodechilds和lis集合都会发生变化。所以当你选择遍历NodeList中所有项，或缓存列表长度时候，考虑要用哪种。

parentNode属性：该属性指向文档树中的父节点（可能是Document类型也可能是Element类型）

previousSibling和nextSibling属性：childNodes列表中第一个节点的previousSibling属性值为null，列表中最后一个节点的nextSibling属性也为null。

firstChild和lastChild属性：父节点的这两个属性分别指向其childNodes的第一个和最后一个节点，在只有一个子节点情况下，firstChild和lastChild指向同一个节点。若没有子节点，这两属性为null。

hasChildNodes()：这个函数的writable属性看来是允许可写的，那就重写该方法试试，我是重写在节点实例对象上了，当然你也可以在原型Node.prototype上重写该方法是可以的。在节点包含一个或多个子节点情况下返回true，在判断时这比childNodes.length更简便。

ownerDocument：该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在两个或两个以上文档中。当我们不必在节点层次中通过层层回溯到达顶端而是可以直接 节点对象.ownerDocument 访问，但要注意 document.ownerDocument;// null 文档节点本身的文档节点为null。

parentNode.appendChild()：返回新增节点。再次回归主题：appendChild()用于向childNodes列表的末尾添加一个节点，添加后，childNodes的新增节点，父节点及以前的最后一个子节点的关系指针都会得到相应更新。如果传入到appendChild()中的节点已经是文档中的一部分了，那结果就是将该节点从原来位置移动到新位置。

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：从原型链看DOM－－Node类型

关键词：dom