您的位置：首页 > Web前端 > JavaScript

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

2017-02-21 14:21 447 查看
         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节点的基本操作。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航