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

创建和删除节点:——核心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));

时间: 2024-10-13 12:26:31

DOM创建和删除节点、HTML DOM常用对象[转]的相关文章

DOM创建和删除节点

一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createElement("a");//<a></a> 2.设置必要属性 newElem.属性名="值"; newElem.innerHTML="文本"; 例如:a.href="http://tmooc.cn";a.in

jQuery DOM操作之删除节点

下面示例可能用到如下HTML代码: <ul>   <li title="t1">苹果</li>   <li>香蕉</li>   <li>橘子</li>   <li>葡萄</li>   <li>草莓</li> </ul> 1.remove()方法: 作用:从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素. 例如,删除上

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

jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('background','red'); find: function( selector ) { var i, ret = [], self = this, len = self.length; if ( typeof selector !== "string" ) {//$('li') //jQ

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

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(f

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

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> 一些变

PHP中利用DOM创建xml文档

DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> <author>金庸</author> <content> <![CDATA[ 天龙八部是金庸写的一本武侠小说,非常好看! ]]> </content> </book> </booklist> 实现步骤:1.创建DOM对象

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

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

一:创建元素节点(添加)    创建元素节点并且把节点作为元素的子节点添加到DOM树上 1.append(): 在元素下添加元素    用法:$("id").append("定义的节点"); 例如:var li1 = $("<li>橘子</li>");    添加属性节点:$("<li class='test'>草莓</li>") 2.appendTo(): 将元素添加到元素里面

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

创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic