美文网首页
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

    一、DOM 二、获取元素 三、创建、添加、删除、克隆 元素

  • js小知识3

    一、运算符 1.算数预算符: 加(+)减(-)乘(*)除(/) 模,取余(%); 2.赋值运算符: = ...

  • js小知识点

    js小知识点 整理 js小知识点 (一):获取元素 1:document.getElementById('id名'...

  • 小知识点集汇一

    小知识点集汇一 小知识点 node接口模拟返回 js接口模拟数据 mockjs mocha js 测试框架--教程...

  • 'js'小知识

    朋友们好久不见,俗话说:“一日不见如隔三秋”,咱们已经有好几个秋天没有相见,今天给大家带来一些js小知识点,尽请采...

  • js小知识

    一、循环 循环也叫迭代;有四个部分组成:1:初始化;2:条件;3:语句;4:自增(改变条件); 二、操作属性 . ...

  • JS小知识

    输出语句####

  • js小知识

    1. call、apply和bind的区别 call、apply和bind方法都是函数对象中的方法,用来动态地改变...

  • Js 小知识

    从今天起我将通读Javascripts高级程序设计,并及时记录一些知识点与大家共享

  • 第五章 js-web-api 上

    5-1 从基础知识到web-api JS基础知识:ECMA 262 标准 JS-Web-API:W3C 标准 W3...

网友评论

      本文标题:js小知识3

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