前端WEB-API 第三天--事件自定义属性和元素的动态创建2、父元素. appendChild（元素）

web-api 实际上来讲一共也就是三天所学的，后面我会讲一些案例，今天将四个至关重要的！

取消事件的默认行为
自定义属性
节点的亲属访问
创建元素

1、取消事件的默认行为

常见的默认行为两种：

 1、 form 表单的提交
 2、a  标签的跳转


 1、 form 表单的提交
<body>
    <!-- 这里我们注册了一个form 表单，然后点击submit 后会发现浏览器地址上面出现？号 -->
    <form action="">
      <input type="submit" />
    </form>
  </body>
  <script>
    // 我们注册一个事件
    var btn = document.querySelector("input");
    btn.onclick = function() {
      // alert会阻塞页面
      alert("点击提交");
    };
  </script>

2、a 标签的跳转

<body>
    <a href="https://juejin.im/editor/drafts/5ca96b91f265da24fb7dd5ca">掘金</a>
  </body>
  <script>
    var btn = document.querySelector("a");
    btn.onclick = function() {
      alert("点击阻隔跳转");
    };
  </script>

事件的默认行为就是：在逻辑执行完毕之后事件还有一些其他的操作就是默认行为

如何取消默认行为呢？只需要在事件处理函数中返回 false

return false //点击按钮事件出发后，不会触发默认行为

 <script>
    var btn = document.querySelector("a");
    btn.onclick = function() {
      alert("点击阻隔跳转");
      return false //点击按钮事件出发后，不会触发默认行为 
    };
  </script>

2、自定义属性

 为什么使用自定义属性
     我们可以自定义属性，用来描述内容，html 支持给任意标签增加任意属性，只要保证属性的名字是
     1、不与系统重名
     2、命名规则是以字母开开头，数字，字母下划线，
     
 </head>
  <!-- 可以再标签中存储数据 但是不影响展示
  从 html5 的规范中开始 所有自定义属性应该使用data - 或 x- 开头
  -->
  <body data-jingjing="我是静静">
    1231
  </body>
</html>

这里可以看到我在添加了自定义属性后并不影响页面展示

我们来讲如何js操作自定义属性 attribute 属性，特性或者简写形式attr 已经要记住attr是简写形式操作读取，和赋值

   <title>Document</title>
  </head>
  <!-- 可以再标签中存储数据 但是不影响展示
  从 html5 的规范中开始 所有自定义属性应该使用data - 或 x- 开头
  -->
  <body data-jingjing="我是静静">
    <button>点击按钮</button>
  </body>
  <script>
    var btn = document.querySelector("button");
    btn.onclick = function() {
      var body = document.querySelector("body");
      var v = body.getAttribute("data-jingjing");
      alert(v);
    };
  </script>
</html>
<!-- 
  自定义属性 

  标签元素.getAttribute('自定义属性名') 读取自定义属性得到
  标签元素.setAttribute('自定义属性名','属性值')

document.body()可以直接获取到页面中的body

标签元素.setAttribute('自定义属性名','属性值')

如果读取的时候，元素没有这个属性，那么就会返回空

  <body>
    <button>点击按钮</button>
  </body>
  <script>
    var btn = document.querySelector("button");
    btn.onclick = function() {
      alert(document.body.getAttribute("data-id"));
    };
  </script>
</html>
<!-- 
  如果读取的时候，元素没有这个属性，那么就会返回空

节点的亲属访问

该知识点也是属于元素查找的范围

 <div class="menu">
  <div>
    <a href="#">主菜单</a>
    <div>
      <a href="#">子菜单</a>
      <a href="#">子菜单</a>
      <a href="#">子菜单</a>
    </div>
  </div>
  <div>
    <a href="#">主菜单</a>
    <div>
      <a href="#">子菜单</a>
      <a href="#">子菜单</a>
      <a href="#">子菜单</a>
    </div>
  </div>
</div>
当我们要做一个这样的菜单按钮的时候 点击主菜单显示和隐藏项目的子菜单的时候，我们就需要亲属访问

重点 ***

 节点的亲属访问
  获取父元素
    元素.praentNode
  获取哥哥
    元素.previousElementSibling
  获得其弟弟
    元素.nextElementSibling
  获得其孩子(注意这里是伪数组)
    元素.children

上面是重点中的重点

访问子节点的简单属性 .firstChild 获取的第一个 .lastChild 获得最后一个

<body>
    <div id="elem">
      <div></div>
    </div>
  </body>
  <script>
    var elem = document.querySelector("#elem");
    var list1 = elem.childNodes;
    var list2 = elem.children;

    console.log(list1);
    console.log(list2);

    var f1 = elem.firstChild;
    var f2 = elem.firstElementChild;

    console.log(f1);
    console.log(f2);

    var l1 = elem.lastChild;
    var l2 = elem.lastElementChild;

    console.log(l1);
    console.log(l2);
  </script>

代码讲解

明确: 所有的元素要么是兄弟关系，要么是父子关系
   <div> 父
      <div>哥哥</div>
      <div>兄弟
        <div>大儿子</div>
        <div>二儿子</div>
        <div>小儿子</div>
      </div>
      <div>弟弟</div>
    </div>

    语法：
      1、获取父元素
          元素.parentNode
      2、获取其哥哥
          元素.previousElementSibling
      3、获得其弟弟
          元素.nextElementSibling
      4、获得其孩子(伪数组)
           元素.children

元素关系到DOM 操作所以下面的要记牢

节点亲属访问菜单案例

  <style>
      div {
        border: 1px solid pink;
      }
      a {
        display: block;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="menu">
      <div>
        <a href="#">主菜单</a>
        <div class="hide">
          <a href="#">子菜单</a>
          <a href="#">子菜单</a>
          <a href="#">子菜单</a>
        </div>
      </div>
      <div>
        <a href="#">主菜单</a>
        <div class="hide">
          <a href="#">子菜单</a>
          <a href="#">子菜单</a>
          <a href="#">子菜单</a>
        </div>
      </div>
    </div>
  </body>
  <script>
    var btns = document.querySelectorAll(".menu > div > a");

    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function() {
        // 通过this 来判断 找到其子菜单 就是nextElementSibling
        var submenu = this.nextElementSibling;
        // 控制它显示与隐藏判断该元素是否含有类样式 hide
        var className = submenu.className;
        // 然后if进行判断
        if (className === "hide") {
          submenu.className = "";
        } else {
          submenu.className = "hide";
        }
      };
    }
  </script>

如果在里面出现问题 return false; 取消a 标签的默认值

菜单案例第二种方法实际中开发使用

<script>
    var menu = document.querySelectorAll(".menu > div > a");
    for (var i = 0; i < menu.length; i++) {
      menu[i].onclick = function() {
        var submenu = this.nextElementSibling;
        var className = submenu.className.split(" ");
        var index = className.indexOf("hide");

        if (index > -1) {
          className.splice(index, 1);
          submenu.className = className.join(" ");
        } else {
          className.push("hide");
          submenu.className = className.join(" ");
        }
      };
    }
  </script>
 
这里解释呢？是使用split进行切割把里面所有的类样式进行切割，
然后使用indexOf找到hide 然后复制给 index 然后判断 index 不等于-1 是没找到 然后在有的有的情况下去掉splice 找到index，里面第一个 然后使用join 进行连接赋值 没有的情况下呢使用puch 追加一个hide 然后 join 连接 赋值

字符串.replace('匹配字符串','替换字符串')

var c = 'c  c0 c1'; //移除c类样式
c = c.replace('c ','')

var c = 'c0 c c1'; //移除c类样式
c = c.replace(' c','')

var c = 'c0 c1 c'; //移除c类样式
c = c.replace(' c', '') 有一个bug

c = (' ' + c + ' ').replace(' c','');
var c = 'c0 c1 c'; //移除c类样式
c = c.replace(' c ',' ');

创建元素重点重点！！！

/*
	问题：
		1、生成标签的时候，不方便处理事件
		2、无法实现追加
*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        padding: 5px;
        margin: 5px 0;
        border: 1px solid pink;
      }
      a {
        display: block;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    var data = [
      {
        menuName: "BAT",
        submenus: [
          { submenuName: "百度", url: "http://www.baidu.com" },
          { submenuName: "阿里巴巴", url: "http://taobao.com" },
          { submenuName: "网易", url: "http://wangyi.com" }
        ]
      },
      {
        menuName: "拼接",
        submenus: [
          { submenuName: "js", url: "http://www.w3cschool" },
          { submenuName: "web", url: "http://www.heihawugong" }
        ]
      }
    ];

    var html = '<div class="menu">\n';
    for (var i = 0; i < data.length; i++) {
      html += "<div>\n";
      html += "<a>" + data[i].menuName + "</a>\n";
      //   html += '<div class="hide">\n';
      //   这时候我们去掉class hide 就会发现
      html += '<div class="">\n';
      for (var j = 0; j < data[i].submenus.length; j++) {
        var url = data[i].submenus[j].url;
        var submenuName = data[i].submenus[j].submenuName;
        html += "<a href=''+ url + ''>" + submenuName + "</a>\n";
      }
      html += "</div>\n";
      html += "</div>\n";
    }
    html += "</div>\n";

    // console.log(html);

    document.querySelector("#container").innerHTML = html;

    /*
		问题：
			1、生成标签的时候，不方便处理事件
			2、无法实现追加
	*/
  </script>
</html>

拿字符串拼接只能一次性处理，无法对每一个标签DOM 对象

对元素的操作重要重要！！！重要！！！！

        1、创建元素
             document.createElement('元素的标签的名字')
	2、追加元素
	    父元素.appendChild('子元素')
	    功能是:将子元素放到父元素的 子元素的结尾处
	3、插入元素
	4、删除元素
	5、修改元素
	6、查询元素

1、 document.createElement('元素的标签的名字')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    var anchor = document.createElement("a");
    anchor.innerHTML = "你好create";
    console.log(anchor);

    var p = document.createElement("p");
    p.innerHTML = "嘿哈java 很难吗？";
    p.style.backgroundColor = "black";
    console.log(p);
  </script>
</html>

2、父元素. appendChild（元素）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <p>111</p>
      <p>222</p>
    </div>
  </body>
  <script>
    var p = document.createElement("p");
    p.innerHTML = "创建的p标签";
    p.style.backgroundColor = "pink";

    var container = document.querySelector("#container");
    // 这里的p是就是DOM 对象对不对 宝贝们，让我们来绑定事件
    container.appendChild(p);

    p.onclick = function() {
      alert("1");
    };
  </script>
</html>

前端WEB-API 第三天--事件自定义属性 和元素的动态创建