精通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开发课时13-14(DOM操作应用)笔记

一、表格应用一、获取表格元素的简便写法: tBodies[] —> getElementByTagName(‘tbody’)[] tHead —> getElementByTagName(‘thead...
  • qq_24719309
  • qq_24719309
  • 2015年07月08日 16:35
  • 171

智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级

表格应用1. 获取tBodies、tHead、tFoot、rows、cells 注意: 一个表格可以有多个tbody (所以tBodies是复数,是一个数组),但是只能有一个thead,一个tfoo...
  • namei33
  • namei33
  • 2015年06月03日 03:45
  • 765

[学习笔记]JavaScript之DOM基础

DOM概述 DOM定义 DOM(文档对象模型,Document Object Model)是W3C组织开发的一套便于操作XML和HTML的JavaScript方法,其将XML和HTML抽象成文...
  • jacobvv
  • jacobvv
  • 2015年01月18日 22:20
  • 1297

【我的JS第三本】JavaScript_DOM编程艺术第二版读书笔记

经过前一段时间HTML&CSS的学习,感觉视频加读书是一个比较不错的学习方法,两者相辅相成,互相补充,所以也准备看看关于JavaScript的书。       2015年12月14日,之前使用韩顺平老...
  • Creabine
  • Creabine
  • 2015年12月14日 21:12
  • 3222

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

一、DOM基础1、什么是DOM Document Object Model定义了访问和处理 HTML 文档的标准方法2、浏览器支持情况 IE 10% Chrome/Safari 60% F...
  • qq_24719309
  • qq_24719309
  • 2015年07月08日 12:09
  • 167

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 307

javascript原生移动云编程1 - 十分钟做出跨平台原生App

只用 10 分钟,同时做出 iOS 和安卓的原生应用,你只需要一个上网的浏览器,只需要粗通一点javascript,就可以在浏览器里写出一个跨平台的原生 App。这项技术是Titanium与码实云编译...
  • mash5
  • mash5
  • 2014年09月10日 19:46
  • 1942

JavaScript(含DOM编程)

1、浏览器的内核和JS引擎 1.1、浏览器内核     网页浏览器的内核就是渲染引擎(renderingEngine),也被称为排版引擎(Layout Engine)或模板引擎。它负责取得网页的内容和...
  • aisemi
  • aisemi
  • 2017年02月16日 15:10
  • 450

什么是DOM?DOM和JavaScript的关系[web开发]

什么是DOM? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们...
  • hqf2009
  • hqf2009
  • 2015年12月18日 16:11
  • 1462

JavaScript_DOM编程艺术第二版学习笔记-第7章

动态创建标记 传统技术:document.write和innerHTML 深入剖析DOM方法:createElement、createTextNode、appendChild和insert...
  • sofia92
  • sofia92
  • 2015年12月16日 09:20
  • 765
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通JavaScript开发课时12(DOM操作应用)笔记
举报原因:
原因补充:

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