JS-DOM . 01 了解DOM,动手做一下就明白了!

Posted 明明明明明明明明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.书写事件驱动程序。
技术分享
 1 <body>
 2  <div id="box" style="width:100px; height:100px ;background-color:blue ;cursor: pointer;"></div>
 3 
 4 <script>
 5 //            1.获取事件源(document.getElementById("box")
 6     var div = document.getElementById("box");
 7 //            2.绑定事件 (事件源.事件 = function(){ 事件驱动程序 })
 8     div.onclick = function () {
 9  //            3.书写事件驱动程序。
10         alert(1);
11     };
12 
13 </script>            
初试 DOM
  1. 执行事件步骤  

    A)  获取事件源(有五种)/也可通过节点

      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)  书写事件驱动程序

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

 

windows.onload:       

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

b)  js和html同步加载

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

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

 

  1. 通过类名控制标签属性

a)  替换类名和添加类名

 

技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7     <style>
 8       * {
 9         margin: 0;
10         padding: 0;
11       }
12      .top-banner {
13          background-color: #7dff51;
14          height:80px;
15      }
16       .w {
17           width: 1210px;
18           margin:10px auto;
19           position: relative;
20       }
21        img {
22            width: 1210px;
23            height: 80px;
24            background-color: #37c2fb;
25        }
26        a {
27             position: absolute;
28             top: 5px;
29             right: 5px;
30             color: #FFFFFF;
31             background-color: #000;
32             text-decoration: none;
33             width: 20px;
34             height: 20px;
35             font:700 14px/20px "simsum";
36             text-align: center;
37        }
38         .hide {
39             display:none !important;
40         }
41 
42 
43 
44     </style>
45 
46 </head>
47 <body>
48 
49     <div class="top-banner" id="topBanner">
50         <div class="w">
51           <img src="" />
52           <a href="#" id="closeBanner">x</a>
53         </div>
54     </div>
55 
56 <script>
57 //    需求:点击案例,隐藏盒子
58 //    步骤:
59 //    1:获取事件源
60 //    2:绑定事件
61 //    3:书写事件驱动程序
62 //    1.获取事件源
63     var closeBanner = document.getElementById("closeBanner");
64     var topBanner = document.getElementById("topBanner");
65 //    2.绑定事件
66     closeBanner.onclick= function(){
67 //    3.书写事件驱动
68     topBanner.className = "hide"; // 替换旧类名
69 //  topBanner.className +="hide" ; // 保留原类名
70 //  topBanner.style.display = "none" ;
71 
72 }
73 
74 </script>
75 
76 </body>
77 </html>
体验:点击右上角的X ,关闭横福广告
技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script>
 7         // 让页面加载完毕后再执行本代码
 8     window.onload = function() {
 9         // 需求:鼠标放到img上,修改图片路径src
10         // 1.获取事件源
11         var img = document.getElementById("box");
12         // 2.绑定事件
13         img.onmouseout = function(){
14         // 3.设定驱动程序来修改图片地址
15             this.src = "image/image1.png" ;
16         };
17 
18         var img = document.getElementById("box");
19         img.onmouseover = function(){
20             this.src = "image/image2.png" ;
21         }
22     }
23         
24     </script>
25 </head>
26 <body>
27 
28 <img src="image/jd1.png" id="box" style="cursor: pointer;border: 1px solid #ccc;">
29 
30 </body>
31 </html>
实现鼠标指上去变换图片的特效

 

什么是DOM和节点

  1. DOM由节点组成
  2. 树状模型
  3. 节点:object类型,是内置对象

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

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

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

  4.DOM操作就是操作节点

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

访问关系获取

  1. 节点访问关系是以属性的方式存在的
  2. .parentNode:获取父节点
  3. sibling、Next、previous
  4. .nextElemntSibling
  5. .previousElementSibing:
  6. .firstElementFirstSibling
  7. children();返回指定的子元素结合
  8. 节点自己.parentNode.Children[index]:得到随意得到兄弟的节点
  9. parenNode
  10. children

节点的操作

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

    

技术分享
 1 <body>
 2 <div class="box1">
 3     <div class="box2" id="box2"></div>
 4     <div class="box3"></div>
 5 </div>
 6 <script>
 7     //节点的访问关系是以属性形式存在
 8 
 9     //1.box1是box的父节点
10 //    var box2 = document.getElementsByClassName("box2")[0];
11     var box2 = document.getElementById("box2");
12     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();

 

 节点属性操作

  1. 获取属性

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

    b)  元素节点.方法();  

  1. 节点名.setAttribute(“id”,“aa”): 添加一id=“aa”的属性
  2. 节点名. removeAttribute(”id”);删除ID属性
  3. 修改class属性要写成className::因为class是关键字
  4. 节点名
  5. .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="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="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>
<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="image/1-small.jpg" width="100" alt="美女1"/>
        </a>
    </li>
    <li>
        <a href="image/2.jpg" title="美女B">
            <img src="image/2-small.jpg" width="100" alt="美女2"/>
        </a>
    </li>
    <li>
        <a href="image/3.jpg" title="美女C">
            <img src="image/3-small.jpg" width="100" alt="美女3"/>
        </a>
    </li>
    <li>
        <a href="image/4.jpg" title="美女D">
            <img src="image/4-small.jpg" width="100" alt="美女4"/>
        </a>
    </li>
</ul>


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

<img id="image" src="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>
美女相册
技术分享
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style type="text/css">
  7         body {
  8             font-family: "Helvetica", "Arial", serif;
  9             color: #333;
 10             background-color: #ccc;
 11             margin: 1em 10%;
 12         }
 13 
 14         h1 {
 15             color: #333;
 16             background-color: transparent;
 17         }
 18 
 19         a {
 20             color: #c60;
 21             background-color: transparent;
 22             font-weight: bold;
 23             text-decoration: none;
 24         }
 25 
 26         ul {
 27             padding: 0;
 28         }
 29 
 30         li {
 31             float: left;
 32             padding: 1em;
 33             list-style: none;
 34         }
 35 
 36         #imagegallery {
 37 
 38             list-style: none;
 39         }
 40 
 41         #imagegallery li {
 42             margin: 0px 20px 20px 0px;
 43             padding: 0px;
 44             display: inline;
 45         }
 46 
 47         #imagegallery li a img {
 48             border: 0;
 49         }
 50     </style>
 51 
 52 </head>
 53 <body>
 54 <h2>
 55     美女画廊
 56 </h2>
 57 <a href="#">注册</a>
 58 <ul id="imagegallery">
 59     <li>
 60         <a href="image/1.jpg" title="美女A">
 61             <img src="image/1-small.jpg" width="100" alt="美女1"/>
 62         </a>
 63     </li>
 64     <li>
 65         <a href="image/2.jpg" title="美女B">
 66             <img src="image/2-small.jpg" width="100" alt="美女2"/>
 67         </a>
 68     </li>
 69     <li>
 70         <a href="image/3.jpg" title="美女C">
 71             <img src="image/3-small.jpg" width="100" alt="美女3"/>
 72         </a>
 73     </li>
 74     <li>
 75         <a href="image/4.jpg" title="美女D">
 76             <img src="image/4-small.jpg" width="100" alt="美女4"/>
 77         </a>
 78     </li>
 79 </ul>
 80 
 81 
 82 <div style="clear:both"></div>
 83 
 84 <img id="image" src="image/placeholder.png" width="450px"/>
 85 
 86 <p id="des">选择一个图片</p>
 87 
 88 <script>
 89     //需求:点击小图片,改变下面的大图片的src属性值。赋值为a链接的href属性值。
 90         //让p标签的innnerHTML属性值,变成a标签的title属性值。
 91     //步骤:
 92     //1.获取事件源和相关元素
 93     //2.绑定事件
 94     //3.书写事件驱动程序
 95 
 96 
 97     //1.获取事件源和相关元素
 98     //利用元素获取其下面的标签。
 99     var ul = document.getElementById("imagegallery");
100     var aArr = ul.getElementsByTagName("a");
101 //    console.log(aArr[0]);
102     var img = document.getElementById("image");
103     var des = document.getElementById("des");
104     //2.绑定事件
105     //以前是一个一个绑定,但是现在是一个数组。for循环绑定
106     for(var i=0;i<aArr.length;i++){
107         aArr[i].onclick = function () {
108             //3.书写事件驱动程序
109             //修改属性
110             //this指的是函数调用者,和i并无关系,所以不会出错。
111             img.src = this.href;
112 //            img.src = aArr[i].href;
113             des.innerHTML = this.title;
114             return false;
115         }
116     }
117 
118 </script>
119 
120 </body>
121 </html>
value和innerHtml和innerText

//    value:标签的value属性。
//innerHTML:获取双闭合标签里面的内容。(识别标签)
//innerText:获取双闭合标签里面的内容。(不识别标签)(老版本的火狐用textContent)

 















以上是关于JS-DOM . 01 了解DOM,动手做一下就明白了!的主要内容,如果未能解决你的问题,请参考以下文章

JS-DOM

JS-DOM样式操作

JS-DOM

JS-DOM

JS-DOM对象

js-DOM