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）
				


				
时间： 2025-01-06 21:19:46 

		


		


	

	
	

		


		
JS-DOM . 01  了解DOM,动手做一下就明白了！的相关文章


								

		

			

                JS之BOM和DOM(来源、方法、内容、应用)
			

		

		

									

				1.Javascript组成 JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器交互的方法和接口 ECMAScript扩展知识: ① ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript. ② "ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力--",即ECMAScript不与具			

		

	

				

		

			

                js的常规操作 -- dom
			

		

		

									

				html是一门 超文本标记语言,css层叠样式表 用来渲染页面样式,js 解释型编译语言,基于web开发的脚本语言,用来实现页面一系列的动作 js--dom语言的常用方法 1.window的常规动作 window对象window.innerHeight - 获取浏览器窗口的内部高度 window.innerWidth - 获取浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口 window对象的子对象浏览器对象 navigatorna			

		

	

				

		

			

                原生JS与jQuery操作DOM有什么异同点？
			

		

		

									

				本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文			

		

	

				

		

			

                原生js和Jquery操作DOM
			

		

		

									

				原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一			

		

	

				

		

			

                android如何使用DOM来解析XML+如果做一个表情的弹出框
			

		

		

									

				效果图: 如何解析以下的xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <array> <string>(#大笑)</string			

		

	

				

		

			

                js ajax 传送xml dom对象到服务器
			

		

		

									

				客户端代码 1 <script> 2 var isie = true; 3 var xmlhttp = null; 4 function createXMLHTTP() {//创建XMLXMLHttpRequest对象 5 if (xmlhttp == null) { 6 if (window.XMLHttpRequest) { 7 xmlhttp = new XMLHttpRequest(); 8 } 9 else { 10 xmlhttp = new ActiveXObject("			

		

	

				

		

			

                js动态监听dom变化
			

		

		

									

				原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver      // 选择目标节点   var target = document.querySelector('#some-id');       // 创建观察			

		

	

				

		

			

                [Cycle.js] Making our toy DOM Driver more flexible
			

		

		

									

				Our previous toy DOM Driver is still primitive. We are only able to sends strings as the textContent of the container element. We cannot yet create headers and inputs and all sorts of fancy DOM elements. In this lesson we will see how to send objects			

		

	

				

		

			

                Dom Animator – 提供 Dom 注释动画的 JS 库
			

		

		

									

				DOM 动画是一个极好的 JavaScript 库,用来在页面的 DOM 注释中显示小的 ASCII 动画.这对于那些检查你的代码的人是一个小彩蛋,仅此而已.它是一个独立的库,不依赖 jQuery 或者其它库,所以使用是非常简单的.您不需要任何 CSS 或 HTML,只是 JavaScript 而已. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScr