js小知识3

2017-10-22  本文已影响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);       深度克隆
        所有东西全都克隆
上一篇下一篇

猜你喜欢

热点阅读