一.创建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. 2016年12月18日 星期日 --出埃及记 Exodus 21:13

    2016年12月18日 星期日 --出埃及记 Exodus 21:13 However, if he does not do it intentionally, but God lets it hap ...

  2. SQL Server 2012 管理新特性：AlwaysOn【转】

    http://jimshu.blog.51cto.com/3171847/871169 见超链接

  3. Quality assessment and quality control of NGS data

    http://www.molecularevolution.org/resources/activities/QC_of_NGS_data_activity_new table of contents ...

  4. Shell 语法之结构化命令(流程控制)

    许多程序在脚本命令之间需要某种逻辑流控制,允许脚本根据变量值的条件或者其他命令的结果路过一些命令或者循环执行这些命令.这些命令通常被称为结构化命令.和其他高级程序设计语言一样,shell提供了用来控制 ...

  5. JQuery基础核心

    一.代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的. 而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执 ...

  6. [SoapUI] JDBC 请求连接SQL Sever，MySQL

    MySQLDriver: com.mysql.jdbc.DriverConnection string: jdbc:mysql://localhost:3306/xxx?user=xxx&pa ...

  7. json和xml数据的解析

    一 json数据 1一条json就像一个对象,也想像OC中的数组,且内嵌了很多键值对字典 {"name" : "jack", "age" : ...

  8. java 获取项目绝对路径

    String classPath = Thread.currentThread().getContextClassLoader().getResource("").getPath( ...

  9. drupal前端开发的第一点

    就是把admin/config/development/performance下面的选项全部去掉,方便作为一个匿名用户来访问,不用每次都drush cc all.

  10. OneProxy的功能与限制

     数据库中间件的核心目的之一就是尽可能透明的线性扩展数据库能力.其主要功能介绍参考(http://www.onexsoft.com/zh/oneproxy.html). 但是透明只是相对的,下面就简要 ...