JSDOM模型的样例

参考自：http://www.w3school.com.cn/js/js_htmldom_html.asp

1.查找HTML元素

（1）利用getElementById()方法

实现点击元素改变文字内容：

<!doctype html>
<html><head><title>利用id方法查找</title><meta charset = 'utf-8'></head><body><span id = 'www' onclick = 'change()'>这是要改变的文字</span></body><script>function change(){var pass = document.getElementById('www')pass.innerHTML = '我已经改变你了，哈哈！！！'}</script>
</html>

（2）利用getElementsByTagName()方法

实现点击元素改变文字内容：

<!doctype html>
<html><head><title>利用TagName方法查找</title><meta charset = 'utf-8'></head><body><p onclick = 'change()'>这是要改变的文字</p><p>不要改变我啊！！！</p></body><script>function change(){var pass = document.getElementsByTagName('p')pass[0].innerHTML = '我已经改变你了，哈哈！！！'pass[1].innerHTML = '我已经改变你了，哈哈！！！'}</script>
</html>

（3）利用getElementsByClassName()方法

（4）利用getElementsByName()方法

注意：凡是有s的函数，都返回对象的几个，只有第一个函数返回一个对象。

这些方法参考自：http://blog.csdn.net/ernijie/article/details/51332534

2.改变HTML文档

（1）改变HTML文档输出流：

直接利用write函数

创建了一个覆盖文档的例子和一个不会覆盖当前文档的例子：

<html><head><title>利用TagName方法查找</title><meta charset = 'utf-8'><script>function recreate(){document.write('糟糕！！！重新创建了一个文档！！！')}</script></head><body><p οnclick='recreate()'>这是原生段落</p></body><script>document.write('这是新加进来的段落')</script>
</html>

（2）改变HTML文档内容，利用innerHTML

前面的例子也多有用到，也可以参考这个http://blog.csdn.net/f156207495/article/details/78125332

（3）改变HTML属性

实现图片src属性的变换

可以利用document.geetElementById('xx').src来改变

<!doctype html><html><head><title>这是利用js来实现根据不同的日期更新图片</title><meta charset ='utf-8'></head><body><img src="0" alt="这是图片" id='weekday'></body><script language="JavaScript"> var MyDate = new Date()var num = MyDate.getDay()var tx = new Array(7)document.write(num)tx[1]='tx_array\\1.jpg'tx[2]='tx_array\\2.jpg'tx[3]='tx_array\\3.jpg'tx[4]='tx_array\\4.jpg'tx[5]='tx_array\\5.jpg'tx[6]='tx_array\\6.jpg'tx[0]='tx_array\\7.jpg'var week = document.getElementById('weekday')week.src = tx[num]</script>
</html>

3.改变元素的样式属性，即CSS

点击元素，文字变红。

可以利用document.getElementById.style.某个属性=***

<!doctype html><html><head><title>改变HTML元素的样式属性</title><meta charset ='utf-8'></head><body><p onclick = 'change()'>这是需要改变的文字，看我变红变红！！！</p></body><script language="JavaScript"> function change(){document.getElementsByTagName('p')[0].style.color = 'red'}</script>
</html>

4.对HTML事件做出反应

前面已经有很多对事件的处理样例了，这里说一下在JavaScript中增加事件属性。

<!DOCTYPE html>
<html>
<head>
</head>
<body><p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p><button id="myBtn">点击这里</button><script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script><p id="demo"></p></body>
</html>

5.添加或修改HTML元素

添加和删除HTML元素混合在一个代码里了：

<!doctype html>
<html><head><title>HTML元素的添加和查找</title><meta charset = 'utf-8'></head><body><div id = 'pp'><p id ='p1'>这是一个段落</p><p id = 'p2'>这是第二个段落</p></div></body><script>var para = document.createElement('p');var node = document.createTextNode("这是新段落")para.appendChild(node)var element = document.getElementById('p2')element.appendChild(para)//添加新段落var parent = document.getElementById('pp')var child = document.getElementById('p2')parent.removeChild(child)//删除段落</script>
</html>

添加HTML元素要先创建一个p元素，然后创建文本节点，再向p元素添加该文本节点，然后找到一个父节点，再向该父节点中添加该p元素即可。

删除HTML元素要先找到删除节点所在的父节点，然后再找到需要删除的节点，然后再用removeChild这个语法来删除该元素