• js原生dom方法总结


    1.document

    document方法
    getElementById (Node)返回指定节点的引用
    getElementsByTagName (NodeList)返回文档中所有匹配元素的集合
    querySelector (Node)返回与选择器匹配的首个节点 (ie8+)
    querySelectorAll (Node)返回与选择器匹配的所有节点 (ie8+),其中ie8中选择器只支持css2选择器
    createElement(name) (Node)返回新建的节点
    createTextNode(text) (Node)返回新建的文本节点
    documentElement (Node)返回html节点
    body (Node)返回body节点
    createDocumentFragment (Node)返回一个DocumentFragment类型的节点,用作一个轻量版本的 Document 使用,用于存储已排好版的或尚未打理好格式的XML片段。

    2.node(包括element,text,attribute,document,comment等,Element只是nodeType=1时node)

    node方法

    contains(node)(全兼容,ie中只支持element)是否包含其他节点
    appendChild(node) 添加一个子节点
    removeChild(node) 移除一个子节点
    replaceChilde(node) 替换一个子节点
    insertBefore(newNode,refNode) 在同一层级的节点前面插入新节点
    hasChildNodes() (Boolean)返回是否子节点
    cloneNode(bDeep) (Node)返回节点的副本,bDeep表示是否复制其子节点

    node属性
    nodeName (String)节点名称
    nodeType (Number)节点类型
    nodeValue (String)节点的值
    parentNode (Node)父节点的引用
    childNodes (NodeList)子节点的列表
    firstChild (Node)首个子节点
    lastChild (Node)最后一个子节点
    previouSibling (Node)前一个兄弟节点
    nextSibling (Node)后一个子节点

    3.element(可以有属性和子节点的node,对应XML中的一个tag元素,继承自node)

    element方法
    getAttribute(attrName) (string)返回属性的value
    setAttribute(attrName,value) (string)给属性赋值
    removeAttribue(attrName) (string)删除指定属性
    getElementsByTagName(name) (NodeList)返回指定tag的节点列表
    querySelector (Node)(ie9+)
    querySelectorAll (NodeList)(ie8+)(:scope pseudo-class 不支持)

    element属性
    children (elementList)返回子元素列表(与子节点有区别,ie9+正确,ie6-8错误的包含Comment类型节点)
    previousElementSibling (前一个兄弟element) (ie9+)
    nextElementSibling (后一个兄弟element) (ie9+)

    element插入文本
    element.textContent (IE9+)
    element.innerText(ie6+,ff45+,其他浏览器支持)
    element.innerHTML(有html parse,性能逊于textContent)

    element插入元素,html
    //position beforebeigin/afterbegin/beforeend/afterend
    element.insertAdjacentHTML(position, html)(全兼容)
    element.insertAdjacentElement(position, element)(ie8+,ff48+)

    element修改class
    element.classList(ie10+)

  • 相关阅读:
    R()函数的使用 tp2
    __call()的使用
    tp3.1.3 引入静态页面
    tp3.1.3创建应用
    .env文件的使用 thinkphp51
    concat()和push()的区别
    小程序模板template使用
    56. 从1到n整数中1出现的次数
    55. 连续子数组的最大和
    54. 数据流中的中位数
  • 原文地址:https://www.cnblogs.com/mengff/p/6220354.html
Copyright © 2020-2023  润新知