文档对象模型DOM_html/css_WEB-ITnose

认识DOM

访问子结点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：

elementNode.childNodes注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:

Paste_Image.png

运行结果:

IE:

UL子节点个数:3 节点类型:1

其它浏览器:

UL子节点个数:7 节点类型:3

注意:

IE全系列、firefox、chrome、opera、safari兼容问题 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，如下图所示:

Paste_Image.png

如果把代码改成这样:

  javascript  jQuery  PHP   

运行结果:（IE和其它浏览器结果是一样的）

UL子节点个数:3 节点类型:1

访问子结点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：

说明：与elementNode.childNodes[0]是同样的效果。 二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。语法：```node.lastChild 

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

注意: 上一节中，我们知道Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。 (以后章节讲解)

访问父节点parentNode

获取指定节点的父节点

语法：

注意:父节点只能有一个。看看下面的例子,获取 P 节点的父节点，代码如下:
  
 parentNode 获取指点节点的父节点

      
查看更多关于文档对象模型DOM_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112402