2018-11-09 javascript 点击事件
2018-11-09 本文已影响0人
Andy_Lxh
改变内容（点击事件）
document.getElementByID(“some id”)：
这个方法是 HTML DOM 中定义的，用于改变HTML中的内容。
演示
代码如下：
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 在id 是demo的标记那里显示"Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
Javascript 数组
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr = [1,2,3,4,5];//整数数组
//alert(arr);
//alert(arr[4]);
var arr2 = ["html","js","sql","java","test"];//字符串数组
alert(arr2);
alert(length);
</script>
</head>
<body>
</body>
</html>
作业练习
增加段落（子节点）：createElement
删除段落（子节点）：childNodes
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var i = 0;//统计添加按钮的点击次数
function myfunction(){
i++;//i+1
var parent = document.getElementById("div1");//找到id等于div1的盒子
var child = document.createElement("p");//创建一个段落元素
var n = i+1;
child.innerText="这是第"+n+"个段落";//+n+ “+”起到拼接内容作用
parent.appendChild(child);
}
function remove(){
var parent = document.getElementById("div1");//找到div节点
var childs = parent.childNodes;//得到该节点里面的所有子节点
var count = childs.length;//获取该数组里面的元素个数
var lastnode=childs[count-1];//得到最后一个子节点(段落)
parent.removeChild(lastnode);
}
</script>
</head>
<body>
<div id="div1">
<p id="p001">我的第一段javascript</p>
</div>
<button type="button" onclick="myfunction()">创建一个新段落</button>
<button type="button" onclick="remove()">删除一个段落</button>
</body>
</html>
效果如图：
图片示例
图片示例
