初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《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>标签。

  举例:

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 4 <title>innerHTML</title>
 5 <script>
 6 window.onload = function(){
 7     vartestdiv = document.getElementById("testdiv");
 8     alert(testdiv.innerHTML);
 9 }
10 </script>
11 </head>
12 <body>
13 <div id = "testdiv">
14 <p>This is <em>my</em> content.</p>
15 </div>
16 </body>
17 </html>

appendChild():

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
 5 <ul id="myList2"><li>Water</li><li>Milk</li></ul>
 6 <p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>
 7 <button onclick="myFunction()">亲自试一试</button>
 8 <script>
 9 functionmyFunction()
10 {
11 var node=document.getElementById("myList2").lastChild;
12 document.getElementById("myList1").appendChild(node);
13 }
14 </script>
15 </body>
16 </html>

  执行前界面:

  点击按钮后:

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

insertBefore(newElement,targetElement):

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

  举例:

 1 <html>
 2 <head>
 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 4 <title>document write</title>
 5 <script>
 6 window.onload = function(){
 7 var target = document.getElementById("p2");
 8     var para = document.createElement("p");
 9     para.innerHTML = "我是插队的"
10     vartestdiv = document.getElementById("testdiv");
11     testdiv.insertBefore(para,target);
12 }
13 </script>
14 </head>
15 <body>
16 <div id = "testdiv">
17 <p id = "p1">我是第一</p>
18 <p id = "p2">我是第二</p>
19 <p id = "p3">我是第三</p>
20 </div>
21 </body>
22 </html>

  执行后:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

超强脑洞第三弹之——ggplot构造瀑布图

对,就是瀑布图,你没看错。而且是使用ggplot现有图层叠加构造,并没有用任何ggplot的外挂插件。 作图理念是在数据源的构造上,方法与《Excel图表之道》...

2893
来自专栏web编程技术分享

js常用方法和一些封装 -- 时间相关(附案例详解)

5717
来自专栏数说工作室

【SAS Says】基础篇:ODS的使用(下)

特别说明:本节【SAS Says】基础篇:SAS软件入门(下),用的是数说君学习《The little SAS book》时的中文笔记,我们认为这是打基础的最好...

2784
来自专栏全沾开发(huā)

使用JavaScript实现一个俄罗斯方块

使用JavaScript实现一个俄罗斯方块 清明假期期间,闲的无聊,就做了一个小游戏玩玩,目前游戏逻辑上暂未发现bug,只不过样子稍...

3736
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

8686
来自专栏lonelydawn的前端猿区

一款不可多得的火柴时钟

? 火柴时钟 一款有意思的时钟玩具,原生代码编写,使用 CSS 渲染过渡动效,引入 base64 格式 data url 图片。 引用 <link rel=...

3027
来自专栏小狼的世界

YUI3 CSS框架学习

改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构...

1103
来自专栏web编程技术分享

js常用方法和一些封装(2) -- 随机数生成

35910
来自专栏听雨堂

MapX中取得图元操作的速度测试

        最常见的操作,是取得图层中的某个图元。假如需要根据一个属性(无重复)来获得图元的话,发现速度相差极大。 遍历比较是最慢的。 用图层的search...

1976
来自专栏24K纯开源

QT中获取选中的radioButton的两种方法

QT中要获取radioButton组中被选中的那个按钮,可以采用两种如下两种办法进行: 方法一:采用对象名称进行获取 代码: 1 QRadioButt...

2405

扫码关注云+社区

领取腾讯云代金券