初学JavaScript的操作DOM节点(三)

来源：互联网发布：中国好新歌声网络直播编辑：程序博客网时间：2024/05/15 13:54

DOM全程Document Object Model，即文档对象模型。当浏览器网页被加载时，浏览器自身会创建页面的文档对象模型。HTML DOM模型会被构造成树。

下面是HTML DOM树。JS可以操作HTML的元素、属性、CSS样式以及对页面中的所有事件作出反应。

下面是一个简单JavaScript处理DOM事件代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JavaScript处理DOM事件</title><script type="text/javascript">function fun1(){alert("要开心哦!");}</script></head><body><input type="button" value="点我一下" onclick="fun1()"/></body></html>

一般JS可以查找HTML元素可以通过两种方法：1：通过HTML元素的ID查找HTML元素，这是最常用的一种方法。2：通过HTML元素标签找到HTML元素。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS查找HTML元素</title><script type="text/javascript">x = document.getElementById("h1");document.write(x.innerHTML);document.write("ahha");</script></head><body><p id="h1">hello, JS小哥！</p><script type="text/javascript">var str = document.getElementById("h1");document.write("JS中通过ID获取HTML元素："+str.innerHTML);</script><hr/><div id = "s1"><h3>哈哈</h3><h3>呵呵</h3></div><script type="text/javascript">var st1 = document.getElementById("s1");var st2 = st1.getElementsByTagName("h3");document.write("JS通过标签获取HTML元素（第二个h3标签）："+st2[1].innerHTML);</script></body></html>

下面来说说JS来修改DOM节点的CSS样式。在HTML DOM中允许JS来修改HTML元素中的CSS的样式。其语法为：

document.getElementById(id).style.property = new style

一般修改CSS样式通过ID修改CSS样式。代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JS修改CSS样式</title><script type="text/javascript">function fun1(){document.getElementById("p3").style.fontFamily="Arial";}</script></head><body><h3 id="p1">你好，JS小哥！</h3><script type="text/javascript">document.getElementById("p1").style.color="blue";</script><h3 id="p2">你好，JS小妹！</h3><input type="button" value="修改样式" onclick="document.getElementById('p2').style.color='red' " /><h3 id="p3">hello，JS！</h3><input type="button" value="修改样式" onclick="fun1()"/></body></html>

下面来说一说JS处理DOM节点。JS修改DOM节点的事件有3种，第一种：增加DOM节点；第二种：修改DOM节点；第三种：删除DOM节点。下面用代码来详细说明

第一种：修改DOM节点。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>修改DOM节点</title><script type="text/javascript">function modifyDom(){document.getElementById("txt").innerHTML="用户名:";document.getElementById("userName").value="Peter";}</script></head><body><font id="txt">:</font><input type="text" name="userName" id="userName"/><input type="button" value="修改DOM节点" onclick="modifyDom()"/></body></html>

第二种：增加DOM节点。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>增加DOM节点</title><script type="text/javascript">function addBeforeDom(){var fatherNode = document.getElementById("d1");var sonNode = document.getElementById("d2");var param = document.createElement("p");var node = document.createTextNode("前置节点...");param.appendChild(node);fatherNode.insertBefore(param, sonNode);}function addAfterDom(){var fatherNode = document.getElementById("d1");var sonNode = document.getElementById("d2");var param = document.createElement("p");var node = document.createTextNode("后置节点...");param.appendChild(node);fatherNode.appendChild(param);}</script></head><body><div id="d1"><div id="d2"><p>这是一个节点</p></div></div><input type="button" value="增加前置DOM节点" onclick="addBeforeDom()" /><input type="button" value="增加后置DOM节点" onclick="addAfterDom()" /></body></html>

第三种：删除DOM节点。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>删除DOM节点</title><script type="text/javascript">function deleteDom(){var father = document.getElementById("d1");var son = document.getElementById("d2");father.removeChild(son);}</script></head><body><div id = "d1"><div id = "d2"><p>这是一个节点</p></div></div><input type="button" value="删除DOM节点" onclick="deleteDom()" /></body></html>

好了，这就是JS中对DOM节点的基本操作。

0 0