javaScript基础(三)

一.DOM入门

1.DOM:(Document Object Model)

    简介:基于文档对象模型编程,当html页面被浏览器解析运行的时候,浏览器内置js引擎经过每一个标签在解析过程中被封装成标签对象(节点对象),形成一种树状结构!就是通过获得标签对象来改变标签对象的一些特有属性,从而达到js的某种效果.

    那么,由此得出我们所说的document代表整个HTML文档

2.js中获取标签对象

    1)方式一:可以通过查询节点关系获取标签对象

        特有属性:

        parentNode:父节点(父标签对象)

        childNodes:所有子节点

        firstChild:第一个子节点;

        lastChild:最后一个子节点;

        nextSibling:下一个兄弟元素;

        previousSibling:上一个兄弟节点

    2)方式二: 使用document方法来获取标签对象;(开发中常用方式)

        第一步: 建立事件源 

    用户名:<input type="text" id="username" calss="user" name="name" palceholder="请输入用户名" οnblur="getUserName()" />

       第三步: 绑定事件监听器 οnblur="getUserName()"

    

<script>

     //第二步:建立事件监听器

        function getUserName(){

        // 1)方式一:在标签中给定ID属性值,必须唯一(推荐使用)

              document.getElementById(ID属性值) 获取标签对象

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

             alert(username.value);

          // 2)方式二:通过calss属性来获取标签对象

             document.getElementsByClassName("class属性值")[0]; 获取标签对象

             var usename = document.getElementsByClassName("user")[0];

            alert(username.value);

          // 3)方式三:通过name属性来获取标签对象;

            document.getElementsByName("name属性值")[0];

            alert("用户名是:"+document.getElementsByName("name")[0].value);

          //  4)方式四:通过标签名获取标签对象

           document.getElementsByTagName("同名标签名")[0];

           var username=document.getElementsByTagName(input)[0];

            

        }

</script>

3.js中常见事件分类

    1)单击事件

    第一步:建立事件源

    <input type="button" value="单击我" οnclick="testClick()(事件监听器)"/>

    第三步:绑定监听器: οnclick="testClick() (事件监听器)"

    第二步:创建事件监听器

    

<script>

        function testClick(){

            //跳转新的页面

            //使用window窗口对象下面地址栏对象location

            //方式一:location的href属性,重新载入一个地址;

            location.href(/*新的地址,如*/"www.baidu.com"/*或者是本地其他地址如adv.html*/);

            //方式二:使用window窗口对象下的open方法

            //window.open("新的地址",打开方式);

            如:window.open("adv.html",_blank);

            //方式三:展开确认对话框confirm()方法,此方法会弹出对话框,可以进行判断,进入下一步操作;

            如:var flag = window.confim("你忍心删除吗?");

                if(flag){

                    alert(删除了...);

                }else{

                    alert("取消删除...");

                }

        }

</script>

     2)双击事件

    第一步:建立事件源

    <input type="button" value="双击我"  οndblclick="testDbclick()" /><br/>

    第三步:绑定事件监听器: ondbclick="testDbclick() (事件监听器) "

    第二步:建立事件监听器

   

<script>

function testDbclick(){

            alert("触发双击点击事件");

        }

</script>

    双击事件中任然可以使用window窗口对象下面,完成自己想要完成的操作;

    3)失去焦点事件  onblur

    第一步:建立事件源

  

  用户名:<input type="text"  id="username" value="请输入用户名" οnblur="testBlur()"><span id="spanTip"></span>

    第三步:绑定事件源 οnblur="testBlur()(事件监听器)"

    第二步:建立事件监听器

   

<script>

function testBlur(){

            //获取文本框输入的内容

            var username = document.getElementById("username").value;