创建和删除节点:——核心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的更多相关文章
- DOM创建和删除节点、HTML DOM常用对象[转]
创建和删除节点:——核心DOM 1. 创建单个元素节点:3步: 1. 创建空元素节点对象: var elem=document.createElement("标 ...
- DOM创建和删除节点
一.创建节点 3步 1.创建空元素对象: var newElem=document.createElement("标签名"); 例如:var a=document.createEl ...
- jQuery – 7.动态创建Dom、删除节点
动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 案例:动态生成网站列表 3.prepend,在元素的开始 ...
- jQuery里面的DOM操作(查找,创建,添加,删除节点)
一:创建元素节点(添加) 创建元素节点并且把节点作为元素的子节点添加到DOM树上 append(): 在元素下添加元素 用法:$("id").append("定义的节点& ...
- JS DOM操作(创建、遍历、获取、操作、删除节点)
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- 节点操作-创建并添加&删除节点&替换&克隆节点
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
- jQuery节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...
- 使用DOM解析XML文件,、读取xml文件、保存xml、增加节点、修改节点属性、删除节点
使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...
随机推荐
- java中如何生成可执行的jar文件
java中如何生成可执行的jar文件 最简单的方法就是: jar -cfe Card.jar CardLayoutDemo CardLayoutDemo$1.class CardLayoutDemo$ ...
- Java多线程系列--“JUC原子类”05之 AtomicLongFieldUpdater原子类
概要 AtomicIntegerFieldUpdater, AtomicLongFieldUpdater和AtomicReferenceFieldUpdater这3个修改类的成员的原子类型的原理和用法 ...
- spring 源码分析之BeanPostProcessor
1.官方解答: Factory hook that allows for custom modification of new bean instances, e.g. checking for ma ...
- Hadoop阅读笔记(六)——洞悉Hadoop序列化机制Writable
酒,是个好东西,前提要适量.今天参加了公司的年会,主题就是吃.喝.吹,除了那些天生话唠外,大部分人需要加点酒来作催化剂,让一个平时沉默寡言的码农也能成为一个喷子!在大家推杯换盏之际,难免一些画面浮现脑 ...
- 探秘Tomcat(一)——Myeclipse中导入Tomcat源码
前言:有的时候自己不知道自己是井底之蛙,这并没有什么可怕的,因为你只要蜷缩在方寸之间的井里,无数次的生活轨迹无非最终归结还是一个圆形:但是可怕的是有一天你不得不从井里跳出来生活,需要重新审视井以外的生 ...
- 【转】 制作Android Demo GIF:程序演示效果GIF图录制
在平时写博客或者分享自己写的程序效果的时候经常需要做成GIF图,以下就是介绍几种常用的GIF录制方法: 一.录制工具 1.(生成动画的工具:Ulead GIF Animator),可以讲单独的图片生成 ...
- android中AVD的使用
AVD路径设置 前面提到,不管用Eclipse还是从命令行创建Android Emulator时,相应的文件是被放置到 “C:\Documents and Settings\Administrator ...
- mysql判断一条记录是否存在,如果存在,则更新此语句,如果不存在,则插入
前言,在我们的业务逻辑中,很有可能会遇到这样的情况. 1.我要更新一条记录的值. 2.但是我不确定这条记录存不存在??? 3.那如果存在?我就更新,如果不存在,我就插入! 那么如果这样,一般情况下,我 ...
- SQL Server安全(9/11):透明数据加密(Transparent Data Encryption)
在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...
- C语言学习006:歌曲搜索
#include <stdio.h> #include <string.h> //字符串处理库 ]={ "I left my heart in Harvard Med ...