JavaScript基础视频教程总结（091-100章）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>091-100章总结</title>

    <link rel="stylesheet" type="text/css" href="css/base.css"/>

    <link rel="stylesheet" type="text/css" href="css/css.css"/>

</head>

<body>

<pre>

091. DOM简介

什么是DOM

• DOM，全称Document Object Model文档对象模型。

• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

• 文档– 文档表示的就是整个的HTML网页文档

• 对象– 对象表示将网页中的每一个部分都转换为了一个对象。

• 模型– 使用模型来表示对象之间的关系，这样方便我们获取对象（倒树模型）。

节点

• 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。

• 虽然都是节点，但是实际上他们的具体类型是不同的。

• 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。

• 节点的类型不同，属性和方法也都不尽相同。

• 常用节点分为四类

– 文档节点：整个HTML文档

– 元素节点：HTML文档中的HTML标签

– 属性节点：元素的属性

– 文本节点：HTML标签中的文本内容

节点的属性

文档节点（document）

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。

• document对象作为window对象的属性存在的，我们不用获取可以直接使用。

• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）

• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。

• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

• 比如：

– document.getElementById()

– 根据id属性值获取一个元素节点对象。

属性节点（Attr）

• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

• 可以通过元素节点来获取指定的属性节点。

• 例如：

– 元素节点.getAttributeNode("属性名");

• 注意：我们一般不使用属性节点。

文本节点（Text）

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点（包括换行和空格）。

• 它包括可以字面解释的纯文本内容。

• 文本节点一般是作为元素节点的子节点存在的。

• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

• 例如：

– 元素节点.firstChild;

– 获取元素节点的第一个子节点，一般为文本节点。

</pre>

<button id="btn001">我是一个按钮</button>

<script type="text/javascript">

    console.log("第091");

    /*

     * 浏览器已经为我们提供 文档节点 对象这个对象是window属性

     *  可以在页面中直接使用，文档节点代表的是整个网页

     */

    console.log(document);

    //获取到button对象

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

    //修改按钮的文字

    btn001.innerHTML = "I'm Button";

</script>

<pre>

092. 事件的简介

• 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

• JavaScript 与 HTML 之间的交互是通过事件实现的。

• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

事件发生以后要处理这个事件（比如你亲了某人一下，某人有什么反应）。

</pre>

<!--

    我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行

    这种写法我们称为结构和行为耦合，不方便维护，不推荐使用

-->

<button id="btn" onclick="alert('讨厌，你点我干嘛！');">我是一个按钮点我</button>

<button id="btn002">我是一个按钮点我</button>

<script type="text/javascript">

    console.log("第092");

    /*

     * 事件，就是用户和浏览器之间的交互行为，

     *  比如：点击按钮，鼠标移动、关闭窗口。。。

     */

    //获取按钮对象

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

    /*

     * 可以为按钮的对应事件绑定处理函数的形式来响应事件

     *  这样当事件被触发时，其对应的函数将会被调用

     */

    //绑定一个单击事件

    //像这种为单击事件绑定的函数，我们称为单击响应函数

    btn002.onclick = function(){

        alert("你还点~~~");

    };

</script>

<pre>

093. 文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行,如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。

onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

注意：window.onload一个页面只能写一个，多个一起会执行最后一个，可以写个方法解决。

</pre>

<script type="text/javascript">

    console.log("第093");

    function btn003(){

        //获取id为btn的按钮

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

        //为按钮绑定一个单击响应函数

        btn003.onclick = function(){

            alert("hello");

        };

    };

</script>

<button id="btn003">我是一个按钮</button>

<pre>

094. DOM查询

获取元素节点

• 通过document对象调用

1. getElementById()

– 通过id属性获取一个元素节点对象

2. getElementsByTagName()

– 通过标签名获取一组元素节点对象,伪数组

3. getElementsByName()

– 通过name属性获取一组元素节点对象

</pre>

<pre>

095. DOM查询2

获取元素节点的子节点

• 通过具体的元素节点调用

1. getElementsByTagName()

– 方法，返回当前节点的指定标签名后代节点

2. childNodes

– 属性，表示当前节点的所有子节点

3. firstChild

– 属性，表示当前节点的第一个子节点

4. lastChild

– 属性，表示当前节点的最后一个子节点

</pre>

<pre>

096. DOM查询3

获取父节点和兄弟节点

• 通过具体的节点调用

1. parentNode

– 属性，表示当前节点的父节点

2. previousSibling

– 属性，表示当前节点的前一个兄弟节点

3. nextSibling

– 属性，表示当前节点的后一个兄弟节点

</pre>

<div class="clearfix">

    <div id="total">

        <div class="inner">

            <p>你喜欢哪个城市?</p>

            <ul class="clearfix" id="city">

                <li id="bj">北京</li>

                <li>上海</li>

                <li>东京</li>

                <li>首尔</li>

            </ul>

            <p>你喜欢哪款单机游戏?</p>

            <ul class="clearfix" id="game">

                <li id="rl">红警</li>

                <li>实况</li>

                <li>*飞车</li>

                <li>魔兽</li>

            </ul>

            <p>你手机的操作系统是?</p>

            <ul id="phone"> <li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>

        </div>

        <div class="inner">

            <p>gender:</p>

            <p>

                <span>

                    <input class="hello" id="male" type="radio" name="gender" value="male"/>

                    <label for="male">male</label>

                </span>

                <span>

                    <input class="hello" id="female" type="radio" name="gender" value="female"/>

                    <label for="female">female</label>

                </span>

            </p>

            <p>name:<input type="text" name="name" id="username" value="abcde"/></p>

        </div>

    </div>

    <div id="btnList">

        <div><button id="btn01">查找#bj节点</button></div>

        <div><button id="btn02">查找所有li节点</button></div>

        <div><button id="btn03">查找name=gender的所有节点</button></div>

        <div><button id="btn04">查找#city下所有li节点</button></div>

        <div><button id="btn05">返回#city的所有子节点</button></div>

        <div><button id="btn06">返回#phone的第一个子节点</button></div>

        <div><button id="btn07">返回#bj的父节点</button></div>

        <div><button id="btn08">返回#android的前一个兄弟节点</button></div>

        <div><button id="btn09">返回#username的value属性值</button></div>

        <div><button id="btn10">设置#username的value属性值</button></div>

        <div><button id="btn11">返回#bj的文本值</button></div>

    </div>

</div>

<script type="text/javascript">

    console.log("第094,095,096");

    // 定义一个通用点击事件函数

    function myClick(btn,fun){

        var btn = document.getElementById(btn);

        btn.onclick = fun;

    };

    myClick("btn01",function(){

        var bj = document.getElementById('bj');

        alert(bj.innerHTML);

    });

    myClick("btn02",function(){

        var lis = document.getElementsByTagName("li"); //一组元素节点对象

        //alert(lis[0]);

        for(var i=0 , liLen = lis.length; i<lis.length; i++){

            console.log(lis[i].innerHTML);

        }

    });

    myClick("btn03",function(){

        var names = document.getElementsByName("gender");//一组元素节点对象

        /*

         * innerHTML用于获取元素内部的HTML代码的

         *  对于自结束标签，这个属性没有意义

         */

        //alert(inputs[i].innerHTML);

        /*

         * 如果需要读取元素节点属性，

         *  直接使用 元素.属性名

         *      例子：元素.id 元素.name 元素.value

         *      注意：class属性不能采用这种方式，

         *          读取class属性时需要使用 元素.className

         */

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

            alert(names[i].value);

        }

    })

    myClick("btn04",function(){

        var city = document.getElementById('city');

        var lis = city.getElementsByTagName('li'); //返回当前节点的指定标签名后代节点

        //alert(lis[0]);

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

            alert(lis[i].innerHTML);

        }

    });

    myClick("btn05",function(){

        var city = document.getElementById('city');

        var cns = city.childNodes;

        /*

         * childNodes属性会获取包括文本节点在内的所有节点

         * 根据DOM标签标签间空白也会当成文本节点

         * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，

         *  所以该属性在IE8中会返回4个子元素而其他浏览器是9个

         */

        //alert(cns.length);

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

            alert(cns[i]);

        }

        /*

         * children属性可以获取当前元素的所有子元素

         */

        var cns2 = city.children;

        alert(cns2.length);

    });

    myClick("btn06",function(){

        var phone = document.getElementById('phone');

        var fir = phone.firstChild; // 获取到当前元素的第一个子节点（包括空白文本节点）

        alert(fir);

        //firstElementChild获取当前元素的第一个子元素

        /*

         * firstElementChild不支持IE8及以下的浏览器，

         *  如果需要兼容他们尽量不要使用

         */

        fir = phone.firstElementChild;

        alert(fir);

    });

    myClick("btn07",function(){

        var bj = document.getElementById('bj');

        var pn = bj.parentNode;

        alert(pn.innerHTML);

        /*

         * innerText

         *  - 该属性可以获取到元素内部的文本内容

         *  - 它和innerHTML类似，不同的是它会自动将html标签去除

         */

        alert(pn.innerText);

    });

    myClick("btn08",function(){

        var android = document.getElementById('android');

        var ps = android.previousSibling; //前一个兄弟节点（也可能获取到空白的文本）

        alert(ps);

        //previousElementSibling获取前一个兄弟元素，IE8及以下不支持

        var ps = android.previousElementSibling;

        alert(ps);

    });

    myClick("btn09",function(){

        var username = document.getElementById('username');

        var um = username.value;

        alert(um);

    });

    myClick("btn10",function(){

        var username = document.getElementById('username');

        username.value = "今天天气真好。";

    });

    myClick("btn11",function(){

        var bj = document.getElementById('bj');

        alert (bj.innerHTML);

        alert (bj.innerText);

        alert(bj.firstChild.nodeValue);

    });

</script>

<pre>

097. 图片切换的练习
</pre>

<div class="img-exercise">

    <p id="infor"></p>

    <img src="data:images/1.jpg" alt="1" />

    <button id="prev">上一个</button>

    <button id="next">下一个</button>

</div>

<script type="text/javascript">

    console.log("第097");

    var prev = document.getElementById('prev');

    var next = document.getElementById('next');

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

    var imgArray = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];

    var imgArrayLength = imgArray.length;

    var infor = document.getElementById('infor');

    var index = 0;

    infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。";

    prev.onclick = function(){

        index--;

        if(index <0 ){

            index = imgArrayLength -1;

        }

        img.src = imgArray[index];

        infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。";

    }

    next.onclick = function(){

        index++;

        if(index > imgArrayLength -1 ){

            index = 0;

        }

        img.src = imgArray[index];

        infor.innerHTML = "一共"+imgArrayLength+"张图片，当前是第"+(index+1)+"张。";

    }

</script>

<pre>

098. 全选练习1
</pre>

<pre>

099. 全选练习2
</pre>

<pre>

100. 全选练习3
</pre>

<form method="post" action="">

    <p>你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 </p>

    <input type="checkbox" name="items" value="足球" />足球

    <input type="checkbox" name="items" value="篮球" />篮球

    <input type="checkbox" name="items" value="羽毛球" />羽毛球

    <input type="checkbox" name="items" value="乒乓球" />乒乓球

    <br />

    <input type="button" id="checkedAllBtn" value="全　选" />

    <input type="button" id="checkedNoBtn" value="全不选" />

    <input type="button" id="checkedRevBtn" value="反　选" />

    <input type="button" id="sendBtn" value="提　交" />

</form>

<script type="text/javascript">

    console.log("第098,099,100");

    function inClick(inBtn,fun){

        var inBtn = document.getElementById(inBtn);

        inBtn.onclick = fun;

    };

    function moreSelect(){

        var items = document.getElementsByName('items');

        var itemsLength = items.length;

        var checkedAllBox = document.getElementById('checkedAllBox');

        // 全选

        inClick('checkedAllBtn',function(){

            for(var i=0;i<itemsLength;i++){

                items[i].checked = true;

            }

            checkedAllBox.checked = true;

        })

        // 全不选

        inClick('checkedNoBtn',function(){

            for(var i=0;i<itemsLength;i++){

                items[i].checked = false;

            }

            checkedAllBox.checked = false;

        })

        // 反选

        inClick('checkedRevBtn',function(){

            for(var i=0;i<itemsLength;i++){

                /*if(items[i].checked){

                    items[i].checked = false;

                }else{

                    items[i].checked = true;

                }*/

                items[i].checked = !items[i].checked;

            }

            checkedAllBox.checked = !checkedAllBox.checked;

        })

        // 提交

        inClick('sendBtn',function(){

            for(var i=0;i<itemsLength;i++){

                if(items[i].checked){

                    alert(items[i].value);

                }

            }

        })

        // 全选/全不选

        inClick('checkedAllBox',function(){

            for(var i=0;i<itemsLength;i++){

                items[i].checked = this.checked;

            }

        })

        // items点击

        /*

         * 如果四个多选框全都选中，则checkedAllBox也应该选中

         * 如果四个多选框没都选中，则checkedAllBox也不应该选中

         */

        for(var i=0;i<itemsLength;i++){

            items[i].onclick = function(){

                checkedAllBox.checked = true;

                for (var j=0; j<items.length; j++) {

                    if(!items[j].checked){

                        checkedAllBox.checked = false;

                        break;

                    }

                }

            }

        }

    }

</script>

<pre>

附加：window.onload 加载多个函数的的两种方法

</pre>

<script type="text/javascript">

    function a(){

        console.log("a");

    }

    function b(){

        console.log("b");

    }

    function c(){

        console.log("c");

    }

    //1

    window.onload =function() {

        a();

        b();

        c();

    }

    //2

    function addLoadEvent(func) {

      var oldonload = window.onload;

      if (typeof window.onload != 'function') {

        window.onload = func;

      } else {

        window.onload = function() {

          oldonload();

          func();

        }

      }

    }

    addLoadEvent(a);

    addLoadEvent(b);

    addLoadEvent(c);

    addLoadEvent(btn003);

    addLoadEvent(moreSelect);

</script>

</body>

</html>

所有基础课程链接：

1.JavaScript基础视频教程总结（001-010章） 2.JavaScript基础视频教程总结（011-020章） 3. JavaScript基础视频教程总结（021-030章） 4. JavaScript基础视频教程总结（031-040章）

5. JavaScript基础视频教程总结（041-050章） 6. JavaScript基础视频教程总结（051-060章） 7. JavaScript基础视频教程总结（061-070章） 8. JavaScript基础视频教程总结（071-080章）

9. JavaScript基础视频教程总结（081-090章） 10. JavaScript基础视频教程总结（091-100章） 11. JavaScript基础视频教程总结（101-110章） 12. JavaScript基础视频教程总结（111-120章）

13. JavaScript基础视频教程总结（121-130章） 14. JavaScript基础视频教程总结（131-140章）

另外，欢迎关注我的新浪微博

JavaScript基础视频教程总结（091-100章）的更多相关文章

JavaScript基础视频教程总结（071-080章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（011-020章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（021-030章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（031-040章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（041-050章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（131-140章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（121-130章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（111-120章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
JavaScript基础视频教程总结（101-110章）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

Markdown基本用法
Markdown基本用法不同的编辑器对本文中的功能可能显示情况不一样,马克飞象可以完美支持和显示. 一.标题 h1标题 #h1标题 h1标题 h1标题 == h2标题 ##h2标题 h2标题 h2标 ...
如何从NFS文件系统启动
笔记,备忘! 步骤: 1.设置好NFS服务器 2.修改uboot启动参数bootarg setenv bootargs console=ttySAC0 root=/dev/nfs nfsroot=19 ...
ping(1)
/* ping program for learning IP protocol author: jeff date: 2014/10/25 */ #include <stdio.h> # ...
EF的四种开发模式
EF提供了四种开发模式,具体如下:(转载)Code First(New DataBase) :在代码中定义类和映射关系并通过model生成数据库,使用迁移技术更新数据库.Code First(Exis ...
201521123022 《Java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业本次PTA作业题集异常.多线程 Q1.finally 题目4-2 Q1.1 截图你的提交结果 ...
JVM内存分配与垃圾回收机制管理
项目上线,性能优化有个重要组成就是jvm内存分配和垃圾回收机制的管理配置. 网上随便能搜到相关的具体步骤,以及内存中各种参数对应的意义,不再赘述. 干货就是直接抛出遇到的问题,以及如何解决的,再说说待 ...
定义返回结果 Resultmodel
web: checkPath: localhost:9099 success: 1 error: 0 package com.worker.config; import org.springframe ...
通过this()调用有参构造方法
使用原因:在通过无参构造方法实例化对象时,如果有属性可以设置默认值,可通过在无参构造方法中使用this()调用有参构造方法实现. this()需要写在无参构造方法的第一行! 例子:在没有给出小猫的名字 ...
Select查询命令
一开始SELECT查询的命令为 SELECT * FROM employee; SELECT 要查询的列名 FROM 表名字 WHERE 限制条件; 若要查询所有内容,就用*代 ...
Mybatis if test 中int integer判断非空的坑
Mybatis 中,alarmType 是int类型.如果alarmType 为0的话,条件判断返回结果为false,其它值的话,返回true. 1 <if test="alarmTy ...