zoukankan      html  css  js  c++  java
  • JS加强学习-DOM学习04

    7.4 获取节点的属性兼容性

    firstChild:获取父元素的第一个子节点谷歌,火狐都支持的,但是获得的不一定是元素节点,IE8及之前的版本会忽略空白文本。

    firstElementChild:获取父元素的第一个子标签节点,但是IE8及之前的版本不支持。

    lastChild:获取父元素的最后一个子节点谷歌,火狐都支持的,但是获得的不一定是元素节点,IE8及之前的版本会忽略空白文本。

    lastElementChild:获取父元素的最后一个子标签节点,但是IE8及之前的版本不支持。

    像这种属性在不同浏览器显示不一样的情况还有很多,不同的浏览器上所支持的属性不同,我们可以封装在一个函数中,打开不同浏览器时自动判断并选择浏览器想匹配的属性。

    /**
     * 获取当前对象上一个同级元素节点
     * @param object
     * @returns {*}
     */
    function getPreviousSibling(object){
        if(object.previousElementSibling){
            return object.previousElementSibling;
        }else{
            var node = object.previousSibling;
            while(node&&node.nodeType!=1){
                node = node.previousSibling;
            }
            return node;
        }
    }

    /**
     * 获取当前对象下一个同级元素节点
     * @param object
     * @returns {*}
     */
    function getNextSibling(object){
        if(object.nextElementSibling){
            return object.nextElementSibling;
        }else{
            var node = object.nextSibling;
            while(node&&node.nodeType!=1){
                node = node.nextSibling;
            }
            return node;
        }
    }

    /**
     * 获得父元素的第一个子元素节点
     * @param object
     * @returns {*}
     */
    function getFirstChild(object){
        if(object.firstElementChild){
            return object.firstElementChild;
        }else{
            var node = object.firstChild;
            while(node&&node.nodeType!=1){
                node = node.nextSibling;
            }
            return node;
        }
    }

    /**
     * 获得父元素的最后一个子元素节点
     * @param object
     * @returns {*}
     */
    function getLastChild(object){
        if(object.lastElementChild){
            return object.lastElementChild;
        }else{
            var node = object.lastChild;
            while(node&&node.nodeType!=1){
                node = node.previousSibling;
            }
            return node;
        }
    }

    这是几个封装的简单函数,用于匹配浏览器一些属性的。如果这些函数属于同类型的函数,如都是为了获取元素节点的,就可以将这些函数再封装下,创建对象,这些函数作为对象的方法来封装,可以更加方便以后自己维护。

    7.5 克隆及追加节点

    克隆节点:cloneNode(true/false)

    参数为True的时候,是深度克隆,克隆当前对象的一切子节点。
    参数为false的时候,是浅克隆,只会克隆标签,不包含文本信息。

    追加节点:appendChild

    往父级元素的最后追加节点。

  • 相关阅读:
    sudo 做不到的事
    Oracle 用户操作表权限
    CentOS7.2 使用Shell安装Oracle12c
    package-cleanup
    glibc-commons 依赖解析 版本错误,xxx is duplicate yyy
    Centos7.2 编译安装方式搭建 phpMyAdmin
    Jenkins 环境搭建
    awk 使用案例
    Linux文件系统
    用python写一个计算器
  • 原文地址:https://www.cnblogs.com/chendu/p/5751205.html
Copyright © 2011-2022 走看看