美文网首页
js小知识3

js小知识3

作者: 晓箬 | 来源:发表于2017-10-22 14:06 被阅读0次

    一、DOM

    DOM(Document Object Model)  文档对象模型
        操作文档
        元素=标签=节点
        DOM树(节点关系)
    
    oEle.tagName        获取元素的名字
        节点:
            标签节点
            文本节点
    
        判断节点类型
            oEle.nodeType
                1       标签节点
                3       文本节点
                9       document
    

    二、获取元素

    
            通过id获取一个元素
            document.getElementById()   
            通过标签名获取一个元素
            oEle.getElementsByTagName()
            通过class获取一个元素
            oEle.getElementsByClassName()
            html
            document.documentElement
            body
            document.body
    
        通过节点关系获取
            获取子节点
                获取第一层子节点
                oParent.children
                获取标签和文本节点
                oParent.childNodes(不推荐)
            获取父节点
                获取结构上父级
                obj.parentNode 
                    最大是document,再往上是null
                获取定位上父级
                obj.offsetParent
                    最大是body,再往上是null
            获取兄弟节点
                上一个兄弟节点
                    兼容高级浏览器
                    oEle.previousElementSibling
                    兼容IE678
                    oEle.previousSibling
                    兼容写法
                    oEle.previousElementSibling||oEle.previousSibling
                下一个兄弟节点
                    兼容高级浏览器
                    oEle.nextElementSibling
                    兼容IE678
                    oEle.nextSibling
                    兼容写法
                    oEle.nextElementSibling||oEle.nextSibling
            获取首尾子节点
                获取首子节点
                    兼容高级浏览器
                    oParent.firstElementChild
                    兼容IE678
                    oParent.firstChild
                    兼容写法
                    var oFirst = oParent.firstElementChild||oParent.firstChild;
    
                    oParent.children[0];
    
                获取尾子节点
                    兼容高级浏览器
                    oParent.lastElementChild
                    兼容IE678
                    oParent.lastChild
                    兼容写法
                    var oFirst = oParent.lastElementChild||oParent.lastChild;
    
                    oParent.children[oParent.children.length-1]
    

    三、创建、添加、删除、克隆

    元素

    创建
            document.createElement('标签名');
        添加
            添加到父级的最后
            父级.appendChild(子级);
            在某个元素之前插入
            父级.insertBefore(要插入的元素,谁之前);
        删除
            父级中删除子级
            父级.removeChild(子级);
    克隆
        oEle.cloneNode();           克隆元素
            只有标签,没有内容。
        oEle.cloneNode(true);       深度克隆
            所有东西全都克隆
    

    相关文章

      网友评论

          本文标题:js小知识3

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