JS HTML DOM

　　DOM的全程是Document Object Module，即文档对象模型。一般来说，当一个页面被加载时，浏览器会在内部创建一个当前文档的DOM。就像用python的Etree之类的模块解析xml文件时建立的对象一样，浏览器建立的DOM对象抽象了整个html文件，并且形成了一颗html元素的树。

　　而JS，就被赋予了和这种DOM互动的能力。也就是说，JS可以通过增删改查DOM来实现动态灵活地改变html内容。比如JS可以做到：更改html元素，更改html元素的属性，更改css，对页面上发生的事件作出反应，增删html元素等等。

■　　改变HTML

　　JS可以直接改变HTML元素的内容和元素本身。

●  寻找HTML元素

　　HTML元素是组成html文档的基本单位，所有的操作都应该基于它。在JS中，用document.getElementById(...)方法可以通过ID来定位一个元素，类似的还有document.getElementByTagName("div")这样的方法来通过标签名来定位一个元素以及getElementByClassName的通过类名。此外还有更多的定位方法，这里只是为了后面演示方便先行提一下。

●  改变HTML输出流

　　就像之前文章中所提到的那样，document.write()方法用来向html输出内容，相当于改变html的输出流。需要注意到，既称改变，就是说没有HTML回整个都变成document.write出来的内容，所以当文档全部加载完成之后再进行write的话会把之前所有内容都清空掉再输出新内容。

●  改变HTML内容 innerHTML属性

　　对于一个元素对象来说，其拥有属性innerHTML属性，代表了头标签和尾标签之间的内容。通过改变这个属性的值就可以直接改变html中的内容了。

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

//最终显示的是New Text!因为p的内容被JS改变

●  改变HTML属性

　　除了内容，属性也是HTML很重要的一个组成部分。在DOM中直接用属性名来表示HTML元素的属性。改变某个属性名的值就直接改变了这个属性的值。比如：

<img id="image" src="smiley.gif">

<script>

document.getElementById("image").src="landscape.jpg";

</script>

　　上例中改变了img的src属性，使之指向另一个图片了。

●  改变HTML样式  style属性

　　JS可以通过DOM来改变html元素的CSS。用到的是元素对象的style属性：

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color="blue";

</script>

　　上例中把id是p2的元素的CSS属性color改成了blue。

■　　HTML事件与JS的互动

　　JS可以对HTML上发生的事件作出反应。DOM的事件有很多：http://www.w3school.com.cn/jsref/dom_obj_event.asp

　　常用的就有：

　　　　onclick　　点击

　　　　onload/onunload　　用户进入/离开界面

　　　　onmouseover　　鼠标被移动到某元素上方

　　　　onselect　　文本被选中

　　　　onchange　　输入的内容改变时（比如像input这种标签，当用户敲完键盘离开输入框，光标不在输入框里的时候检测,如果和上一次检测时内容变化则触发此事件）

　　　　……

　　让事件和JS联系起来的一种方式是: 在相关元素的标签内把事件作为一个属性，JS的内容作为这个属性的值写出来。比如<button onclick="alert('Clicked！')">这样在按下这个按钮的时候就会跳出提示框了。另外，一般来说，可以把一些JS操作包装到一个函数中去，然后在事件这里写上这个函数就可以了。

　　*这里牵扯到一个小问题，就是说这个函数内容所在的<script>标签应该放在哪里。因为button本身肯定是放在body标签里面的，所以script标签的位置可以是放在head里、放在body中button前面、放在body中button后面三个选项。实际上三者都可以，因为浏览器加载html的方法是全部加载完再显示的，所以不存在其他编程语言里面那种函数还没定义就调用而报错的事情。比如下例：

<!DOCTYPE html>

<html>

<head></head>

<body>

<h1 onclick="changetext(this)">请点击该文本</h1>

<script>

function changetext(element)

{

element.innerHTML="谢谢!";

}

</script>

</body>

</html>

　　这样的事件和JS的关联方式比较死板，更加灵活的，我们可以在JS里面进行事件的分配，删除等（因为事件本身也是HTML元素的属性，利用JS可以编辑元素的属性这一点就OK了）。比如：

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

　　当myBtn元素本身就有onclick事件时改变事件的响应方式，当没有的时候就为myBtn新分配一个这个事件。

■　　增删HTML元素

●  创建新元素

　　用JS给DOM创建新元素比较麻烦，比如下面这个实例，为某个div元素在尾部创建一个新的p元素：

<div id="div1">

<p id="p1">这是一个段落</p>

<p id="p2">这是另一个段落</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("这是新段落。");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

</script>

　　意思上来说，首先要创建出一个p元素，然后创建出一个文本节点元素，然后把这个文本节点加入（关联）到p中，然后再把这个p元素加入（关联到）div中来。

　　上面用到的方法全是appendChild()这是在当前元素的末尾增加子元素的方法，如果想要在某个指定位置加入子元素的话可以用insertBefore(some_exist_child,new_child)来再some_exist_child前面加上新元素。

●  删除元素

　　同样也是一个实例：

<div id="div1">

<p id="p1">这是一个段落。</p>

<p id="p2">这是另一个段落。</p>

</div>

<script>

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

●  替换元素

　　基本精神和上面两个差不多，用的方法是replaceChild(child)

■　　cookie操作 document.cookie对象

　　先来补补课什么是cookie= =：

　　cookie可以看做是浏览器根据你上网信息自动生成的配置文件，这个文件存放在客户端的本地，每当同一台电脑的用户访问同一个网站的时候，如果设置了那么网站就可以读取相关的cookie来获取一些你的（上次访问时）留下的信息。按照功能来分常用的cookie可能有名字cookie（保存用户的名字），密码cookie（保存用户的密码，安全上有些差），日期cookie等

　　一个实例：（可以看到cookie的文件构造是比较原始的，需要自己手动写=，&之类的东西）

<html>

<head>

<script type="text/javascript">

function getCookie(c_name)

{

if (document.cookie.length>0)

  {

  c_start=document.cookie.indexOf(c_name + "=")

  if (c_start!=-1)

    {

    c_start=c_start + c_name.length+1

    c_end=document.cookie.indexOf(";",c_start)

    if (c_end==-1) c_end=document.cookie.length

    return unescape(document.cookie.substring(c_start,c_end))

    }

  }

return ""

}

function setCookie(c_name,value,expiredays)//参数expiredays设置一个cookie过期的日期

{

var exdate=new Date()

exdate.setDate(exdate.getDate()+expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString())

}

function checkCookie()

{

username=getCookie('username')

if (username!=null && username!="")

  {alert('Welcome again '+username+'!')}

else

  {

  username=prompt('Please enter your name:',"")

  if (username!=null && username!="")

    {

    setCookie('username',username,365)

    }

  }

}

</script>

</head>

<body onLoad="checkCookie()">

</body>

</html>

　　以上实例的功能就是，当用户来到这个界面时，先取cookie，如果cookie没有取到或者cookie中没有username这项配置，那么就弹出一个输入框让用户输入自己的名字并且把这个名字保存到cookie中。如果取到了username的值那么就拿这个值来做一些事情，在这里是弹出欢迎提示框。

　　至于cookie保存在什么地方，用什么格式等等浏览器都帮我们做好了，JS不用管。JS只是把页面和cookie联结起来，而cookie和cookie文件的联结是浏览器的工作。

　　可以看到，虽然JS通过和DOM的互动，已经可以很强大地对HTML做出修改编辑了，但是其方法比较贴近底层而且操作步骤繁琐（从如何解析DOM的角度来看似乎和python里的bs以及xml这些模块的做法有点相像）。不过好在有很多JS的库（把JS的方法进行进一步的包装），利用这些库可以更加简单地利用JS，比如jQuery。我觉得将来即使要用JS，也肯定是用的这些库里的方法和形式，至于JS的本体，肯定有必要了解，但是具体怎么实用，不是很感冒。。

【JS】 Javascript与HTML DOM的互动 寻路的更多相关文章

  1. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  2. 【JS】 Javascript与BOM的互动 寻路

    JS BOM 之前提到过JS和DOM之间的互动方法.而BOM(Browser Object Module)是浏览器的对象模型,它也可以和JS进行互动.也就是说,JS还可以和浏览器进行互动.因为现代主流 ...

  3. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  4. Asm.js: Javascript的编译目标

    正如许多开发者一样,我也为Asm.js的前景而感到兴奋不已.最近的新闻——Asm.js正 在被Firefox支持——引起了我的兴趣.同样感兴趣的还有Mozilla和Epic声明(mirror)他们已经 ...

  5. JavaScript处理HTML DOM

    本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:) HTML DOM - JavaScript处理HTML DOM 获取HTML元素 改变HTML元素 增删HTML元素 添加事 ...

  6. javascript系列之DOM(一)

    原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式 ...

  7. Js之浅谈dom操作

    JavaScript之浅谈dom操作 1.理解dom: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两 ...

  8. Javascript学习二---DOM元素操作

    Javascript 主要包括:JS的语法,DOM和BOM操作以及ECMAScript语法. 1 获取元素的方法 获取元素方法: 通过ID:document.getElementById(); 一个 ...

  9. JavaScript和HTML DOM的区别与联系

    JavaScript和HTML DOM的区别与联系 区别: javascript JavaScript 是因特网上最流行的浏览器脚本语言.很容易使用!你一定会喜欢它的! JavaScript 被数百万 ...

随机推荐

  1. java中servletContextListener、httpSessionListener和servletRequestListener使用整理

    在java web应用中,listener监听器似乎是必不可少的,常常用来监听servletContext.httpSession.servletRequest等域对象的创建.销毁以及属性的变化等等, ...

  2. SDL显示文字

    前面教程里,我们只显示图片,没提到如何显示文字, SDL本身没有显示文字功能,它需要用扩展库SDL_ttf来显示文字.ttf是True Type Font的缩写,ttf是Windows下的缺省字体,它 ...

  3. FFMPEG:H264解码-SDL显示（RGB32、RGB24、YUV420P、YUV422）

    FFMpeg对视频文件进行解码的大致流程 1. 注册所有容器格式: av_register_all()2. 打开文件: av_open_input_file()3. 从文件中提取流信息: av_fin ...

  4. hdu5887 Herbs Gathering

    神他妈随便写写就能过- 暴力枚举每个取不取 两个剪纸: 1.当剩下可用的时间小于最少需要用的时间 跳出 2.当剩下的植物按照理想情况(甚至可以取一部分)得到的极限答案比已经求出的答案大 跳出 #inc ...

  5. java访问权限修饰符

    作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protected √ √ √ × friendly √ √ × × private √ × × × ja ...

  6. Kettle根据时间戳同步数据实现

    1 Kettle总体步骤 由于Kettle自身的特殊性以及在多个步骤中kettle自身处理数据库事务的特殊性,尝试了很多种方案,最终确定暂使用如下方案. 1.使用此方案可以解决kettle本身数据库事 ...

  7. Spring的Bean有哪些作用域？

    Spring的Bean有以下五种作用域: 1.singleton:SpringIOC容器只会创建该Bean的唯一实例: 2.prototype:每次请求都创建一个实例: 3.requset:每次HTT ...

  8. 【BZOJ1146】网络管理（整体二分）

    [BZOJ1146]网络管理(整体二分) 题面 良心洛谷,有BZOJ权限题 题解 要看树套树的戳这里 毕竟是:智商不够数据结构来补 所以, 我们来当一回智商够的选手 听说主席树的题目大部分都可以整体二 ...

  9. 【BZOJ3130】费用流（最大流，二分）

    [BZOJ3130]费用流(最大流,二分) 题面 Description Alice和Bob在图论课程上学习了最大流和最小费用最大流的相关知识. 最大流问题:给定一张有向图表示运输网络,一个源点S和一 ...

  10. HiveQL DML 常用QL示例资料

    hive 2.1.1  DML操作 将文件加载到hive表 //官方指导 LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tabl ...