H5学习05之JS的DOM操作
2017-01-20 本文已影响133人
张不二01
本篇内容：
- 0，简单介绍
- 1， 简单的DOM操作
- 2，DOM操作之图片浏览器
- 3，DOM的增删改查
0，简单介绍：
-
1，节点的基本操作（CRUD）
-
C（Create）：
var div = document.createElement('div');
document.body.appendChild(div); -
R（Read）：
var div = document.getElementById('logo');
var div = document.getElementsByTagName('div')[0];
var div = document.getElementsByClassName('logo')[0]; -
U（Update）：
var img = document.getElementById('logo');
img.src = 'images/01.png'; -
D（Delete）：
var img = document.getElementById('logo');
img.parentNode.removeChild(img); -
2.事件绑定
-
1> 推荐做法
var button = document.getElementById('login');
button.onclick = function() {
// 实现点击按钮想做的事情
}; -
2> 直接写在标签内部
<button onclick="var age = 20; alert(age);">登录</button> -
3> 不常用
function login() {
// 实现点击按钮想做的事情
}
var button = document.getElementById('login');
button.onclick = login;
1， 简单的DOM操作：
-
Dom简单操作01.gif
<body>
<button onclick="alert('显示'); showDomP()">显示</button>
<button onclick="alert('隐藏'); hideDomP()">隐藏</button>
<p id="theP">我是一个DOM节点，js一会就会操纵我了，呜呜呜</p>
<script type="text/javascript">
// 通过标签id获取标签
var p = document.getElementById("theP");
//在函数内部设置标签属性，然后在h5中调用相应的函数即可实现相应功能
function hideDomP() {
// alert(p.tagName);
// p.style = "Display: none";
p.style.display = "none";
}
function showDomP() {
// alert(p.tagName);
// p.style = "Display: block";
p.style.display = "block";
}
</script>
2，DOM操作之图片浏览器
-
Dom简单操作02.gif
css代码自己补充吧，这里主要讲js
<body>
<div class="imTheContainer">
<button class="previous" onclick="changeToPreviousPic()">上一张</button>
<button class="next" onclick="changToNextPic()">下一张</button>
</div>
<script type="text/javascript">
var pic = document.getElementById("theImage");
var i = 1;
function changeToPreviousPic() {
i = i - 1;
if(i<1){
i = 5;
}
var theUrl = "src/images/img_0" + i + ".jpg";
pic.src = theUrl;
}
function changToNextPic() {
i = i + 1;
if(i>5){
i = 1;
}
var theUrl = "src/images/img_0" + i + ".jpg";
pic.src = theUrl;
}
</script>
</body>
3，DOM的增删改查：
3.1， 改写整个文档，覆盖型：
-
改写整个文档.gif
代码如下：
function writeDom() {
//注意：这里时直接把整个网页替代成下面这句代码
document.write(" <div style='width: 200px; height: 200px; background-color: blue'>");
}
3.2，增加dom
-
增加dom.gif
代码如下：
function addDomElement() {
alert("添加节点");
var image = document.createElement("img");
image.src = "src/images/img_01.jpg";
//是在body的最后面进行添加内容
document.body.appendChild(image);
var div01 = document.createElement("div");
//这种方式不行
// div01.width = "200px";
// div01.height = "200px";
// div01.backgroundColor = "blue";
//这个是可以的
div01.style = "width: 200px; height: 200px; background-color: blue";
document.body.appendChild(div01);
//这种可以往标签内部添加内容
var div02 = document.createElement("div");
div02.style = "width:200px; height:200px; background-color: red";
div02.innerHTML = "zhangdanfeng";
var theP = document.getElementById("zhang");
theP.appendChild(div02);
}
3.3, 移除dom
-
移除dom.gif
代码如下：
function removeDomElement() {
//删除一个节点需要先拿到其父节点
var toBeRemoved = document.getElementById("toBeRemoved");
// 1,第一种拿到父节点的方法
// document.body.removeChild(toBeRemoved);
// 2，第二种拿到父节点的方法
toBeRemoved.parentNode.removeChild(toBeRemoved);
}
