一.创建DOM元素

createElement：document.createElement(' 所要创建的元素标签名')；

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<input id="txt" type="text"></input>                            /*创建input文字编写内容*/
<input id="btn" type="button" value="获取"></input>      /*按钮获取*/
<ul id="ul1">
</ul>
<script type="text/javascript">
window.onload=function () {
var oBtn=document.getElementById('btn');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt');

oBtn.onclick=function()
{
var aLi=document.createElement('li');             /*创建li元素*/
var oLi=oUl.getElementsByTagName('li');           /*需要知道往谁前面插，把ul中所有的li都选出来*/           
aLi.innerHTML=oTxt.value;                             /*将input中的文字添加到li中*/
if (oLi.length>0) {                                      /*兼容性考虑，若ul中本没有li，IE会出错，若本没有li，则先给其添加一个li （appendChild）*/
oUl.insertBefore(aLi,oLi[0]);                     /*将新li插入到数组首元素之前，改变顺序，先加入的元素在前出现*/
}
else
{
oUl.appendChild(aLi);                               /*添加到oUl的子节点下*/
}

}
}
</script>
</body>
</html>

知识点：document.creatChild('标签名')

元素添加到末尾：父级.appendChild（子节点）

插入元素：父级.insertBefore（子节点，在谁之前）

用if...else判断父级开始是否有元素存在来消灭兼容

只创建（creatChild）不添加（appendChild）是看不到效果的，只创建是创建到内存空间中去，添加到父级元素上才有效。

二.删除DOM元素

父级.remove(子节点)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<ul id="ul1">
<li>kebgkejgb<a href="#">删除</a></li>
<li>o84ythou<a href="#">删除</a></li>
<li>565eg<a href="#">删除</a></li>
<li>ohinci<a href="#">删除</a></li>
</ul>
<script type="text/javascript">
window.onload=function () {
var oA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1')

for (var i = 0; i < oA.length; i++) {
oA[i].onclick=function()
{
//删除this.parent
oUl.removeChild(this.parentNode);  
}
}
}
</script>
</body>
</html>

知识点：删除的是<a>的父节点，删除后<li>直接消除，不是隐藏

三.文档碎片

可以提高DOM操作性能（理论上）（几乎看不到）

createDocumentFragment 创建文档碎片

提高插入DOM元素的性能。

javascript之DOM篇二（操作）的更多相关文章

  1. Javascript-- jQuery DOM篇(二)

    DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素.匹配元素的下级元 ...

  2. javascript之DOM篇一

    一.什么是DOM DOM是用来操作页面,如div的获取,修改样式 二.DOM节点 标签(css)=元素(js)=节点(DOM) 1.子节点 childNodes 仅算父元素下的第一层 <!DOC ...

  3. JavaScript笔记基础篇(二)

    基础篇主要是总结一些工作中遇到的技术问题是如何解决的,应为本人属于刚入行阶段技术并非大神如果笔记中有哪些错误,或者自己的一些想法希望大家多多交流互相学习. 1.ToFixed()函数 今天在做Birt ...

  4. web前端----JavaScript的DOM（二）

    前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...

  5. JavaScript 关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAscript:JavaScript的标准语法.包括变量,表达式,运算符,函数,if语句,for语句等. DOM:文档对象 ...

  6. javascript 之DOM篇

    要怎么样的开场白才能使我有力气再更新学习进度呢?啊啊啊啊啊,表示好累啊~~~默念“棒棒棒,我最棒~”召唤精气神开总结敲字咯.哈哈哈. --------------------------------- ...

  7. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  8. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. ［转］Setup-Subversion-1.6.5+TortoiseSVN-v1.6.5

    转载地址:http://xietingfengsxm.blog.163.com/blog/static/994118512010729111624385/ 开发环境: myEclipse6.5+ecl ...

  2. SpringMVC框架的基础知识；

    首先 在javaEE环境下,建立一个动态的web工程: 导入架包.... 建立一对多映射关系的封装类,这儿只写属性,getter和setter方法就不写了: 1: private String pro ...

  3. php: 学习记录

    1.get_object_vars($obj) 获取对象$obj的属性数组 2.类和对象 <?php // 类和对象 echo "类和对象" . "\n" ...

  4. 程序设计入门——C语言 第3周编程练习 2 数字特征值（5分）

    2 数字特征值(5分) 题目内容: 对数字求特征值是常用的编码算法,奇偶特征是一种简单的特征值.对于一个整数,从个位开始对每一位数字编号,个位是1号,十位是2号,以此类推.这个整数在第n位上的数字记作 ...

  5. centos 安装redis自启动要点

    1.redis.conf a.daemonize yes b.pidfile /var/run/xxx.pid 2./etc/init.d/redis //加了下面三个注释部分,才支持设置开机自启动 ...

  6. aws ftp

    amazon ec2 运行后,可以用key pair ssh到终端, 不得不承认key pair是很安全的一种方式, 但是安全意味着麻烦,要登陆ssh必须随身带着key pair, 不过个人见意还是不 ...

  7. Lambert漫反射.BLinnPhong及Phong模型 Unity自带的在Lighting.cginc里

    1.漫反射 此模型属于经验模型,主要用来简单模拟粗糙物体表面的光照现象 此模型假设物体表面为理想漫反射体(也就是只产生漫反射现象,也成为Lambert反射体),同时,场景中存在两种光,一种为环境光,一 ...

  8. Linux运行级详解

    对于那些在DOS/Win9x/NT平台下的高级用户而言,Linux似乎是一个怪物.没有config.sys,没有 autoexec.bat,具有个人特色的机器配置不知道从何开始. 需要说明的是,很多人 ...

  9. (37) 在命令行调用API

    l 前言 有时为了更好地调整和改动数据会和到cli ,这会给我们带来更高的效率,基于官网的文档很是简单,这里就带大家一起运用 cli l 搭建 在项目下面有文件odoo.py 这个文件 ,对就是用这个 ...

  10. “不支持一个STA线程上针对多个句柄的WaitAll。”的解决方案

    一.异常提示 不支持一个 STA 线程上针对多个句柄的 WaitAll. 出错界面如下图: 二.解决方法 先直接上解决方案吧.其实解决方法很简单如下面的代码直接把main函数的[STAThread]属 ...