Variable domConst

Type declaration

• create:function

  • create(tagName, attrs?): Node

  • 创建元素节点

    Parameters

    • tagName: string

      需要创建的标签名称
    • Optional attrs: Record<string, any> = {}

      需要添加的节点属性，例如 “src”、“innerHTML” 等属性

    Returns Node

    返回一个新建的元素节点

    Example

    // 创建一个 <img src="/test.png" /> 的图片标签
    const img = dom.create('img', { src: '/test.png' })
    Copy

• query:function

  • query(select, parent?): Node

  • 获取单个元素节点

    Parameters

    • select: string

      css选择器
    • Optional parent: Document | Node

      父级节点 或 要查询的文档对象

    Returns Node

    查询到的元素节点

    Example

    // 获取页面中 class = "user-name" 的元素节点
    const userName = dom.query('.user-name')
    Copy

• queryAll:function

  • queryAll(select, parent?): Node[]

  • 获取多个元素节点

    Parameters

    • select: string

      css选择器
    • Optional parent: Document | Node

      父级节点 或 要查询的文档对象

    Returns Node[]

    返回查询到的元素节点数组

    Example

    // 获取 class="item-name" 的所有元素节点
    const names = dom.queryAll('.item-name')
    Copy

• queryId:function

  • queryId(id, parent?): Node

  • 通过Id获取单个元素节点（适用于获取数字开头的 id 元素节点）

    Parameters

    • id: string

      id选择器
    • Optional parent: Document | Node

      父级节点 或 要查询的文档对象

    Returns Node

    查询到的元素节点

    Example

    // 获取页面中 id = "0817" 的元素节点 (非数字开头场景推荐使用 dom.query('#id-0817'))
    const userId = dom.queryId('0817')
    Copy

• setMethods:function

  • setMethods(node): Node

  • 在元素节点上挂载一些简写方法,方便链式调用

    Parameters

    • node: Node

      需要设置简写方法的元素节点

    Returns Node

    返回已设置简写方法后的元素节点

    Example

    const body = document.querySelector('body')
    // 给 body 设置一些简写方法
    dom.setMethods(body)
    // 利用设置好的简写方法设置样式等操作
    body.setStyle({ fontSize: '14px' })
    Copy

• setStyle:function

  • setStyle(node, style): Node

  • 设置元素节点内联样式

    Parameters

    • node: Node

      需要设置style的元素节点
    • style: Record<string, string>

      一个 style 对象，例如 { fontSize: '14px' }

    Returns Node

    返回传入的 node 元素节点

    Example

    // 给 body 节点设置 style="font-size:14px;" 内联样式
    const body = dom.setStyle(dom.query('body'), { fontSize: '14px' })
    Copy