<!doctype html>
<!--
1.js获取html元素:
???1.通过id ??2.通过标签名 ?3.通过类名
2.DOM事件:
??鼠标事件：onmouseout onmouseover onclick onmousedown onmouseup
???-->
<html>
<head>
???<meta charset="utf-8">
???<title>JS-HTML-DOM</title>
???<style type="text/css">
???????#p3 {
???????????color: red;
???????}
???????#p5 {
???????????border: 3px #ff1d1f solid;
???????????padding-right: 10px;
???????????margin-right: 1400px;
???????}
???</style>
???<script type="text/javascript">
???????function change() {//改变css属性
???????????document.getElementById("p3").style.color = "yellow";
???????}
???</script>
</head>
<body>
<p id="p1" class="c1">hello world!!!</p>
<p id="p2">
???我是411盲打鬼才
</p>
<p id="p3">改变css属性，css颜色为红色</p>
<input type="button" value="点击我改变css属性" onClick="change()"/>
<img src="1.jpg" id="img1"/>
<script type="text/javascript">
???var a = document.getElementById("p1");//通过id获得html元素
???a.innerHTML = "hello js!!!";
???document.write("这是js写的!!!");//改变html输出流(绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。)
???document.getElementById("img1").src = "1.gif";//改变html属性
</script>
<p id="p4">这是一段文字</p><!--用js显示和隐藏文字-->
<br/>
<input type="button" value="隐藏文字" onClick="document.getElementById(‘p4‘).style.visibility=‘hidden‘"/>
<br/>
<input type="button" value="显示文字" onClick="document.getElementById(‘p4‘).style.visibility=‘visible‘"/>
<br/>
<p onclick="this.innerHTML=‘要你点你就点，傻逼‘" id="p5">点击此文本</p><!--点击元素改变内容-->
<input type="text" onChange="Upper()" placeholder="输入的文本会变大写" id="input1">
<script>
???function Upper() {//onchange事件
???????var x = document.getElementById("input1");
???????x.value = x.value.toUpperCase();
???}
</script>
<div onMouseOver="over(this)" onMouseOut="out(this)"
????style="border: red solid 2px; width:120px; height: 60px;background-color: green;">
???把鼠标放到这上面!!!
</div>
<script>
???function over(obj) {//onMouseOver和onMouseOut事件
???????obj.innerHTML = "要你放你就放,傻逼!!!";
???}
???function out(obj) {
???????obj.innerHTML = "傻逼，你怎么还走了呢？？？";
???}
</script>
<br/>
<div style="border: red solid 2px; width:120px; height: 140px;background-color: green;" onClick="test(this)">你敢点击我吗？
</div>
<script>
???function test(obj) {
???????if (obj.innerHTML == "你敢点击我吗？") {
???????????obj.innerHTML = "你敢点击我吗？<br>小子胆子真大";
???????}
???????else if (obj.innerHTML == "你敢点击我吗？<br>小子胆子真大") {
???????????obj.innerHTML = "你敢点击我吗？<br>小子胆子真大<br>你还敢点我就算你狠";
???????}
???????else if (obj.innerHTML == "你敢点击我吗？<br>小子胆子真大<br>你还敢点我就算你狠") {
???????????obj.innerHTML = "你敢点击我吗？<br>小子胆子真大<br>你还敢点我就算你狠<br>好，你狠<br>点最后一次！！！";
???????}
???????else {
???????????obj.style.display = "none";
???????}
???}
</script>
<div id="div1">
???<p>这是一个段落!!!
???<p>
</div>
<script>//新增html元素
var a = document.createElement("p");//创建<p>元素
var b = document.createTextNode("这是一个新的段落");//创建文本结点
a.appendChild(b);//<p>元素追加文本结点
var c = document.getElementById("div1");
c.appendChild(a);//向已创建的元素追加这个新元素
</script>
//删除html元素
<div id="div2">
???<p id="p6">这是第一个段落</p>
???<p id="p7">这是第二个段落</p>
</div>
<script>
???var a = document.getElementById("div2");
???var b = document.getElementById("p7");
???a.removeChild(b);
???//找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
???// var child=document.getElementById("p1");
???// child.parentNode.removeChild(child);
</script>
</body>
</html>
js1
原文地址：http://www.cnblogs.com/wantao/p/7965709.html