day31 js笔记 DOM下 2021.09.26

Dom节点：

- 元素/标签节点:html标签下面的所有标签/元素

- 属性节点:标签内的属性

- 文本节点:标签内的所有文字内容

获取子节点及子元素节点：（获取子节点时 有标签的就输出标签 没有标签就输出#text）

- childNodes 获取标签下面的所有子节点

- children 获取标签下面的所有子元素节点

- firstChild 获取标签下面的第一个子节点

- lastChild 获取标签下面的最后一个子节点

- firstElementChild 获取标签下面的第一个子元素节点

- lastElementChild 获取标签下面的最后一个子元素节点

获取兄弟节点：

- previousSibling 获取到上一个兄弟节点

- previousElementSibling 获取到上一个兄弟元素节点

- nextSibling 获取到下一个兄弟节点

- nextElementSibling 获取到下一个兄弟元素节点

- parentNode 获取到父级节点

- parentElement 获取到父级元素节点

- attributes 获取元素的属性

 节点的属性：

- nodeType 节点的类型

- nodeName 节点的名字

- nodeValue 节点的值

 操作节点：

- 增加 document.createElement('创建的标签名字')

- 删除 父节点.removeChild(删除的子级节点)

- 修改 父节点.replaceChild(新的节点,被替换的节点)

- 插入 父节点.appendChild(子节点)

- 放在某一个节点的前面 父节点.insertBefore(新节点,旧节点)

- 复制节点 被复制的节点.cloneNode(参数)

        - 参数写: true 不仅复制结构 还可以复制文本内容

        - 参数不写:: 仅复制结构

获取行内样式： dom元素.style.属性 = '属性值'

获取非行内的样式： window.getComputedStyle(标签元素)   - 兼容: dom元素.currentStyle.属性

获取元素的偏移量: 盒子元素距离浏览器的左上间距

- offsetLeft 左侧的偏移量

- offsetTOp 顶部的偏移量

注意：

- 盒子外侧距离浏览器的间距

- margin、定位 的大小会影响 (浮动会影响但是不会使用)

- 位移不会影响

获取元素自身大小：

- offsetWidth/offsetHeight 包含content、padding 包含border

- clientWidth/clientHeight 包含content、padding 不包含border