节点

2022-05-24  本文已影响0人  这世间好折磨人

(1)、测试节点类型     打点调用  ondeType

                    元素节点显示:1

                    属性节点显示:2

                    文本节点显示:3

                    注释节点显示:8

(2)、节点关系:

                    父子节点:

                                获取父节点 直接打点调用 parentNode

                                获取子节点 获取的永远是一个集合   打点调用children 只会获取元素节点   打点调用childNodes 获取的是所有的子节点返回的同样是一个集合

                    兄弟关系:

                                获取这个节点的上一个兄弟节点打点调用: previousElementSibling

                                获取这个节点的下一个兄弟节点打点调用:nextElementSibling

                     特殊位置:

                                获取的是第一个元素类型的节点:打点  firstElementChild

                                获取的是第一个子节点不管是什么类型:打点  firstChild

                                获取最后一个元素的子节点: 打点  lastElementChild

                                获取最后一个节点不管是什么类型的: 打点  lastChild

(3)、节点的操作方法:

                                创建新节点 (需要用变量接收):  createElement('元素名')

                                给父节点末尾添加子节点(父节点打点调用:appendChild(创建好的节点)

                                在某个元素之前插入一个节点(父节点打点调用):insertBefore(想要添加的新节点,在谁之前添加)

                                删除节点(父节点打点调用): removeChild(想要删除的子节点)

                                替换节点(父节点打点调用):replaceChild(想要替换成的元素,被替换的元素)

                                克隆节点(想要克隆谁就用谁打点调用)(括号里面为 true 连着内容一起被克隆  false 只克隆标签不克隆内容    括号里面不写默认为 false):cloneNode()

(4)、事件监听的方式:addEventListener(事件类型,事件函数)

(5)、DOM 0级事件:

                    好处:

                            写法简单、兼容性好

                    坏处:

                            多次绑定相同事件会被覆盖

                    移除事件:

                            绑定事件的元素打点调用想要删除的什么事件 = mull

(6)、DOM 2级事件:

                    好处:

                            多次绑定不会被覆盖 按顺序执行

                    坏处:

                            太过

上一篇 下一篇

猜你喜欢

热点阅读