JS中的DOM操作（三）

目录

 

Tips

节点与元素：

节点的属性:

获取结节点的方法：

节点兼容代码：

元素创建的三种方式

元素绑定多个事件

元素绑定事件的兼容代码

代码

1.案例点击按钮设置div中p标签改变背景颜色

2.节点操作隔行变色

3.切换背景图片

4.全选和全不选的实现

5.点击按钮创建一个图片

6.点击按钮创建列表

7.点击按钮动态创建列表

8.案例点击按钮创建一个表格

9.按钮删除第一个及按钮删除所有元素

10.修改前面的bug，点击按钮最多只创建一个元素

---

Tips

节点与元素：

•     元素:页面中所有的标签,元素---element,  标签----元素---对象；根元素:html标签
•     节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node

---

节点的属性:

(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)

•  nodeType:节点的类型:1----标签,2---属性,3---文本
•  nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
•  nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容

---

获取结节点的方法：

• nodeType--->节点的类型:1---标签,2---属性,3---文本
• nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
• nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容

//ul标签的父级节点
console.log(ulObj.parentNode);
//ul标签的父级元素
console.log(ulObj.parentElement);
console.log(ulObj.parentNode.nodeType);//标签的---1
console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
console.log(ulObj.parentNode.nodeValue);//标签---null
 
//根据属性获取节点
var node=dvObj.getAttributeNode("id");
var dvObj=document.getElementById("dv");
//子节点
console.log(dvObj.childNodes);//7个子节点
//子元素
console.log(dvObj.children);

• 凡是获取节点的代码在谷歌和火狐得到的都是  相关的节点
• 凡是获取元素的代码在谷歌和火狐得到的都是   相关的元素
• 从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
• 获取节点和元素的代码：

var ulObj=document.getElementById("uu");
  //父级节点
  console.log(ulObj.parentNode);
  //父级元素
  console.log(ulObj.parentElement);
  //子节点
  console.log(ulObj.childNodes);
  //子元素
  console.log(ulObj.children);
  console.log("==============================================");
  //第一个子节点
  console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
  //第一个子元素
  console.log(ulObj.firstElementChild);//-----------------IE8中不支持
  //最后一个子节点
  console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
  //最后一个子元素
  console.log(ulObj.lastElementChild);//-----------------IE8中不支持
  //某个元素的前一个兄弟节点
  console.log(my$("three").previousSibling);
  //某个元素的前一个兄弟元素
  console.log(my$("three").previousElementSibling);
  //某个元素的后一个兄弟节点
  console.log(my$("three").nextSibling);
  //某个元素的后一个兄弟元素
  console.log(my$("three").nextElementSibling);


 console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling.innerText);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling.innerText);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);

---

节点兼容代码：

<script>
  //第一个节点和第一个元素的获取的代码在IE8中可能不支持

  //element.firstChild--->谷歌和火狐获取的是第一个子几点
  //element.firstChile--->IE8获取的是第一个子元素
  //element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
  //获取任意一个父级元素的第一个子级元素
  function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      var node=element.firstChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }


  console.log(getFirstElementChild(my$("uu")).innerText);
  console.log(getLastElementChild(my$("uu")).innerText);

  //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
  //前一个节点和前一个元素的获取的代码在IE8中可能不支持
  //后一个节点和后一个元素的获取的代码在IE8中可能不支持

</script>

---

元素创建的三种方式

• document.write("标签的代码及内容");

  <script>
    //document.write("标签代码及内容");
    my$("btn").onclick=function () {
      document.write("<p>这是一个p</p>");
    };
   // document.write("<p>这是一个p</p>");
  
    //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
  </script>

• 对象.innerHTML="标签及代码";

  <script>
    //点击按钮,在div中创建一个p标签
    //第二种方式创建元素: 对象.innerHTML="标签代码及内容";
  
    my$("btn").onclick=function () {
      my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
    };
  </script>

• document.createElement("标签的名字");

  <script>
    //第三种方式创建元素
    //创建元素
    //document.createElement("标签名字");对象
    //把元素追加到父级元素中
    //点击按钮,在div中创建一个p
  
    my$("btn").onclick = function () {
      //创建元素的
      var pObj = document.createElement("p");
      setInnnerText(pObj, "这是一个p");
      //把创建后的子元素追加到父级元素中
      my$("dv").appendChild(pObj);
    };
  
  
  </script>

  ---

  元素绑定多个事件

  //为元素绑定事件(DOM):一种,但是不兼容,有两种
  //1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
  //2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持

  //为按钮绑定点击事件
  //参数1:事件的类型---事件的名字,没有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)
  //参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说

  //为同一个元素绑定多个相同的事件--
//  my$("btn").addEventListener("click",function () {
//    console.log("1");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("2");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("3");
//  },false);
//  my$("btn").addEventListener("click",function () {
//    console.log("4");
//  },false);

  //参数1:事件类型---事件名字，有on
  //参数2:事件处理函数---函数(命名函数,匿名函数)

//  my$("btn").attachEvent("onclick",function () {
//    console.log("1");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("2");
//  });
//
//  my$("btn").attachEvent("onclick",function () {
//    console.log("3");
//  });
</script>

---

元素绑定事件的兼容代码

<script>

  //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
  function addEventListener(element,type,fn) {
    //判断浏览器是否支持这个方法
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });

</script>

代码

1.案例点击按钮设置div中p标签改变背景颜色

<div id="dv">
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <p>这是p</p>
  <span>这是span</span>
  <a href="http://www.baidu.com">百度</a>
</div>
<script src="common.js"></script>
<script>

  my$("btn").onclick = function () {
    //先获取div
    var dvObj = my$("dv");
    //获取里面所有的子节点
    var nodes = dvObj.childNodes;
    //循环遍历所有的子节点
    for (var i = 0; i < nodes.length; i++) {
      //判断这个子节点是不是p标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
        nodes[i].style.backgroundColor = "red";
      }
    }
  };
  //点击按钮,设置p变色---节点的方式做


</script>

2.节点操作隔行变色

<script>
  //隔行变色--li
  my$("btn").onclick = function () {
    var count=0;//记录有多少个li
    //获取ul中所有的子节点
    var nodes = my$("uu").childNodes;
    for (var i = 0; i < nodes.length; i++) {
      //判断这个节点是不是li标签
      if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
        nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
        count++;//8个
        //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
      }
    }
  };

</script>

3.切换背景图片

<script>
  var imgObjs=my$("mask").children;//获取的所有的子元素
  //循环遍历所有img,注册点击事件
  for(var i=0;i<imgObjs.length;i++){
    imgObjs[i].onclick=function () {
      document.body.style.backgroundImage="url("+this.src+")";
    };
  }
</script>

4.全选和全不选的实现

<script>

  //获取全选的这个复选框
  var ckAll = my$("j_cbAll");
  //获取tbody中所有的小复选框
  var cks = my$("j_tb").getElementsByTagName("input");
  //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
  ckAll.onclick = function () {
    //console.log(this.checked);
    for (var i = 0; i < cks.length; i++) {
      cks[i].checked = this.checked;
    }
  };

  //获取tbody中所有的复选框,分别注册点击事件
  for(var i=0;i<cks.length;i++){
    cks[i].onclick=function () {
      var flag=true;//默认都被选中了
      //判断是否所有的复选框都选中
      for(var j=0;j<cks.length;j++){
        if(!cks[j].checked){
          //没选中就进来了
          flag=false;
          break;
        }
      }
      //全选的这个复选框的状态就是flag这个变量的值
      ckAll.checked=flag;
    };
  }

</script>

5.点击按钮创建一个图片

<script>
  //点击按钮,在div中创建一个图片
  my$("btn").onclick=function () {
     my$("dv").innerHTML="<img src='images/liuyan.jpg' alt='美女' />";
  };

</script>

6.点击按钮创建列表

<script>

  //  my$("btn").onclick=function () {
  //    my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li>  <li>张三丰</li></ul>";
  //  };


  var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
  my$("btn").onclick = function () {
    var str = "<ul style='list-style-type: none;cursor: pointer'>";
    //根据循环创建对应对数的li
    for (var i = 0; i < names.length; i++) {
      str += "<li>" + names[i] + "</li>";
    }
    str += "</ul>";
    my$("dv").innerHTML = str;

    //代码执行到这里,li已经有了
    //获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
    var list = my$("dv").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
      //鼠标进入
      list[i].onmouseover = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      list[i].onmouseout = function () {
        this.style.backgroundColor = "";
      };

    }

  };


</script>

7.点击按钮动态创建列表

<script>
  var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];

  //点击按钮动态的创建列表,把列表加到div中
  my$("btn").onclick = function () {
    //创建ul,把ul立刻加入到父级元素div中
    var ulObj = document.createElement("ul");
    my$("dv").appendChild(ulObj);
    //动态的创建li,加到ul中
    for (var i = 0; i < kungfu.length; i++) {
      var liObj = document.createElement("li");
      //设置li中间的文字内容
      liObj.innerHTML = kungfu[i];
      ulObj.appendChild(liObj);
      //为li添加鼠标进入事件
      liObj.onmouseover = mouseoverHandle;
      //为li添加鼠标离开事件
      liObj.onmouseout = mouseoutHandle;
    }
  };

  //此位置.按钮的点击事件的外面
  function mouseoverHandle() {
    this.style.backgroundColor = "red";
  }
  function mouseoutHandle() {
    this.style.backgroundColor = "";
  }

  //如果是循环的方式添加事件,推荐用命名函数
  //如果不是循环的方式添加事件,推荐使用匿名函数


</script>

8.案例点击按钮创建一个表格

<script>

  var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.google.com"},
    {name:"优酷",href:"http://www.youku.com"},
    {name:"土豆",href:"http://www.tudou.com"},
    {name:"快播",href:"http://www.kuaibo.com"},
    {name:"爱奇艺",href:"http://www.aiqiyi.com"}
  ];

  //点击按钮创建表格
  my$("btn").onclick=function () {
    //创建table加入到div中
    var tableObj=document.createElement("table");
    tableObj.border="1";
    tableObj.cellPadding="0";
    tableObj.cellSpacing="0";
    my$("dv").appendChild(tableObj);
    //创建行,把行加入到table中
    for(var i=0;i<arr.length;i++){
      var dt=arr[i];//每个对象
      var trObj=document.createElement("tr");
      tableObj.appendChild(trObj);
      //创建第一个列,然后加入到行中
      var td1=document.createElement("td");
      td1.innerText=dt.name;
      trObj.appendChild(td1);
      //创建第二个列
      var td2=document.createElement("td");
      td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
      trObj.appendChild(td2);
    }
  };

</script>

9.按钮删除第一个及按钮删除所有元素

<script>

  var i=0;
  my$("btn").onclick=function () {
    i++;
   var obj= document.createElement("input");
    obj.type="button";
    obj.value="按钮"+i;
    //my$("dv").appendChild(obj);//追加子元素
    //把新的子元素插入到第一个子元素的前面
    my$("dv").insertBefore(obj,my$("dv").firstElementChild);
    //my$("dv").replaceChild();---自己玩
  };

  my$("btn2").onclick=function () {
    //移除父级元素中第一个子级元素
    my$("dv").removeChild(my$("dv").firstElementChild);
  };

  my$("btn3").onclick=function () {
    //点击按钮删除div中所有的子级元素
    //判断父级元素中有没有第一个子元素
    while(my$("dv").firstElementChild){
      my$("dv").removeChild(my$("dv").firstElementChild);
    }

  };
</script>

10.修改前面的bug，点击按钮最多只创建一个元素

my$("btn").onclick=function () {
    //判断,div中有没有这个按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!my$("btn2")){//如果为true就有
      var obj=document.createElement("input");
      obj.type="button";
      obj.value="按钮";
      obj.id="btn2";
      my$("dv").appendChild(obj);
    }

  };