精通JavaScript开发课时12(DOM操作应用)笔记

原创 2015年07月08日 11:00:02

一、创建、插入和删除元素

1、创建DOM元素

  • createElement(‘标签名’)——创建一个节点
  • appendChild(节点)——追加一个节点

例如:

var oTxt = document.getElementById('txt1');
var oUl = document.getElementById('ul1');
var oBtn = document.getElementById('btn1');

oBtn.onclick=function ()
{
    var oLi=document.createElement('li');
    oLi.innerHTML=oTxt.value;

    //父级.appendChild(子节点);
    oUl.appendChild(oLi);
};

2、插入元素

  • insertBefore(节点,原有节点)——在已有元素前插入
  • 在ie下如果第二个参数的节点不存在,会报错;
    在其他标准浏览器下如果第二个参数的节点不存在,则会以appendChild的形式进行添加,不报错。
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1');

oBtn.onclick=function ()
{
    var oLi=document.createElement('li');
    var aLi=oUl.getElementsByTagName('li');

    oLi.innerHTML=oTxt.value;

    //父级.appendChild(子节点);
    //oUl.appendChild(oLi);
    if(aLi.length>0)
    {
        oUl.insertBefore(oLi, aLi[0]);
    }
    else
    {
        oUl.appendChild(oLi);
    }
};

3、删除元素

  • removeChild(节点)——删除一个节点
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');

for(var i=0;i<aA.length;i++)
{
    aA[i].onclick=function ()
    {
        oUl.removeChild(this.parentNode);
    };
}

二、文档碎片

文档碎片可以提高DOM操作性能(理论上)

  • document.createDocumentFragment()
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment();

for(var i=0;i<10000;i++)
{
    var oLi=document.createElement('li');
    oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);

相关文章推荐

精通JavaScript开发课时11(DOM基础)笔记

一、DOM基础1、什么是DOM Document Object Model定义了访问和处理 HTML 文档的标准方法2、浏览器支持情况 IE 10% Chrome/Safari 60% F...

智能社JavaScript学习笔记——12-DOM操作应用

创建、插入和删除元素1. 创建DOM元素createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 (添加到末尾) //父级....
  • namei33
  • namei33
  • 2015年05月28日 16:23
  • 380

第14课时 DOM基础概念、操作

DOM:Document object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中打个元素。 DOM会把文档看做是一棵树...

javaScript笔记(十七) DOM操作表格及样式

DOM操作表格及样式 DOM在操作生成HTML上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了。本章主要了解一下DOM操作表格和样式的一些知识。   一...
  • sliujin
  • sliujin
  • 2016年08月14日 22:06
  • 97

JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件

序言     事件就是操作检测与脚本执行的组合, 或者给予检测到的操作类型在某个对象上调用监听器. 术语     事件: onclick只是一个对象的属性,而不是一个事件,只是通过它可以为DOM...
  • SyKent
  • SyKent
  • 2012年08月16日 22:57
  • 2017

JavaScript DOM学习笔记5——创建和操作节点

之前学习了DOM中各种节点的访问方法,DOM所包含的内容远不止如此,DOM编程还包括当DOM树已经构建起来之后再添加节点。         1.创建新节点         document对象中包...
  • wawlian
  • wawlian
  • 2011年12月17日 16:06
  • 291

高性能javascript读书笔记之操作DOM

DOM:文档对象模型,是一个独立于语言的,用来操作XML和HTML文档的程序接口(API)。 浏览器通常会把DOM和javascript独立实现,每次连接DOM和ECMAScript,都会被收取“过...

JavaScript学习笔记二十四:操作DOM

JavaScript教程传送门由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。查询DOM最常用的方法是document.getElem...

javascript笔记--(第二十一章)DOM操作表格及样式

操作表格 标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTML DOM来操作。HTML DOM提供了更加方便快捷的方式来操作HTML。 var tabl...

javascript学习笔记3:DOM操作之选取文档元素

Element类型代表该文档中的一个元素;Document类型代表一个HTML或XML文档。Document和Element是两个重要的DOM类。文档节点部分层次结构: 推荐个在线UML作图工具...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通JavaScript开发课时12(DOM操作应用)笔记
举报原因:
原因补充:

(最多只允许输入30个字)