【JS】 Javascript与HTML DOM的互动寻路

JS HTML DOM

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

DOM 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的互动 寻路

【JS】 Javascript与HTML DOM的互动寻路