网站建设对企业品牌价值提升的影响,网站开发与维护前景,wordpress伪静态优化,广州市建筑信息平台访问节点
通过节点之间的树形关系#xff0c;可以定位文档中的每个节点。DOM为Node类型定义如下属性#xff0c;以方便JavaScript对文档树中每个节点进行遍历。
ownerDocument#xff1a;返回当前节点的根元素#xff08;document对象#xff09;parentNode#xff1a;…访问节点
通过节点之间的树形关系可以定位文档中的每个节点。DOM为Node类型定义如下属性以方便JavaScript对文档树中每个节点进行遍历。
ownerDocument返回当前节点的根元素document对象parentNode返回当前节点的父节点。所有的节点都仅有一个父节点childNodes返回当前节点的所有子节点的节点列表firstChild返回当前节点的首个子节点lastChild返回当前系欸但的最后一个子节点nextSibling返回当前节点之后相邻的同级节点previousSibling返回当前节点之前相邻的同级节点
childNodes
每个节点都有一个childNodes属性该属性保存着一个nnodeList对象它表示了所有子节点的列表。
nodeList是一种类数组对象用于保存一组有序的节点用户可以通过下标位置来访问这些节点。虽然childNodes可以通过方括号来访问nodeList的值而且childNodes对象包含一个length属性它表示列表包含子节点的个数长度但childNodes并不是数组不能够直接调动数组的方法。
nodeList对象实际上是基于DOM结构动态执行查询的结构DOM结构的变化能够自动反映在nodeList对象中。因此我们不能够以静态的方式处理nodeList对象。
示例通过方括号item()方法访问节点
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyh1标准BOM/h1p这是一份简单的strong文档对象模型/strong/pulliD表示文档HTML文档结构/liliO表示对象文档结构的JavaScript脚本化映射/liliM表示模型脚本与结构交互的方法和行为/li/ulscriptvar tag document.getElementsByTagName(ul)[0]; //获取列表元素var a tag.childNodes; //获取列表元素包含的所有节点console.log(a[0].nodeType); //第一个节点类型返回3文本节点console.log(a.item(1).innerHTML); //返回第二个li包含的文本console.log(a.length); //包含的子节点数 3/script/body
/html提示可以使用Array.prototype.slice()方法IE8以后把nodeList转换为数组这样能够调用数组的相关方法。
var tag document.getElementsByTagName(ul)[0]; //获取列表元素
var a Array.prototype.slice.call(tag.childNodes, 0);//转换为数组
a.reverse();//逆序parentNode
每个节点都有一个parentNode属性该属性指向文档树种的父节点。包含在childNodes列表中的所有节点都具有相同的父节点因此它们的parentNode属性都指向同一个节点。
parentNode属性返回节点永远是一个元素类型节点因为只有元素节点才可能包含子节点。不过document节点没有父节点document节点的parentNode属性将返回null。
firstChild和lastChild
firstChild属性返回第一个子节点lastChild返回最后一个子节点。文本节点和属性节点的firstChild和lastChild属性返回值总是null。
注意firstChild等价于childNodes的第1个元素lastChild等价于childNodes的最后一个元素。
node.childNodes[0] node.firstChild
node.childNodes[node.childNodes.length - 1] node.lastChildnextSibling和previousSibling
nextSibling返回下一个相邻节点previousSibling返回上一个相邻节点。如果没有同属一个父节点的相邻节点则它们将返回null。
ownerDocument
在DOM文档树种可以使用ownerDocument属性访问根节点
node.ownerDocument通过每个节点的ownerDocument属性可以不必通过层层回溯的方式到达顶端而是可以直接访问文档节点。另外也可以使用如下方式访问根节点
document.documentElement上述反应节点关系的所有属性都是只读的其中childNodes属性于其他属性相比更加方便因为只须使用简单的关系指针就可以通过它访问文档树种的任何节点。
另外**hasChildNodes()方法可以检测是否包含子节点返回true | false比查询childNodes列表的length属性更简单、有效。
