zoukankan html css js c++ java

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="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

执行事件步骤

　　　　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) 替换类名和添加类名

 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            1210px;
18           margin:10px auto;
19           position: relative;
20       }
21        img {
22             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              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="" alt=""/>
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和节点

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. 节点的访问关系都是属性，节点的操作都是函数或者方法

 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();

节点属性操作

获取属性

　　　　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="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 {
             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>

显示和隐藏盒子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body {
 8             font-family: "Helvetica", "Arial", serif;
 9             color: #333;
10             background: #ccc;
11             margin: 1em 10%;
12         }
13 
14         /** {*/
15         /*margin:0;*/
16         /*padding: 0;*/
17         /*}*/
18         h1 {
19             color: #333;
20             background-color: transparent;
21         }
22 
23         a { display:inline-block;
24             color: #c60;
25             background-color: transparent;
26             font-weight: bold;
27             text-decoration: none;
28         }
29         .box1 img {
30             margin:10px 15px 20px 0 ;
31         }
32 
33 
34         /*.box1 {*/
35             /* 520px;*/
36             /*background-color: #7dff51;*/
37         /*}*/
38     </style>
39 </head>
40 <body>
41 
42 <h1>这是一个画廊</h1>
43 <a href="#">点我可以注册</a>
44 <div>
45     <div id="box1">
46         <a href="image/1.jpg" title="美女A">
47             <img src="image/1-small.jpg" width="100">
48         </a>
49         <a href="image/2.jpg" title="美女B">
50             <img src="image/2-small.jpg" width="100">
51         </a>
52         <a href="image/3.jpg" title="美女C">
53             <img src="image/3-small.jpg" width="100">
54         </a>
55         <a href="image/4.jpg" title="美女D">
56             <img src="image/4-small.jpg" width="100">
57         </a>
58 
59     </div>
60     <div id="box2">
61         <a href="#">
62             <img id="image" src="image/placeholder.png" width="450px">
63         </a>
64         <p id="des">请点击一张图片</p>
65     </div>
66 </div>

点击小图出现大图

  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）

作者:明明
出处: http://www.cnblogs.com/mingm/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意，必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。

查看全文

相关阅读:
深入浅出Google Android这本书怎么样
 iPhone开发实战这本书怎么样
 POST数据提交，关于System.Web.HttpUtility.HtmlEncode与System.Web.HttpUtility.UrlEncode的区别
 强烈推荐领域驱动设计与模式实战
 重构HTML: 改善Web应用的设计这本书怎么样
 关于C#与VB.NET网络通信开发实战的读后感
 关于Flex 3权威指南的读后感
 关于iPhone游戏编程实例的读后感
 强烈推荐iPhone开发秘籍
 强烈推荐高效程序员的45个习惯：敏捷开发修炼之道

原文地址：https://www.cnblogs.com/mingm/p/6613875.html

JS-DOM ～ 01. 了解DOM,动手做一下就明白了！／鼠标事件（好吧 其实我卡了三天

DOM概述

什么是DOM和节点

节点的操作

节点属性操作

JS-DOM ～ 01. 了解DOM,动手做一下就明白了！／鼠标事件（好吧其实我卡了三天