DOM基础之“寻找”子节点

今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充。

首先,关于DOM的概念:

1.概念:DOM = document(文档)Object(对象)Model(模型)

    文档:就是我们所说的html的页面

    对象:指的是html页面中的元素,也成为标签

    文档对象模型:则是规定的一系列能够为了让我们用JS更好操作页面元素的标准

2.在DOM下把文档当作树状结构,同时定义了很多方法来操作树中的每一个分支元素(节点)

  DOM基础之“寻找”子节点

3.如何寻找子节点

  要寻找元素的子节点的方法有很多,但大部分都具有兼容性问题额,以上图的ul、li为例讨论下面的方法

  <ul id = "oUl">

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

  </ul>

  • childNodes 属性    ====>    oUl.childNodes

    可以用childNodes属性来找到ul下所有的子节点li(是节点列表集合,即能找到所有li),并且只能访问元素的直系子节点(如果li里面还有别的元素是无法访问到的)

    注意:childNodes在标准浏览器下:

        会包含元素节点+文本节点(空格、回车等),并且允许非法嵌套(如ul里有<p>也会选中); ==》宽容

       在非标准的IE浏览器下:

        只包含元素节点,并且不允许非法嵌套;      =====》不够宽容

    对于此类的兼容问题我是这样记得,标准浏览器比较宽容,所以它大方的把文本节点也给你算上了(虽然不一定是好事),并且就连不是自己的孩子,也当作自己的。哈哈

    非标准的IE就不够宽容啦,不是我的我不要~

  • firstChild 与 firstElementChild 属性   -------》寻找元素的第一个子节点  oUl.firstChild/firstElementChild

   两者的区别:firstChild在标准浏览器下:元素节点+文本节点   =====》宽容

              在非标准IE下: 元素节点     ====》不宽容

         firstElementChild属性只在IE浏览器才拥有

   解决兼容问题方法:

      var oFirst = oUl.firstElementChild  ||  oUl.firstChild ;

      oFirst.style.background = 'red';  //这样无论是IE还是标准下都可以oul下的第一个子元素添加一个红色背景了

   那么问题又来了,如果Ul下没有元素呢????  我还不知道,望告知,或者我一会再去查。

  • lastChild 与 lastElementChild 属性  -------》寻找元素的最后一个子节点  oUl.lastChild/lastElementChild

   跟第一个的一样,lastChild在标准下宽容(文本+元素);非标准IE下不宽容(元素)

   解决兼容:     

      var oLast = oUl.lastElementChild  ||  oUl.lastChild ;

      oLast.style.background = 'red'; 

  -----------推荐使用寻找子节点的方法-------------------------------------

  • children 属性   -------》寻找元素的所有子节点列表集合  oUl.children.length ==>得到li的个数

   children 在标准浏览器下:元素节点+允许非法嵌套

        在非标准IE下:元素节点 +不允许非法嵌套

   

  -----------寻找兄弟节点的方法-------------------------------------

  • nextSibling与nextElementSibling 属性  -------》寻找当前元素的下一个兄弟节点  oUl.oFirst.nextSibling/nextElementSibling 
  • previousSibling与previousElementSibling 属性  -------》寻找当前元素的上一个兄弟节点  oUl.oLast.previousSibling/previousElementSibling 
上一篇:Docker入门之四搭建私有仓库


下一篇:Struts2框架入门