1. 创建单个元素节点:3步:
      1. 创建空元素节点对象:
         var elem=document.createElement("标签名");
        比如: var a=document.createElement("a");
          html: <a></a>
      2. 设置新元素的关键属性:
        比如: a.href="http://tmooc.cn";
              a.innerHTML="go to tmooc";
          html: <a href="http://tmooc.cn">go to tmooc</a>
      3. 将新节点挂到DOM Tree的指定父节点下:3种:
        追加:parent.appendChild(elem);
        插入:parent.insertBefore(elem,oldElem);
        替换:parent.replaceChild(elem.oldElem);
   2. 创建多个平级元素节点:3步:
      1. 先创建一个文档片段对象:
         var frag=document.createDocumentFragment();
         文档片段:内存中临时保存一个DOM子树的对象
         何时使用:只要添加多个平级节点时,都要先放入文档片段,再将文档片段整体挂到DOM Tree上
      2. 将子节点先放入文档片段
      3. 将文档片段整体挂到DOM Tree上
        文档片段本身不会出现在DOM Tree上,只会将元素加入DOM树

3. 删除:parent.removeChild(子节点);
        子节点.parentNode.removeChild(子节点);

2. HTML DOM常用对象:
   1. Select对象:
      事件:onchange 选中项发生改变时
      属性:sel.selectedIndex 获得当前选中项的位置
            sel.options 获得sel下所有option元素对象
      方法:sel.add(opt) 将opt追加到sel下
            sel.remove(i) 删除sel下i位置的option元素
      Option对象:
      创建一个新option:var opt=new Option(text,value);
          相当于核心DOM三句话:
               var opt=document.createElement("option");
               opt.value=value;
               opt.innerHTML=text;
      属性:opt.index 获得当前opt所在的位置下标
            opt.text  opt.value: 分别获得innerHTML和value
            opt.selected: 判断当前opt是否被选中!
                 强调:opt的selected不是bool值!
                       但是却可直接作为条件判断

创建option同时,追加到select中:
              sel.add(new Option(text,value));

创建和删除节点:——核心DOM的更多相关文章

  1. DOM创建和删除节点、HTML DOM常用对象[转]

    创建和删除节点:——核心DOM   1. 创建单个元素节点:3步:      1. 创建空元素节点对象:         var elem=document.createElement("标 ...

  2. DOM创建和删除节点

    一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...

  3. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  4. jQuery里面的DOM操作(查找,创建,添加,删除节点)

    一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...

  5. JS DOM操作(创建、遍历、获取、操作、删除节点)

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  6. Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  7. 节点操作-创建并添加&删除节点&替换&克隆节点

    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...

  8. jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作

    一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  9. 使用DOM解析XML文件,、读取xml文件、保存xml、增加节点、修改节点属性、删除节点

    使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...

随机推荐

  1. poj 3352Road Construction(无向双连通分量的分解)

    /* 题意:给定一个连通的无向图G,至少要添加几条边,才能使其变为强连通图(指的是边强联通). 思路:利用tarjan算法找出所有的双联通分量!然后根据low[]值的不同将双联通分量 进行缩点,最后图 ...

  2. java多线程的等待唤醒机制及如何解决同步过程中的安全问题

    /* class Person{ String name; String sex; boolean flag = true; public void setPerson(String name, St ...

  3. nodejs在Liunx上的部署生产方式-PM2

    先安装:npm install -g pm2 (注意:使用它要先安装它,用root账号和全局模式安装一下) 安装完成使用:pm2 -v 查看版本信息 安装成功之后,启动nodejs项目:pm2 sta ...

  4. 碉堡了! 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

  5. Windows Azure HandBook (4) 分析Windows Azure如何处理Session

    <Windows Azure Platform 系列文章目录> 本文是对笔者之前的文章Windows Azure Cloud Service (13) 多个VM Instance场景下如何 ...

  6. 转自coolshell--vim的基本操作

    开始前导语: 在正式转入python开发后,日常的工作中会和大量linux相关命令和工具接触,从另外一个层面,学习的东西相当的多,而VIM在整个的linux体系中所占据的角色就更不用说了,之前在处理g ...

  7. 相同版本的CDH集群间迁移hdfs以及hbase

    前言 由于项目数据安全的需要,这段时间看了下hadoop的distcp的命令使用,不断的纠结的问度娘,度娘告诉我的结果也让我很纠结,都是抄来抄去, 还好在牺牲大量的时间的基础上还终于搞出来了,顺便写这 ...

  8. SUI分页组件和avalon搞定ajax无刷新分页

    <div ms-controller="main"> <h2 class="pagination-centered">{{ title ...

  9. 【阿炬Android笔记】01、调用VitamioBundle播放窗口

    1.调用VitamioBundle播放窗口 Intent intent = new Intent(getApplicationContext(), VideoActivity.class); inte ...

  10. .Net在线付款---Paypal在线付款开发过程

    原文:.Net在线付款---Paypal在线付款开发过程 最近在做一个Web订单项目,项目有一个需求就是集成Paypal与Paydollar在线付款,一开始看到这个需求也是傻了眼,因为以前从来没有做过 ...