一.创建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. 【20160924】GOCVHelper 图像处理部分（1）

    增强后的图像需要通过图像处理获得定量的值.在实际程序设计过程中,轮廓很多时候都是重要的分析变量.参考Halcon的相关函数,我增强了Opencv在这块的相关功能.      //寻找最大的轮廓     ...

  2. spring schedule

    spring-scheduler.xml文件内容如下: <?xml version="1.0" encoding="UTF-8"?><bean ...

  3. 由“单独搭建Mybatis”到“Mybatis与Spring的整合/集成”

    在J2EE领域,Hibernate与Mybatis是大家常用的持久层框架,它们各有特点,在持久层框架中处于领导地位. 本文主要介绍Mybatis(对于较小型的系统,特别是报表较多的系统,个人偏向Myb ...

  4. ggplot2.multiplot：将多个图形使用GGPLOT2在同一页上

    一页多图 介绍 ggplot2.multiplot是一个易于使用的功能,将多个图形在同一页面上使用R统计软件和GGPLOT2绘图方法.这个功能是从easyGgplot2包. 安装并加载easyGgpl ...

  5. SQL 向上取整、向下取整、四舍五入取整的实例！round、rounddown、roundup

    sql server ==================================================== [四舍五入取整截取] select round(54.56,0) === ...

  6. 怎样在excel中添加下拉列表框

    用excel2013打开要编辑的工作表,例子是一个班级名单,可以看到政治面貌目前还没有填写   接着我们找一个空白处,依次写入政治面貌的可能选项: 群众.共青团员   然后选中“政治面貌”这一列,点击 ...

  7. HTTP笔记之一

    1  URL 统一资源定位符(URL)是资源标识符最常见的格式.大部分的URL都遵循一种标准格式,这种格式包含三个部分. URL的第一部分:方案(scheme),说明了访问资源所使用的协议类型.通常是 ...

  8. Js 类定义的几种方式

    提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for ...

  9. kd tree学习笔记 (最近邻域查询)

    https://zhuanlan.zhihu.com/p/22557068 http://blog.csdn.net/zhjchengfeng5/article/details/7855241 KD树 ...

  10. IAR更改代码字体&快速模板设置。——Arvin

    1.是用软件提供的字体 如果只想简单的设置,可进行如下设置Tools->IDE Options->Editor->Colors and Fonts->Editor Font-& ...