请关注“知了堂学习社区”,地址:http://www.zhiliaotang.com/portal.php
1.查找HTML元素
a.通过标签名
var x = document.getElementsByTagName("p");
b.通过类名
var x = document.getElementsByClassName("p");
c.通过id
var x = document.getElementById("intro");
如果找到该元素,则该方法将以对象(在x中)的 形式返回该元素;
如果未找到该元素,则x将包含null;
2.改变HTML内容
a.innerHTML
b.innerText,只改变文本内容
document.getElementById(id).innerHTML = 新的HTML
document.getElementById(id).innerText = 新的文档内容
3.改变HTML属性
document.getElementById(id).attribute = 新属性值
4.改变HTML样式
document.getElementById(id).style.property = 新样式
//加入class样式表
document.getElementById(id).className = "类名"
5.创建HTML元素节点
a.需要document.createElement(节点名称)
b.子父关系,node.appendChild(节点对象)
6.删除HTML元素节点
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<div>
<div id="rig">
<p>选择颜色</p>
<p>
<span style="background: red" id="c01">红色</span>
<span style="background: yellow" id="c02">黄色</span>
<span style="background: blue" id="c03">蓝色</span>
</p>
<p>选择宽度</p>
<p>
<span id="s01">100</span>
<span id="s02">150</span>
<span id="s03">200</span>
</p>
<p>选择高度</p>
<p>
<span id="h01">100</span>
<span id="h02">150</span>
<span id="h03">200</span>
</p>
</div>
</div>
<div class="content" id="content"></div>
<script>
window.onload = function(){
var c01 = document.getElementById("c01");
var c02 = document.getElementById("c02");
var c03 = document.getElementById("c03");
var s01 = document.getElementById("s01");
var s02 = document.getElementById("s02");
var s03 = document.getElementById("s03");
var h01 = document.getElementById("h01");
var h02 = document.getElementById("h02");
var h03 = document.getElementById("h03");
c01.onclick = function(){
var content = document.getElementById("content");
content.style.background = "red";
}
c02.onclick = function(){
var content = document.getElementById("content");
content.style.background = "yellow";
}
c03.onclick = function(){
var content = document.getElementById("content");
content.style.background = "blue";
}
s01.onclick = function(){
var content = document.getElementById("content");
content.style.width = 100 +"px";
}
s02.onclick = function(){
var content = document.getElementById("content");
content.style.width = 150 +"px";
}
s03.onclick = function(){
var content = document.getElementById("content");
content.style.width = 200 +"px";
}
h01.onclick = function(){
var content = document.getElementById("content");
content.style.height = 100 +"px";
}
h02.onclick = function(){
var content = document.getElementById("content");
content.style.height = 150 +"px";
}
h03.onclick = function(){
var content = document.getElementById("content");
content.style.height = 200 +"px";
}
}
</script>
</body>
</html>