H5学习05之JS的DOM操作

本篇内容：

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">
    ![](src/images/img_01.jpg)
    <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);
}

H5学习05之JS的DOM操作

0，简单介绍：

1， 简单的DOM操作：

2，DOM操作之图片浏览器

3，DOM的增删改查：

3.1， 改写整个文档，覆盖型：

3.2，增加dom

3.3, 移除dom

推荐阅读更多精彩内容

1，简单的DOM操作：

3.1，改写整个文档，覆盖型：