美文网首页
操作DOM—DOM基础

操作DOM—DOM基础

作者: LeungJhowe | 来源:发表于2018-07-05 16:58 被阅读0次

    一、访问节点

    1)相对当前节点访问节点

    节点操作方法 说明
    ownerDocument 返回当前节点的根元素(document对象)
    parentNode 返回当前节点的父节点。所有的节点都仅有一个父节点
    childNodes 返回当前节点的所有子节点的节点列表
    firstChild 返回当前节点的首个子节点
    lastChild 返回当前节点的最有一个子节点
    nextSibling 返回当前节点之后相邻的同级节点
    previousSibiling 返回当前节点之前相邻的同级节点

    提示
    每个节点都有一个childNodes属性,改属性保存着一个nodeList对象,他表示所有子节点的列表
    nodeList是一种类数组对象,用于保存一组有序的节点,用户可以通过下标位置来访问这些节点。虽然childNodes可以通过方括号雨来来访问nodeList的值,而且childNodes对象包含一个length属性,他表示列表包含子节点的个数(长度),但childNodes并不是数组,不能够直接调动数组的方法
    注意
    nodeList对象实际上是基于DOM结构动态执行查询的结果,DOM结构的变化能够自动反映在nodeList对象中。因此,我们不能够以动态的方式处理nodeList对象
    示例

    0,2,4,7节点为‘回车’文本节点,
    同理其first、last、next、prev也为“回车”节点

    只获取元素节点

    元素节点操作方法 说明
    children 获取当前元素的所有子元素节点
    children[0] 获取当前元素的第一个子元素节点
    children[el.children.length - 1] 获取当前元素的最后一个子元素节点
    nextElementSibling 获取当前元素的同级前一个元素
    previousElementSibling 获取当前元素的同级下一个元素

    2)访问元素节点

    document对象含多个访问文档内元素的方法

    方法 说明
    getElementById() 通过id获取
    getElementsByClassName() 通过class获取
    getElementsByTagName() 通过tag获取
    querySelector(‘#id’) 通过id获取
    querySelector(‘.className’) 通过className获取第一个对应元素
    querySelector(‘tagName’) 通过TagName获取第一个对应元素
    querySelectorAll('x') 通过x获取所有当前节点内的所有class或tag为x,id也可以(虽然id只能唯一)

    getElementByxxxx只能是document对象调用,那querySelector呢?
    答案是可以的,那么我们可用querySelector,在知道某个节点范围内找出在
    对应的节点
    另外在Selectors API Level 2规范为Element类型新增了一个方法matchesSelector().这个方法接受一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true;否则false。
    例如

    <body id="test">
    <script>
        //Uncaught TypeError: document.body.matchesSelector is not a function
        console.log(document.body.matchesSelector('#test'));
    </script>
    </body>
    

    由于兼容性问题,现在各个浏览器都只支持加前缀的方法。IE9+浏览器支持msMatchesSelector()方法,firefox支持mozMatchesSelector()方法,safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:

    function matchesSelector(element,selector){
        if(element.matchesSelector){
            return element.matchesSelector(selector);
        }
        if(element.msMatchesSelector){
            return element.msMatchesSelector(selector);
        }
        if(element.mozMatchesSelector){
            return element.mozMatchesSelector(selector);
        }
        if(element.webkitMatchesSelector){
            return element.webkitMatchesSelector(selector);
        }            
    }
    
    <body id="test">
    <script>
    console.log(matchesSelector(document.body,'#test'));//true
    </script>
    </body>
    

    二、操作节点

    方法 说明
    appendChild() 向节点的子节点列表的结尾添加新的子节点
    cloneNode() 复制节点
    hasChildNodes() 判断当前节点是否拥有子节点
    insertBefore() 在指定的子节点前插入新的子节点
    normalize() 合并相邻的Text节点并删除空的Text节点
    removeChild() 删除(并返回)当前节点的指定节点
    replaceChild() 用新的节点替换一个子节点
    示例 新建一个节点4

    1)appendChild()

    parent.appendChild(child4)
    

    2)cloneNode(include_all)

    ①include_all = false 或默认时

    let child5 = child2.cloneNode()
    parent.appendChild(child5)
    

    可以看到复制的节点仅为其本身,其子节点并没有复制,复制后返回的节点副本属于文档所有,需要通过appendChild()、insertBefore()或replaceChild()方法将他添加到文档中
    ②include_all = true

    let child5 = child2.cloneNode(true)
    parent.appendChild(child5)
    

    3)hasChildNodes()

    parent.hasChildNodes() // 返回true
    
    

    4)insertBefore(newNode,refNode)

    parent.insertBefore(child4,child2)
    

    5)normalize()

    合并相邻的Text节点并删除空的Text节点



    6)removeChild()

    parent.removeChild(node)
    

    7)replaceChild(newNode, oldNode)

    parent.replaceChild(child4,child2)
    

    相关文章

      网友评论

          本文标题:操作DOM—DOM基础

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