JS-DOM . 01 简单了解DOM

DOM概述

　　html加载完毕，渲染引擎会在内存中把html文档生成一个DOM树，getElementById是获取内DOM上的元素，然后操作的时候修改的是该元素的属性


体验事件／事件三要素
1.事件源（引发后续事件的标签
2.事件（js已经定义好，直接使用
3.事件驱动程序（对样式和html的操作）（DOM操作

需求：点击盒子，弹出对话框alert(1)
步骤：-->
1.获取事件源（document.getElementById("box")
2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }
3.书写事件驱动程序。

 <body>

  <div id="box" style="width:100px; height:100px ;background-color:blue ;cursor: pointer;"></div>

 <script>

 //            1.获取事件源（document.getElementById("box"）

     var div = document.getElementById("box");

 //            2.绑定事件 （事件源.事件 = function(){ 事件驱动程序 }）

     div.onclick = function () {

  //            3.书写事件驱动程序。

         alert(1);

     };

 </script>

初试 DOM

执行事件步骤

　　　　A) 获取事件源（有五种）／也可通过节点

1. 1. 　document.getElementsById() // 通过ID
  2. 　document.getElementsByTagName() // 通过标签名

　　　　　　　　a) 获取的一个数组

　　　　　　　　 3.　　document.getElementsByClassName() [0] // 通过类名，没有获取到则返回空数组

　　　　　　　　 4.　　document.getElementsByName()[0] 　　　　// 不能直接操作数组

　　　　　　　　 5.　　document.getElementsByTagNameaNS()[0]

　　　　B) 绑定事件

1. 　　事件源.事件 = function（）｛事件处理函数｝
2. 　　函数不要有返回值，调用的时候不要加括号

1. 事件源.事件 = fn；

2. function fn（）｛

3. 事件；

4. ｝

　　　　　3.　　　行内绑定

　　　　　　　　a) 外部定义好，行内直接调用

　　　C) 书写事件驱动程序

　　操作标签的样式和样式
　　事件源.style.样式属性 = ‘属性值’
　　属性值要用引号括起来

windows.onload：

a) 页面加载完毕（文本和图片都加载完毕）的时候触发的事件

b) js和html同步加载

c) 使用元素在定义之前，容易出bug

d) 作用是防止使用元素在定义元素之前出的bug

通过类名控制标签属性

a) 替换类名和添加类名

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

       * {

         margin: 0;

         padding: 0;

       }

      .top-banner {

          background-color: #7dff51;

          height:80px;

      }

       .w {

           width: 1210px;

           margin:10px auto;

           position: relative;

       }

        img {

            width: 1210px;

            height: 80px;

            background-color: #37c2fb;

        }

        a {

             position: absolute;

             top: 5px;

             right: 5px;

             color: #FFFFFF;

             background-color: #000;

             text-decoration: none;

             width: 20px;

             height: 20px;

             font:700 14px/20px "simsum";

             text-align: center;

        }

         .hide {

             display:none !important;

         }

     </style>

 </head>

 <body>

     <div class="top-banner" id="topBanner">

         <div class="w">

           <img src="" alt=""/>

           <a href="#" id="closeBanner">x</a>

         </div>

     </div>

 <script>

 //    需求：点击案例，隐藏盒子

 //    步骤：

 //    1：获取事件源

 //    2：绑定事件

 //    3：书写事件驱动程序

 //    1.获取事件源

     var closeBanner = document.getElementById("closeBanner");

     var topBanner = document.getElementById("topBanner");

 //    2.绑定事件

     closeBanner.onclick= function(){

 //    3.书写事件驱动

     topBanner.className = "hide"; // 替换旧类名

 //  topBanner.className +="hide" ; // 保留原类名

 //  topBanner.style.display = "none" ;

 }

 </script>

 </body>

 </html>

体验：点击右上角的X ，关闭横福广告

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script>

         // 让页面加载完毕后再执行本代码

     window.onload = function() {

         // 需求：鼠标放到img上，修改图片路径src

         // 1.获取事件源

         var img = document.getElementById("box");

         // 2.绑定事件

         img.onmouseout = function(){

         // 3.设定驱动程序来修改图片地址

             this.src = "image/image1.png" ;

         };

         var img = document.getElementById("box");

         img.onmouseover = function(){

             this.src = "image/image2.png" ;

         }

     }

     </script>

 </head>

 <body>

 <img src="data:image/jd1.png" id="box" style="cursor: pointer;border: 1px solid #ccc;">

 </body>

 </html>

实现鼠标指上去变换图片的特效

什么是DOM和节点

DOM由节点组成
树状模型
节点：object类型，是内置对象

　　　　a) 每个HTML标签都是一个元素节点

　　　　b) 标签中的文字是文字节点

　　　　c) 标签的属性是属性节点

　　4.DOM操作就是操作节点

　　5.是一套操作html和xml文档的API

访问关系获取

节点访问关系是以属性的方式存在的
.parentNode：获取父节点
sibling、Next、previous
.nextElemntSibling
.previousElementSibing：
.firstElementFirstSibling
children（）；返回指定的子元素结合
节点自己.parentNode.Children[index]:得到随意得到兄弟的节点
parenNode
children

节点的操作

　　1. 节点的创建、添加、删除
　　2. 节点的访问关系都是属性，节点的操作都是函数或者方法

 <body>

 <div class="box1">

     <div class="box2" id="box2"></div>

     <div class="box3"></div>

 </div>

 <script>

     //节点的访问关系是以属性形式存在

     //1.box1是box的父节点

 //    var box2 = document.getElementsByClassName("box2")[0];

     var box2 = document.getElementById("box2");

     console.log(box2.parentNode);

父节点

  //  2. nextElementSibling  下一个兄弟节点

        console.log ( box2.nextElementSibling );

       //    firseElementChild  第一个子节点

        console.log (box2.parentNode.firstElementChild ) ;

        //    所有子节点

        console.log( box2.parentNode.childNodes ) ;

        console.log(box2.parentNode.children ) ;

下一个节点

　创建节点

　　　　var 新标签 =document.createElement("标签")

　插入节点

　　　　1. 父节点.removeChild(子节点）

　　　　2. 父节点.appendChild ( ) { }

　　　　3. 父节点.insertBefore ( 新节点，已知节点）

. 删除节点

　　　　父节点.removeChild（’删除的元素（先获取）’）

　　　　父元素.parentNode.removeChild（’要删除的元素’）

. 复制节点

1. 新节点 = 要赋值的节点.cloneNode（true/false）；

　　　　　　　　a) true:全部复制

　　　　　　　　b) false:只复制当前节点,里面的内容不复制

　　　　　2.　创建之后要添加到已有的节点上

　　　　　3.　box.appendchild();

节点属性操作

获取属性

　　　　a) 元素节点.属性或者元素节点[属性]

　　　　b) 元素节点.方法（）；

节点名.setAttribute（“id”，“aa”）：添加一id=“aa”的属性
节点名. removeAttribute（”id”）；删除ID属性
修改class属性要写成className：：因为class是关键字
节点名
.innerHTML修改标签中间的文字

 <script>

        window.onload = function () {

            var eleNode = document.getElementsByTagName("img")[0];

            //属性、赋值获取两种方式

            //1.元素节点.属性或者元素节点[属性]

            eleNode.src = "image/jd2.png";

            eleNode.aaa = "bbb";

            console.log(eleNode.aaa);

            console.log(eleNode.src);

            console.log(eleNode.tagName);

            console.log(eleNode["title"]);

            console.log(eleNode["className"]);

            console.log(eleNode["alt"]);

            //2.元素节点.方法();

            console.log(eleNode.getAttribute("id"));

            eleNode.setAttribute("id","你好");

            eleNode.setAttribute("ccc","ddd");

            eleNode.removeAttribute("id");

        }

    </script>

</head>

<body>

<img src="data:image/jd1.png" class="box" title="图片" alt="京东狗" id="aaa"/>

</body>

</html>

节点的属性

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--<a href="javacript:;">切换</a>-->

    <!--<a href="#">切换</a>-->

    <a href="http://www.baidu.com" style="margin:10px;display: block" onclick="fn();return false;">切换</a>

    <img id="img" src="data:image/1.jpg" width="400px"/>

    <script>

        //需求：点击a链接，img图片切换（行内式）

        //步骤：

        //1.获取事件源和图片

        //2.绑定事件

        //3.书写事件驱动程序

        //1.获取事件源和图片

//        var a = document.getElementsByTagName("a")[0];

//        var img = document.getElementById("img");

//        //2.绑定事件

//        a.onclick = function () {

//            //3.书写事件驱动程序

//            img.src = "image/2.jpg";

//            //return false的目的是禁止a连接跳转；

//            return false;

//        }

        var img = document.getElementById("img");

        function fn(){

            img.src = "image/2.jpg";

        }

    </script>

</body>

</html>

图片切换

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        button {

            margin: 10px;

        }

        div {

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        .show {

            display: block;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

    <button id="btn">隐藏</button>

    <div>

    </div>

    <script>

        //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。

        //步骤：

        //1.获取事件源和相关元素

        //2.绑定事件

        //3.书写事件驱动程序

        //1.获取事件源和相关元素

        var btn = document.getElementById("btn");

        var div = document.getElementsByTagName("div")[0];

        //2.绑定事件

        btn.onclick = function () {

            //3.书写事件驱动程序

            //判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。

            //反之，则显示，并修改按钮内容为隐藏

            if(this.innerHTML === "隐藏"){

                div.className = "hide";

                //修改文字（innerHTML）

                btn.innerHTML = "显示";

            }else{

                div.className = "show";

                //修改文字（innerHTML）

                btn.innerHTML = "隐藏";

            }

        }

    </script>

</body>

</html>

显示和隐藏盒子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         body {

             font-family: "Helvetica", "Arial", serif;

             color: #333;

             background: #ccc;

             margin: 1em 10%;

         }

         /** {*/

         /*margin:0;*/

         /*padding: 0;*/

         /*}*/

         h1 {

             color: #333;

             background-color: transparent;

         }

         a { display:inline-block;

             color: #c60;

             background-color: transparent;

             font-weight: bold;

             text-decoration: none;

         }

         .box1 img {

             margin:10px 15px 20px 0 ;

         }

         /*.box1 {*/

             /*width: 520px;*/

             /*background-color: #7dff51;*/

         /*}*/

     </style>

 </head>

 <body>

 <h1>这是一个画廊</h1>

 <a href="#">点我可以注册</a>

 <div>

     <div id="box1">

         <a href="image/1.jpg" title="美女A">

             <img src="data:image/1-small.jpg" width="100">

         </a>

         <a href="image/2.jpg" title="美女B">

             <img src="data:image/2-small.jpg" width="100">

         </a>

         <a href="image/3.jpg" title="美女C">

             <img src="data:image/3-small.jpg" width="100">

         </a>

         <a href="image/4.jpg" title="美女D">

             <img src="data:image/4-small.jpg" width="100">

         </a>

     </div>

     <div id="box2">

         <a href="#">

             <img id="image" src="data:image/placeholder.png" width="450px">

         </a>

         <p id="des">请点击一张图片</p>

     </div>

 </div>

点击小图出现大图

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         body {

             font-family: "Helvetica", "Arial", serif;

             color: #333;

             background-color: #ccc;

             margin: 1em 10%;

         }

         h1 {

             color: #333;

             background-color: transparent;

         }

         a {

             color: #c60;

             background-color: transparent;

             font-weight: bold;

             text-decoration: none;

         }

         ul {

             padding: 0;

         }

         li {

             float: left;

             padding: 1em;

             list-style: none;

         }

         #imagegallery {

             list-style: none;

         }

         #imagegallery li {

             margin: 0px 20px 20px 0px;

             padding: 0px;

             display: inline;

         }

         #imagegallery li a img {

             border: 0;

         }

     </style>

 </head>

 <body>

 <h2>

     美女画廊

 </h2>

 <a href="#">注册</a>

 <ul id="imagegallery">

     <li>

         <a href="image/1.jpg" title="美女A">

             <img src="data:image/1-small.jpg" width="100" alt="美女1"/>

         </a>

     </li>

     <li>

         <a href="image/2.jpg" title="美女B">

             <img src="data:image/2-small.jpg" width="100" alt="美女2"/>

         </a>

     </li>

     <li>

         <a href="image/3.jpg" title="美女C">

             <img src="data:image/3-small.jpg" width="100" alt="美女3"/>

         </a>

     </li>

     <li>

         <a href="image/4.jpg" title="美女D">

             <img src="data:image/4-small.jpg" width="100" alt="美女4"/>

         </a>

     </li>

 </ul>

 <div style="clear:both"></div>

 <img id="image" src="data:image/placeholder.png" width="450px"/>

 <p id="des">选择一个图片</p>

 <script>

     //需求：点击小图片，改变下面的大图片的src属性值。赋值为a链接的href属性值。

         //让p标签的innnerHTML属性值，变成a标签的title属性值。

     //步骤：

     //1.获取事件源和相关元素

     //2.绑定事件

     //3.书写事件驱动程序

     //1.获取事件源和相关元素

     //利用元素获取其下面的标签。

     var ul = document.getElementById("imagegallery");

     var aArr = ul.getElementsByTagName("a");

 //    console.log(aArr[0]);

     var img = document.getElementById("image");

     var des = document.getElementById("des");

     //2.绑定事件

     //以前是一个一个绑定，但是现在是一个数组。for循环绑定

     for(var i=0;i<aArr.length;i++){

         aArr[i].onclick = function () {

             //3.书写事件驱动程序

             //修改属性

             //this指的是函数调用者，和i并无关系，所以不会出错。

             img.src = this.href;

 //            img.src = aArr[i].href;

             des.innerHTML = this.title;

             return false;

         }

     }

 </script>

 </body>

 </html>

value和innerHtml和innerText

//    value：标签的value属性。

//innerHTML：获取双闭合标签里面的内容。（识别标签）

//innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）