dom查询的剩余方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <script type="text/javascript">
  6.      window.onload = function(){
  7.        //获取body
  8.        var body = document.getElementsByTagName("body")[0];
  9.        var body = document.body;
  10.        //html根标签
  11.        var html = document.documentElement;
  12.        //获取所有元素
  13.        var all = document.getElementsByTagName("*");
  14.        //根据元素的class
  15.        var box = document.getElementsByClassName("box");
  16.        //获取div中的div
  17.        //querySelector根据css的选择器来选择（强大）总会返回第一个
  18.        var div = document.querySelector(.box div)；
  19.        //选择符合的，返回数组
  20.        var div = document.querySelectorAll(.box)
  22.   </script>
  23.     <title>测试</title>
  24. </head>
  25. <body>
  26. </body>
  27. </html>

dom增删改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <script type="text/javascript">
  6.         window.onload = function(){
  7.     function myClick(idstr,fun){
  8.       var btn = document.getElementsById(idstr);
  9.     }
  10.          //创建广州节点添加到city下
  11.        //1
  12.           myClick("btn",function(){
  13.             var li = document.createElement("li");//需要标签名作为参数，创建新元素节点对象
  14.             var guangzhou = document.createTextNode("Guangzhou");
  15.             li.appendChild(guangzhou);
  16.             var city = document.getElementsById("city");
  17.             city.appendChild(li);
  18.           };)
  20.        //2
  21.           myClick("btn",function(){
  22.           var city = document.getElementsById("city");
  23.             city.innerHTML += "<li>Guangzhou</li>";
  24.              };)
  26.        //3
  27.           myClick("btn",function(){
  28.             var city = document.getElementsById("city");
  29.               var li = document.createElement("li");
  30.               li.innerHTML = "Guangzhou";
  31.             city.appendChild(li);
  32.             };)
  34.     //将广州插入到北京前面
  35.           myClick("btn",function(){
  36.             var li = document.createElement("li");
  37.             var guangzhou = document.createTextNode("Guangzhou");
  38.             li.appendChild(guangzhou);
  39.             var beijing = document.getElementsById("beijing");
  40.             var city = document.getElementsById("city");
  41.                   city.insertBefore(li,beijing);
  42.               };)
  43.      //使用广州替换北京
  44.             myClick("btn",function(){
  45.             var li = document.createElement("li");
  46.             var guangzhou = document.createTextNode("Guangzhou");
  47.             li.appendChild(guangzhou);
  48.             var beijing = document.getElementsById("beijing");
  49.             var city = document.getElementsById("city");
  50.             city.replaceChild(li,beijing);
  51.                 };)
  52.          //删除北京节点
  53.             myClick("btn",function(){
  54.             var beijing = document.getElementsById("beijing");
  55.             var city = document.getElementsById("city");
  56.             city.removeChild(beijing);
  57.               bj.parentNode.removeChild(beijing);//不用他的父亲
  58.                 };)
  59.       //修改北京值
  60.           myClick("btn",function(){
  61.           var beijing = document.getElementsById("beijing");
  62.             beijing.innerHTMl = "Guangzhou";
  63.              };)
  65.   </script>
  66.     <title>测试</title>
  67. </head>
  68. <body>
  69. </body>
  70. </html>

5.1快乐