手记
下载APP

js笔记十七之DOM操作-增删改

DOM的赠删改

真是项目中, 我们会在js中动态创建一些html标签, 然后把其增加到页面中

  • document.createElement

在js中动态创建一个html标签

  • appendChild

容器.appendChild(新元素)
把当前创建的新元素添加到容器的末尾位置

  • insertBefore

容器.insertBefore(新元素,老元素)
把当前容器中, 把新元素增加到老元素之前

<body>
    <div id="box2" class="box">2</div>
    <style>
        .box{width:100px;height:100px;border:2px solid #999;}    </style>
    <script>
        // -> 创建元素
        var oDiv = document.createElement('div'),
            oBody = document.getElementsByTagName('body');
        oDiv.id = "box";
        oDiv.className = "box";
        Odiv.innerHTML = "1"
        
        // -> 添加到页面
        // oBody[0].appendChild(oDiv);
        document.body.insertBefore(oDIv,box2);    </script></body>
// -> 真实项目中很多需求都是通过动态常见元素来完成的,其中有一个需求; 解析一个URL地址每一部分的信息(包含问号传递的参数值)// -> 1. 纯字符串拆分截取;// -> 2. 编写强大的正则,捕获到需要的结果;// -> 3. 通过动态创建一个a标签, 利用a标签的一些内置属性来分别获取每一部分的内容;// -> ...var link = document.createElement('a');
link.href = 'http://www.example.com/school/?name=lilei&age=18&sex=0#student';  // -> 此处地址就是我们需要解析的urlconsole.dir(link);// -> hash: 存储了哈希值 '#student'// -> hostname: 域名 'www.example.com'// -> pathname: 路径 '/school/'// -> protocol: 协议 'http:'// -> search: 问号传递参数值没有传递是空字符串 '?name=lilei&age=18&sex=0'
function queryURLParameter(url){    var link = document.createElement('a');
    link.href = url;    var search = link.search,
        obj = {};    if(search.length === 0) return;
    search = search.substr(1).split(/&|=/g);    for(var i=0;i<search.length;i+=2){        var key = search[i],
            value = search[i+1];
        obj[key] = value;
    }
    link = null;    return obj;
    
}console.log(queryURLParameter('http://www.example.com/school/?name=lilei&age=18&sex=0#student'))// -> {name: "lilei", age: "18", sex: "0"}

删 改

  • removeChild

容器.removeChild(元素)
在当前容器中把某一个元素移除掉

  • replaceChild

容器.replaceChild(新元素,老元素)
在当前容器中, 拿新元素替换老元素

  • cloneNode

元素.cloneNode(false/true)
把原有的元素克隆一份一模一样的
false: 只克隆当前元素本身
true: 深度克隆, 把当前元素本身以及元素的所有后代都进行克隆

<style>
    .box{        width: 100px;        height: 100px;        background: #f50;        margin-top: 10px;
    }</style><div class="box" id="box1">1</div><div class="box" id="box2"><span>1</span>2</div><script>
    var box1 = document.getElementById('box1'),
        box2 = document.getElementById('box2');    document.body.removeChild(box1);    // -> 删除元素,移除盒子
    document.body.appendChild(box2.cloneNode()) // -> 克隆盒子并添加到body末尾,但不克隆子元素及内容
    document.body.appendChild(box2.cloneNode(true)) // -> 克隆元素并添加到body末尾,克隆子元素及内容(即使是深度克隆也只是克隆内容和结构,并不会克隆盒子上发生的事件)</script>
  • [set/get/remove]Attribute

给当前元素设置/获取/移除 属性的(一般操作的都是他的自定义属性)
box.setAttribute('myIndex',0)
box.getAttribute('myIndex')
box.removeAttribute('myIndex')

使用 xxx.index=0xxx.setAttribute('index',0) 这两种设置自定义属性的区别?
xxx.index: 是把当前操作的元素当做一个普通对象,为其设置一个属性名(和页面中的html标签没什么关系)
xxx.setAttribute: 把元素当做特殊的元素对象来处理,设置的自定义属性是和页面结构中的DOM元素映射在一起的

<div id="box"></div><script>
    var box = document.getElementById('box');
    box.index = 0; // 与html无关的普通对象
    console.log(box.index) // -> 0
    box.setAttribute('index',100) // 与html存在映射关系的元素对象
    console.log(box.index) //-> 100</script>
  • js中获取的元素对象,我们可以把它理解为两种角色

  1. 与页面html结构无关的普通对象

  2. 与页面html结构存在映射关系的元素对象

  • 元素对象中的内置属性,大部分都和页面的标签存在映射关系:
    xxx.style.backgroundColor = 'xxx';此时不仅把js对象对应的属性值改变了,而且也会映射到页面的html标签上(标签中有一个style行内样式, 元素的样式改变了)
    xxx.className = 'xxx': 此时不仅是把js对象中的属性值改变了,而且页面中的标签增加了class样式类(可以看见的)

  • 元素对象中的自定义属性:
    xxx.index=0: 仅仅是把js对象中增加了一个属性名(自定义的),和页面中的html没啥关系(在结构上看不见)
    xxx.setAttribute: 通过这种方式设置的自定义属性和之前提到的内置属性差不多,都是和html结构存在映射关系的(设置的自定义属性可以呈现在结构上)

// -> 获取当前元素的上一个哥哥元素节点(兼容所有浏览器)// -> curEle: current element// 思路:// 首先获取当前元素的上一个哥哥节点,判断当前获取的节点是否为元素节点(nodeType === 1),如果不是,基于当前获取的节点,找他的上一个哥哥节点...一直到找到的节点为元素节点为止// 如果在查找过程中,发现没有上一个哥哥节点了,则不在继续查找// while(条件){循环体}function prev(curEle){    // 获取当前元素的上一个节点
    var p = curEle.previousSibling;    // 如果存在上一个节点并且该节点不是元素节点
    while(p && p.nodeType !== 1){        // 就再往上一个节点继续查找
        p = p.previousSibling;
    }    // 直到找到返回
    return p;
}// 扩展:// next: 获取下一个弟弟元素节点// prevAll: 获取所有的哥哥元素节点// nextAll: 获取所有的弟弟元素节点// siblings: 获取所有的兄弟元素节点// index: 获取当前元素在兄弟元素节点中的索引// ...



作者:uplyw
链接:https://www.jianshu.com/p/45b19ff83f77


打开App,阅读手记
0人推荐
随时随地看视频慕课网APP