0
点赞
收藏
分享

微信扫一扫

JavaScript学习笔记(三)

_鱼与渔_ 2022-01-09 阅读 39
javascript

 一、JavaScript作用

        帮助浏览器对用户提出请求进行处理


二、DOM对象

        1.DOM = Document Object  Model,【文档模型对象】

        2.JavaScript不能直接操作HTML标签,只能通过HTML标签
              关联的DOM对象对HTML标签下达指令

三、DOM对象生命周期

        1.浏览器在接收到html文件之后,将HTML文件标签加载到浏览器缓存中,每当加载一个html标签的时候,自动为这个标签生成一个实例对象,这个实例对象就是DOM对象。

        2.在浏览器关闭之前或者浏览器请求其他资源文件之前,本次生成的DOM对象一直存活在浏览器缓存中。
        3.在浏览器关闭的时候,浏览器缓存中的dom对象将要被销毁。
                
        4.在浏览器请求到新资源文件后,浏览器缓存中原有的dom对象将会被覆盖。

四、document对象

        1.document对象被称为【文档对象】

        2.document对象用于在浏览器内存中根据定位条件定位DOM对象


五、document对象生命周期

        1.在浏览器将网页中所有标签加载完毕后,在内存中将使用【树形结构】存储这些DOM对象。在树形结构生成完毕后由浏览器生成一个document对象管理这颗树(DOM树)。在浏览器将接收网页中标签加载完毕后,自动在浏览器内存中生成一个document对象。

        2.一个浏览器运行期间,只会生成一个document对象。

        3.在浏览器关闭时,负责将document对象进行销毁。

六、通过document对象定位DOM对象方式

        1.根据html标签的id属性值定位DOM对象

                命令格式  var domObj =  document.getElementById("id属性值");

                举个栗子  var domObj =  document.getElementById("one");

                通知document对象定位id属性等于one的标签关联的DOM对象


        2.根据html标签的name属性值定位DOM对象

                命令格式  var domArray =  document.getElementsByName("name属性值");

                举个栗子  <input type="checkbox" name="deptNo" value="10">部门10
                              <input type="checkbox" name="deptNo" value="20">部门20
                              <input type="checkbox" name="deptNo" value="30">部门30

                              var domArray =  document.getElementsByName("deptNo");
                通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位并封装到一个数组进行返回。 domArray就是一个数组存放本次返回的所有DOM对象。

        3.根据html标签类型定位DOM对象

                命令格式  var domArray =   document.getElementsByTagName("标签类型名");

                举个栗子  var  domArray = document.getElementsByTagName("p");

                                <p>段落标签</p>

                通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回。

七、DOM对象对HTML标签属性操作

        1.DOM对象对标签value属性进行取值与赋值操作

                取值操作:
                        var domObj =  document.getElementById("one");
                        var num = domObj.value;
                赋值操作:
                        var domObj = document.getElementById("one");
                        domObj.value = "abc";


        2.DOM对象对标签中【样式属性】进行取值与赋值操作

                取值操作:
                        var domObj =  document.getElementById("one");
                        //读取当前标签【背景颜色属性】值
                        var color = domObj.style.背景颜色属性

                赋值操作:
                        var domObj =  document.getElementById("one");
                        //通过DOM对象对标签中【背景颜色属性】进行赋值
                        domObj.style.背景颜色属性 = 值;


        3.DOM对象对标签中【状态属性】进行取值与赋值操作

                状态属性:状态属性的值都是boolean类型

                        disabled = true ; 表示当前标签不可以使用
                        disabled = false; 表示当前标签可以使用

                        checked: 只存在与radio标签与checkbox标签
                        checked = true ;  表示当前标签被选中了
                        checked = false;  表示当前标签未被选中

                取值操作:
                        var domObj = document.getElementById("one");
                        var num = domObj.checked;

                赋值操作:
                        var domObj = document.getElementById("one");
                        domObj.checked = true;

        4. DOM对象对标签中【文字显示内容】进行赋值与取值
 
                文字显示内容:  只存在于双目标签之间;<tr>100</tr>

                取值操作:
                        var domObj = document.getElementById("one");
                        var num1 = domObj.innerText;

                赋值操作:
                        var domObj = document.getElementById("one");
                        domObj.innerText = 值;

                innerText与innerHTML 区别:
                              
                        innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值

                        innerText只能接收字符串

                        innerHTML既可以接收字符串又可以接收html标签       


八、JavaScript监听事件

        1.监听事件:
                监听用户在何时以何种方式对当前标签进行操作。
                当监听到相关行为时,通知浏览器调用对应JavaScript函数对当前用户请求进行处理。

        2.监听事件分类:

                1)监听用户何时使用鼠标操作当前标签

                2)监听用户何时使用键盘操作当前标签


        3.监听用户何时使用鼠标操作当前标签:

                1)onclick:监听用户何时使用鼠标【单击】当前标签

                2)onmouseover:监听用户何时将鼠标【悬停】当前标签上方

                3)onmouseout:监听用户何时将鼠标从当前标签上方【移开】

                4)onfocus:监听用户何时通过鼠标让当前标签获得【光标】

                5)onblur:监听用户何时通过鼠标让当前标签丢失【光标】

举报

相关推荐

0 条评论