创建和删除节点:——核心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 ...
随机推荐
- hdu 1241 Oil Deposits (一次dfs搞定有某有)
#include<iostream> #include<cstring> #include<cstdio> #include<algorithm> us ...
- python--基础学习(二)判断 、循环、定义函数、继承、调用
1.判断 if.elif 代码示范 # coding=utf-8 score = 90 if (score>=90): print("完美") print("优秀& ...
- 浅谈A/B测试里常见的辛普森悖论,企业决策者必看
A/B测试背后有着高深的统计学知识,今天我们就来讲讲常见的辛普森悖论. 辛普森悖论 (Simpson's Paradox) 是英国统计学家 E.H.辛普森 (E.H.Simpson) 于1951年提出 ...
- Windows Azure Cloud Service (1) 用户手册
<Windows Azure Platform 系列文章目录> 下载地址 Cloud Service用户手册
- Windows Azure Virtual Machine (27) 使用psping工具,测试Azure VM网络连通性
<Windows Azure Platform 系列文章目录> 微软Azure在设计架构的时候,从安全角度考虑,是禁用ICMP协议的.所以对于Azure VM,是无法使用ping命令的. ...
- Mybatis学习错误之:重复加载mapper.xml
学习mybatis的时候,突然遇到测试出错.测试mapper代理失败,现在钻研少了,不喜欢看未知的错误了,立即改正.错误打印说mapper.xml已经注册,仔细查看SQLMapConfig.xml发现 ...
- 关于Razor引擎的语法说明
1.在页面上显示字符串的值, 格式:a*@变量名 但@之前必须有空格,{.}等,使得a*不可以构成变量的字符.
- 【原创】Lucene.Net+盘古分词器(详细介绍)
本章阅读概要 1.Lucenne.Net简介 2.介绍盘古分词器 3.Lucene.Net实例分析 4.结束语(Demo下载) Lucene.Net简介 Lucene.net是Lucene的.net移 ...
- nodejs中exports与module.exports的实践
只要是在nodejs中写自己的文件模块就少不了会遇到module.exports和exports的使用,看别人的代码大多都会使用“module.exports=exports=<对象/函数等&g ...
- ligerUI布局时,Center中的Tab高度太小问题解决
1.0 引用的js,css <link href="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel= ...