2019-12-15

这个星期做项目用到了很多关于DOM的知识点,所以去看了小红书的详细解读,温故知新,

首先DOM(文档对象模型)是针对HTML和XML文档的一个API,

其中包含节点层次,文档元素类型,nod类型(12种),可以通过判断语句识别一个节点的类型。

节点关系中提到nodelist对象,它是一种类数组对象,用于保存一组有序的节点,

虽然可以通过方括号语法来访问它的值,而且它也有length属性,但它并不是arry的实例

它的独特之处在于,它实际上是基于DOM结构动态执行查询的结果

,因此DOM结构的变化能够自动反映在nodelist对象中,当要把它转换成ie8及更早的版本中的数组时,只需要循环push每个子元素即可。

previousSibling即相邻兄节点,nextSibling即相邻弟节点

所有节点的ownerDocument属性直接指向文档节点,很关键

很巧的时,我第二天就用到了昨天学过的这些节点关系,当遍历一个nodelist对象后,鼠标放入其中的每个标签,触发他们的子标签的一些动态效果

就可以通过lastElementChild,firstElementChild或者父节点、兄弟节点等等查询到相关标签拿来使用,这样就简化处理了反复跑循环,事件代理,this问题,异步问题等等

然后练习了插入节点的各种方式,包括appendChild()、insertBefore()等方法,以及移除节点

然后学习了grid布局、放大镜、搜索、分页布局的原理

你可能感兴趣的:(2019-12-15)