DOM基础之“寻找”子节点

2021-07-22 01:33:36

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

首先，关于DOM的概念：

1.概念：DOM = document（文档）Object（对象）Model（模型）

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

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

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

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

3.如何寻找子节点

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

　　</ul>

　　　可以用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 在标准浏览器下：元素节点+允许非法嵌套

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

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

nextSibling与nextElementSibling 属性 -------》寻找当前元素的下一个兄弟节点 oUl.oFirst.nextSibling/nextElementSibling

previousSibling与previousElementSibling 属性 -------》寻找当前元素的上一个兄弟节点 oUl.oLast.previousSibling/previousElementSibling

码农公寓