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