一.创建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. tomcat域名访问配置

    模拟线上环境,在本地以域名访问系统思路 1.首先在hosts文件将域名映射为本地IP 2.假如服务器80端口已被占用,可以用nginx转发,在nginx/vhosts/abc.com加入如下配置 se ...

  2. ASP.NET Core + EF6

    微软推出了全新的 .Net Core,于是我就想着在目前接手的项目中使用这项新技术.但是因为预算的原因,我们所用的数据库是 MySql .但是最新的 EF Core 并不支持 MySql ,所以目前我 ...

  3. 【转】ini载入保存类,操作INI配置文件方便的很

    /****************************************************************** * * ^_^ 恶猫 独门商标 挖哈哈 * * QQ:\> ...

  4. mysql5.6中 order by 多个字段排序问题

    今天用order by排序 后面跟了多个字段,如sql语句: SELECT a.id,a.loginname,a.address,u.id,u.`name`,u.address FROM admin_ ...

  5. JavaIO总结

    Java IO流分为字节流和字符流 下面首先介绍一下字节流 /** * 字节流测试 * @author hc * */ public class Test { public static void m ...

  6. Linq排序，获取前5条数据

    _dic = _dic.OrderByDescending(x => x.Value).ToDictionary(x=>x.Key,x=>x.Value); var Num = _d ...

  7. Linux Shell 批量更换文件名或后缀名

    把下列所有.c的文件名修改为.cc rename .c .cc *.c

  8. sqlAlchemy 按DateTime字段的年或月进行group_by查询

    一.根据”create_date“查询每天的数据 1.查询2016年5月每天的数据 session.query(extract('day', User.create_date).label('day' ...

  9. struts(三) ---OGNL的学习和理解

    OGNL:Object graphic Navgation Language(对象图形的导航语言)

  10. 理解RxJava线程模型

    RxJava作为目前一款超火的框架,它便捷的线程切换一直被人们津津乐道,本文从源码的角度,来对RxJava的线程模型做一次深入理解.(注:本文的多处代码都并非原本的RxJava的源码,而是用来说明逻辑 ...