DOM操作

作者: 没了提心吊胆的稗子 | 来源:发表于2019-08-04 22:53 被阅读0次

    获取页面中元素的方法:
    document.getElementById();
    context.getElementsByName(tagName);把指定容器中子孙辈的所有标签名为tagName的标签都获取到了
    context.getElementsByClassName(className)IE6-8不兼容
    context.getElementsByName(name)只对表单元素起作用
    document.body();
    document.documentElement();
    context.querySelector();/context.querySelectorAll()移动端常用,IE6-8不兼容,通过它获取到的集合是不存在DOM映射的

    描述节点和节点之间关系的属性,标准浏览器中会把换行和空格当做节点处理
    childNodes获取所有子节点,包括文本注释等
    children获取所有元素子节点,IE6-8下获取的结果和标准浏览器下获取的结果不一致
    parentNode父节点
    previousSibling/previousElementSibling上一个(元素)哥哥节点
    nextSibling/nextElementSibling
    lastChild/lastElementChild
    firstChild/firstElementChild
    所有带element的都在IE6-8下不兼容
    一个页面中最常用的节点有四种,文本,注释,元素,document

    元素节点:nodeType:1;noneName:大写的标签名;nodevalue:none
    注释节点:nodeType:3;noneName:#text;nodevalue:文本内容
    文本节点:nodeType:8;noneName:#commont;nodevalue:注释内容
    document节点:nodeType:9;noneName:#document;nodevalue:none
    通过nodeType属性即可知道当前节点的类型

    动态操作DOM的方法(DOM的增删改)
    createElement:创建标签
    document.createDocumentFragment:创建文档碎片
    appendChild:添加到当前元素的末尾
    insertBefore:添加到当前元素之前
    cloneNode(true/false):深(浅)克隆当前元素
    replaceChild/removeChild:替换/移除子节点
    get/set/removeAttribute:获取/设置/删除自定义的属性

    DOM盒子模型
    clientHeight/clientWidth
    clientLeft/clientTop
    offsetHeight/offsetWidth
    offsetLeft/offsetTop
    offsetParent
    scrollHeight/scrollWidth
    scrollLeft/scrollTop
    getComputedStyle
    currentStyle

    所有兼容写法:https://github.com/LareinaB/jsCode/tree/master/utils

    相关文章

      网友评论

          本文标题:DOM操作

          本文链接:https://www.haomeiwen.com/subject/yvaydctx.html