除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛。就这样,踉踉跄跄、囫囵吞枣似的已经过五关斩六将,到达第十一章。

  书中有几个章节并没有从语法、技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点:

    1.   JavaScript语法相对简单,易学易用,基于该特性,是的JS具有两面性,一方面,容易学习和掌握,使得其能被大家在短时间内接受成为可能;另一方面,易学易用也以为着缺乏高水平的质量控制措施。
    2.   鉴于历史遗留问题(浏览器之争带来的后遗症),使得兼容问题一度成为JS发展路上的一大阻力,所以预留退路很重,简言之,JS代码的健壮性尤为重要。
    3.   JavaScript代码分离。如何做到HTML负责构建页面元素,JavaScript负责行为,CSS负责布局,各司其职,这也是衡量JS语言质量或是开发者素质的标尺。

  

  有了这些隐形的规范,更加有助于编码的规范。

  下面介绍一些常用的方法,用于动态操控HTML元素:

  document.write():

  该方法能够方便快捷地把字符串插入到文档中。

  该方法最大的缺点就是它违背了上面提到的JavaScript分离原则,即使把document.write语句挪到外部函数里,也还是需要在HTML文档的<body>部分使用<script>标签才能使用这个方法,也就是说它的存在很大程度的依赖于HTML中的标签和位置。

  innerHTML:
  该属性用来读、写某给定元素里的HTML内容。

  该属性与document.write()方法功能类似,但是其能够有效实现JavaScript代码从HTML文档中分离出来,而不需要在HMTL文档的<body>部分插入<script>标签。

  举例:

 <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>innerHTML</title>
<script>
window.onload = function(){
vartestdiv = document.getElementById("testdiv");
alert(testdiv.innerHTML);
}
</script>
</head>
<body>
<div id = "testdiv">
<p>This is <em>my</em> content.</p>
</div>
</body>
</html>

  appendChild():

  该方法在指定元素的最后一个子节点之后添加节点。

  举例(借用W3C上的案例):

 <!DOCTYPE html>
<html>
<body>
<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
<button onclick="myFunction()">亲自试一试</button>
<script>
functionmyFunction()
{
var node=document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
}
</script>
</body>
</html>

  执行前界面:

  点击按钮后:

  从两幅图可以看出,在Milk被append到myList1中时,其也会从myList2中消失。

  insertBefore(newElement,targetElement):

  该方法把一个新元素插入到一个现有元素的前面。

  举例:

 <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>document write</title>
<script>
window.onload = function(){
var target = document.getElementById("p2");
var para = document.createElement("p");
para.innerHTML = "我是插队的"
vartestdiv = document.getElementById("testdiv");
testdiv.insertBefore(para,target);
}
</script>
</head>
<body>
<div id = "testdiv">
<p id = "p1">我是第一</p>
<p id = "p2">我是第二</p>
<p id = "p3">我是第三</p>
</div>
</body>
</html>

  执行后:

  appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点来说)。 
  insertBefore方法是在已有的节点前添加新的节点(相对于子节点来说的)。

  本文链接:《初探JavaScript(二)——JS如何动态操控HTML

  如果对你有用,欢迎点赞哦,也欢迎加群讨论。

友情赞助

如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。

    1. 支付宝                          2. 微信

                      

初探JavaScript(二)——JS如何动态操控HTML的更多相关文章

  1. JavaScript (二) js的基本语法 - - 运算符、流程控制

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.运算符 1.一元运算符 ++ -- 都是运算符 ++ 和 -- 可以分为:前+ 和后+ and 前- ...

  2. 初探JavaScript(三)——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  3. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  4. JavaScript二(第一个js程序)

    一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...

  5. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

  6. 初探JavaScript(一)——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  7. js实现动态加载脚本的方法实例汇总

      本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查 ...

  8. Vue.js Ajax动态参数与列表显示

    一.动态参数显示 1.引入js <script type="text/javascript" src="/js/vue.min.js"></s ...

  9. js实现动态添加事件

    js实现动态添加事件 一.实例描述 前一个案例讲了如何在网页中动态添加元素,有时候我们需要添加事件.本例学习如何动态的为元素添加事件. 二.截图 三.代码 <!DOCTYPE html> ...

随机推荐

  1. U8SDK——游戏接入SDK(只接入抽象框架)

    上一篇文章我们说了整个U8 SDK抽象成的设计,那这篇文章,我们就来验证一下,他是否如我们期待的那样,简单灵活. 正如之前所说,对于每个游戏,只需要接入抽象层,而每个渠道SDK的接入,就是该抽象层的一 ...

  2. MongoDB与内存

    来自  http://www.ttlsa.com/mongodb/mongodb-and-memory/# 但凡初次接触MongoDB的人,无不惊讶于它对内存的贪得无厌,至于个中缘由,我先讲讲Linu ...

  3. 图片下载缓存防止OOM

    一  ImageManager ImageMemoryCache(内存缓存).ImageFileCache(文件缓存)    关于Java中对象的软引用(SoftReference),如果一个对象具有 ...

  4. ffmpeg进行视频转换

    参考 Mencoder使用方法 Windows下MEncoder下载和Linux下MEncoder的编译 如何降低FFMpeg.exe使用过程中的Cpu使用率 实际上是通过参数控制服务器上用于ffmp ...

  5. Web Essentials之Browser Link

    返回Web Essentials功能目录 本篇目录 功能 当Browser Link运行时,会有一个菜单注入到你的网站上,Web Essentials可以使用该菜单上所有可用的一套Browser Li ...

  6. STC12C5A60S2笔记1(管脚定义)

    STC12C5A60S2管脚定义 管脚1:标准IO口P1.0.ADC0 模数转换通道0.CLKOUT2 波特率发生器的时钟输出 管脚2:标准IO口P1.1.ADC1 模数转换通道1 管脚3:标准IO口 ...

  7. Windows Phone 8.1上的开发人员请看

    1)SDK选择:如果你是在Windows Phone 8.1上做一个新App, 或者想把7.x/8.0的App移植到8.1上,请使用WinRT SDK,而不是Silverlight.当然Silverl ...

  8. Java多线程5:synchronized锁方法块

    synchronized同步代码块 用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...

  9. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  10. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...