创建和删除节点:——核心DOM
   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创建和删除节点、HTML DOM常用对象[转]的更多相关文章

  1. DOM创建和删除节点

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

  2. 创建和删除节点:——核心DOM

    1. 创建单个元素节点:3步:       1. 创建空元素节点对象:          var elem=document.createElement("标签名");      ...

  3. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  4. jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. DOM 创建元素 删除元素(结点)

    创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <script> var para=document. ...

  6. jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. PHP中利用DOM创建xml文档

    DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...

  8. react系列一,react虚拟dom如何转成真实的dom

    react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...

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

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

随机推荐

  1. rosetta common sh: mpiCC command not found解决方法

    在执行多线程编译rosetta时执行: python scons.py bin mode=release extras=mpi -j8 编译安装rosetta 会出现错误sh: mpiCC comma ...

  2. java-EL

    语法 ¥{} 运算符 算数 加+.减-.乘*.除/.模% 比较 大于>.小于<.等于==.不等于!=.empty(判断是否为空,空位true,非空为false)(null 未实例化,&qu ...

  3. Ubuntu 16.04 802.1x 有线连接

    Ubuntu下使用MentoHUST搞定 锐捷校园网认证网络 http://www.linuxidc.com/Linux/2013-10/91157.htm

  4. 多列布局——column-count

    column-count属性主要用来给元素指定想要的列数和允许的最大列数.其语法规则: column-count:auto | <integer> 取值说明: 属性值 属性值说明 auto ...

  5. 如何清除PL/SQL中的缓存

    每次查询前清空缓存10g以上:alter system flush buffer_cache;9i:ALTER SESSION SET EVENTS 'immediate trace name flu ...

  6. 自定义view imageviw

    新建一个类继承imageview package com.exaple.myselfview; import android.content.Context; import android.graph ...

  7. fgets函数

    打开文件 fopen("需要打开的路径") 然后使用fgets函数读取行 #include <stdio.h> #include <stdlib.h> #i ...

  8. Centos7下Rinetd安装与应用

    Linux下做地址NAT有很多种方法.比如haproxy.nginx的4层代理,linux自带的iptables等都能实现.haproxy.nginx就不说了,配置相对简单:iptables配置复杂, ...

  9. 关于treeview手动添加的方法

    1.首先判断有没有父节点,有父节点的,NEW一个父节点然后增加:没有父节点就选当前的节点 treeView2.Nodes.Add(newChildNode); 2.父节点的判断可以用leveL来判断 ...

  10. 图论$\cdot$2-SAT问题

    2-SAT问题是这样的:有$n$个布尔变量$x_i$,另有$m$个需要满足的条件,每个条件的形式都是“$x_i$为真/假或者$x_j$为真/假”.比如:"$x_1$为真或者$x_3$为假“. ...