js小知识3

一、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);       深度克隆
        所有东西全都克隆
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、运算符 1.算数预算符: 加(+)减(-)乘(*)除(/) 模,取余(%); 2.赋值运算符: = ...
    形象代言人阅读 128评论 0 0
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,441评论 0 44
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,360评论 0 8
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,673评论 18 503
  • 学佛话题 『如何一边精进修行,一边认真做世间事业,两者的相融。』 通过学习『竹庆本乐仁波切《佛陀佛陀请开门》』三点...
    简之_阅读 635评论 0 0