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> 直接写在标签内部
  登录

• 3> 不常用
  function login() {
  // 实现点击按钮想做的事情
  }
  var button = document.getElementById('login');
  button.onclick = login;

1， 简单的DOM操作：

• 

  Dom简单操作01.gif

显示
隐藏
我是一个DOM节点，js一会就会操纵我了，呜呜呜

2，DOM操作之图片浏览器

• Dom简单操作02.gif
  
  css代码自己补充吧，这里主要讲js

    ![](src/images/img_01.jpg)
    上一张
    下一张

3，DOM的增删改查：

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

• 

  改写整个文档.gif
  
  

  代码如下：

function writeDom() {
    //注意：这里时直接把整个网页替代成下面这句代码
    document.write(" 
");
}

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);
}