Dom 随笔

圈圈又叉叉
171 阅读4分钟

DOM

DOM 文档对象模型

  • javascript 的组成部分
    • DOM (document object model) 文档对象模型
    • BOM (browers object model) 浏览器对象模型
    • ECMAScript js 的核心

  • 节点分类

    • 元素节点：每个 HTML元素
      • 属性节点：HTML元素的属性
    • 文本节点：HTML元素内的文本
      • 注释节点：注释 <!---->
    • 文档节点：整个文档document

  • 节点类型 --- nodeType

    • 元素节点：1
    • 属性节点：2
    • 文本节点：3
    • 注释节点：8
    • 文档节点：9

  • 节点名称 --- nodeName

    • 元素节点：与标签名相同
    • 文本节点：为#text
    • 注释节点：为#comment
    • 文档节点：为#document

  • DOM关系

    • childNodes 子节点
      • 获取div dom节点时候，如果子子节点里面包含空格，换行，则会被记录成一个text的节点
    • children 子元素
      • 获取子标签，不包含空格和换行
    • firstChild 第1个子节点
      • 获取第1个子节点，包含文本
    • firstElementChild 第1个子元素
      • 获取第1个子元素，不包含文本
    • lastChild 最后一个子节点
    • lastElementChild 最后一个子元素
    • nextSibling 下一个兄弟节点,包含文本节点
    • nextElementSibling 下一个兄弟元素
    • previousSibling 上一个兄弟节点,包含文本节点
    • previousElementSibling 上一个兄弟元素
    • parentNode 父节点, 根据当前调用的节点来获取父节点，一个元素节点，不包含text
    • offsetParent 定位父级,根据position定位而获取的定位父级

  • DOM属性操作

    • el.attributes 元素所有属性的集合
    • el.getAttribute("attr") 获取属性
    • el.setAttribute("attr","val") 设置属性
    • el.removeAttribute("attr") 移出属性
    • el.hasAttribute("attr") 判断是否有这个属性

  • DOM样式操作

    • node.classList.add('className'); 向元素添加一个类
    • node.classList.remove('className') 元素移除一个类
    • node.classList.toggle('className) 元素切换一个类
    • node.classList.contains('className) 元素是否包含一个类
    • node.innerHTML = ‘
    • ’这种方式创建的节点是无法被js捕抓到的，这样表示的是一个字符串，如果向获取到li并且进行到li 属性操作的话，需要在最后都加载完之后，再元素获取一次

  • data 自定义属性

    • 在标签中定义data自定义属性：data-key="value";
    • 在js操作该元素的 data 自定义属性：el.dataset
      • 获取：el.dataset.key
      • 设置: el.dataset.key = "value"
      • 有data 是防止官方属性的名被覆盖

  • DOM节点操作

DOM 节点操作

创建节点

语法：element document.createElement("tagName"); 创建一个节点 参数：tagName 标签名称 返回值：创建好的节点

向页面中添加节点

  • el.appendChild(node) 在元素的末尾添加一个子级
  • el.insertBefore(newNode,oldNode) 在 oldNode 前边添加入 newNode
    • 在使用 appendChild 和 insertBefore时，如果添加是一个页面上已经存在的节点，会先从原位置删除，然后在添加到新的位置去。
    • 如果el.insertBefore(newNode,oldNode)中newNode为空的话他会当作append()方法执行

替换节点

  • parent.replaceChild(newNode,oldNode) 替换子元素

删除节点

  • el parent.removeChild(el) 删除掉某个子元素
  • node.remove(); 自己删除自己

克隆节点

  • node.cloneNode(deep)
    • deep: 默认为false
    • deep 为 true, 克隆元素及属性，以及元素的内容和后代
    • deep 为 false, 只克隆元素本身，及它的属性
  • 如果项目使用拖拽功能时候可以使用
  • 克隆之后还是需要append添加到节点里面。

元素的尺寸获取

  • offset
    • offsetWidth 盒模型可视宽度
    • offsetHeight 盒模型可视高度
    • offsetLeft 距离定位父级的left坐标
    • offsetTop 距离定位父级的top坐标
  • client （不包含border）
    • clientWidth 可视宽度
      • document.documentElement.clientWidth 当前浏览器的可视宽度
    • clientHeight 可视高度
    • clientTop 上边框宽度
    • clientLeft 左边框宽度
  • scroll
    • scrollWidth 内容宽度，内容宽度大于容器宽度，也可以通过这个方法获取
    • scrollHeight 内容高度，内容宽度大于容器高度，也可以通过这个方法获取
    • scrollLeft 左右滚动距离
      • 当前滚动条的位置，相对与左边的距离
    • scrollTop 上下滚动距离
      • 当前滚动条的位置，相对与顶部的距离
      • 回到顶部的功能可以使用 document.documentElement.scrollTop = 0;
  • getBoundingClientRect()
    • 这个距离会随着滚动条的改变而改变，他是相对一个相对位置
    • left 元素左侧距离可视区左侧距离
    • top 元素顶部距离可视区顶部距离
    • right 元素右侧距离可视区左侧距离
    • bottom 元素底部距离可视区顶部距离
      • 可以用于做吸顶搜索条
    • width 可视宽度
    • height 可视高度
  • innerHeight/Width
    • 返回窗口的文档显示区的高度。
avatar
文章
阅读
粉丝