`

dom中的children对象数组元素 fistChild,lastChild使用

阅读更多
children对象数组元素示例
<html>
<body>
  <table   id="tbl">  
  <tbody> <tr> <td> 行1列1 </td><td>行1列2 </td></tr>  
  <tr> <td> 行2列1 </td><td>行2列2 </td></tr>
  </tbody>
  </table>  
  <input   onclick="alert(document.all.tbl.children(0).children(0).innerHTML)"   value="children(0)"   type="button">  
  <input   onclick="alert(document.all.tbl.children(0).children(1).innerHTML)"   value="children(1)"   type="button">  
  <input   onclick="alert(document.all.tbl.children(0).children(1).children(0).innerHTML)"   value="children(2)"   type="button">
  <div   id=test>  
  <a></a>  
  <table></table>  
  </div>  
   
  <script>  
  alert(test.children[0].tagName)  
  alert(test.children[1].tagName)  
  </script>  
 
</body>
</html>

在DOM中,整个页面里的元素是个树型结构
children 代表对象的子节点数组

document.all.tbl.children(0).children(0).innerHTML解释
document.all.tbl.children(0)定位到table的第一个子节点<tbody>
document.all.tbl.children(0).children(0)定位到table的第一个子节点的第一个子节点<tr>,打印结果<td> 行1列1 </td><td>行1列2 </td>


document.all.tbl.children(0).children(1).innerHTML,打印结果<td> 行2列1 </td><td>行2列2 </td>


document.all.tbl.children(0).children(1).children(0).innerHTML 打印结果行2列2


fistChild,lastChild示例
<html>
<body>
  <table   id="tbl">  
  <tbody> <tr id="tr1"> <td> 行1列1 </td><td>行1列2 </td></tr>  
  <tr> <td="tr2"> 行2列1 </td><td>行2列2 </td></tr>
  </tbody>
  </table>  
  <input   onclick="alert(document.all.tbl.firstChild.firstChild.innerHTML)"   value="children(0)"   type="button">  
  <input   onclick="alert(document.all.tbl.firstChild.lastChild.innerHTML)"   value="children(1)"   type="button">  
  <input   onclick="alert(document.all.tbl.firstChild.lastChild.firstChild.innerHTML)"   value="children(2)"   type="button">
  <div   id=test>  
  <a></a>  
  <table></table>  
  </div>  
   
  <script>  
  alert(test.firstChild.tagName)  
  alert(test.lastChild.tagName)  
  </script>  
 
</body>
</html>

document.all.tbl.firstChild定位到table的第一个子节点<tbody>
document.all.tbl.firstChild.firstChild定位到table的第一个子节点<tbody>
的第一个子节点<tr id="tr1">
document.all.tbl.firstChild.firstChild.innerHTML打印结果是<td> 行1列1 </td><td>行1列2 </td>


document.all.tbl.firstChild.lastChild定位到table的第一个子节点<tbody>
的最后子节点<tr id="tr2">
document.all.tbl.firstChild.lastChild.innerHTML打印结果是<td="tr2"> 行2列1 </td><td>行2列2 </td>


document.all.tbl.firstChild.lastChild.firstChild.innerHTML 打印结果是
行2列2
分享到:
评论

相关推荐

    解析dom中的children对象数组元素firstChild,lastChild的使用

    以下是对dom中的children对象数组元素firstChild,lastChild的使用进行了详细的分析介绍,需要的朋友可以参考下

    基本DOM节点操作

    1、获取元素节点 getElementById():获取指定唯一id的元素。 getElementByTagName():获取...element.lastChild:该元素最后一个子节点。 3、父节点 element[removed] 4、兄弟节点 element.previousSibling:返回相同的

    Javascript数组操作高级心得整理

     在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们。 9  使用arguments.length检测参数个数 9  模拟函数重载 10 (3) Function对象(类) 10  Function对象的使用 10  使用...

    处理及遍历XML文档DOM元素属性及方法整理

    用于处理XML文档的DOM元素属性 代码如下: childNodes:返回当前元素所有子元素的数组; firstChild:返回当前元素的第一个下级子元素; lastChild:返回当前元素的最后一个子元素; nextSibling:返回紧跟在当前元素...

    JavaScript遍历DOM元素的常见方式示例

    对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致。 DOM中为元素新增了下面几个属性: childElementCount:返回子...

    整理JavaScript对DOM中各种类型的元素的常用操作

    节点类型 nodeType 以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr ...同时通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。 操作节点 a

    javascript对于DOM的操作

    document 树结点 parentElement 父元素 parentNode 父结点 childNodes 所有子结点 有s哦 firstChild 第一个子结点 lastChild 最后一个子结点 nextSibling 下一个兄弟结点 previousSibling 上一个兄弟结点

    js常见的兼容问题.js

    js常见的兼容问题: ...4.关于使用 firstChild,lastChild 等,获取第一个/最后一个元素节点时的兼容; 5.添加监听时间addEventListerner/attachEvent 出现的兼容问题; 6.关于获取滚动条距离而出现的问题;

    JS访问DOM节点方法详解

    通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 getElementById() 和 getElementsByTagName() getElementById() 和 getElementsByTagName() 这两种方法,可查找整个 HTML 文档中的任何 HTML ...

    fd-append:以函数方式附加 DOM 元素

    以功能方式附加 DOM 元素。 安装 npm install fd-append --save 用法 let append = require ( 'fd-append' ) , elem = require ( 'fd-elem' ) , appendtoBody = append ( document . body ) ; let p = elem ( '...

    PHP XML操作类DOMDocument

    DOMDocument相关的内容....firstChild 返回当前节点的第一个子节点(只读) Implementation 返回XMLDOMImplementation对象 lastChild 返回当前节点最后一个子节点(只读) nextSibling 返回当前节点的下一个兄弟节

    dommy:一个可以模拟DOM API足以渲染HTML的Document虚拟对象

    一个可以模拟DOM API足以渲染HTML的Document虚拟对象。 例子 var dommy = require ( 'dommy' ) ; var document = dommy ( ) ; var html = document . createElement ( 'html' ) ; var body = document . ...

    【新手入门】javascript新手学习第七课

    lastChild 返回当前元素的最后一个子元素 nextSibling 返回紧跟在当前元素后面的元素 nodeValue 指定表示元素值的读/写属性 parentNode 返回元素的父节点 previousSibling 返回紧邻当前元素之前的元素 nodeName ...

    fd-replace:以功能方式替换 DOM 元素

    以功能方式替换 DOM 元素。 安装 npm install fd-replace --save 用法 import elem from 'fd-elem' ; import append from 'fd-append' ; import replace from 'replace' ; let appendtoBody = append ( document ...

    应用流量排行(1).xlsx

    元素对象.属性名 = 值 ———————————————— 版权声明:本文为CSDN博主「lyu_ping」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:...

    JavaScript操作HTML DOM节点的基础教程

    NOTE:下面提供的例子中的 element 均为元素节点。 获取节点 父子关系 element[removed] element.firstChild/element.lastChild element.childNodes/element.children 兄弟关系 element.previousSibling/element....

    javascript 学习之旅 (3)

    childType属性:返回的数组包含着所有类型的节点 nodeValue属性:改变某个文本节点的值 firstChild和lastChild属性:无论何时何地,只要需要访问childNodes[]数组的第一个元素,外面都可以把它写成firstChild。...

    多维数据查询MDX教程(全)

    在简单示例中使用查询轴和切片器轴 在查询中建立多维数据集上下文 在 MDX 中生成子多维数据集 在 MDX 中生成命名集 创建查询作用域的命名集 创建会话作用域的命名集 在 MDX 中生成计算成员 在 MDX 中生成单元计算 ...

Global site tag (gtag.js) - Google Analytics