Javascript基础五(BOM和DOM)

时间:2019-09-21
本文章向大家介绍Javascript基础五(BOM和DOM),主要包括Javascript基础五(BOM和DOM)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.BOM概念

    什么是BOM?

        BOM是Browser Object Model的缩写,简称浏览器对象模型。这个对象就是window
        BOM提供了独立于内容而与浏览器窗口进行交互的对象
        BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
        BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
        BOM最初是Netscape浏览器标准的一部分
    由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。
    JavaScript的组成:ECMAScript、BOM、DOM,其中ECMAScript为JavaScript的核心,但是如果要在浏览器中使用JavaScript,那么BOM才是JavaScript的核心。
    
        在什么地方就得遵循什么地方的规则。也就是说,无论ECMAScript有多权威,进了浏览器,就得遵守浏览器的规则。

2.window对象介绍,内置对象(location/history/navigator)及方法

    什么是window对象,window对象是浏览器内置的一个对象,相当于BOM的一个抽象
    window对象是js中全局对象的寄存地。
    window对象的常见方法:
    alert(要显示的文本);      //弹出信息框
    prompt(提示对话框信息);   //弹出输入框,点击确定,返回字符串,点击取消,返回null
    confirm(提示文字);        //点击确定返回true,点击取消返回false
 

 
    close();                //关闭浏览器(火狐不支持!),但都支持通过别的网页打开的新的网页关闭
                            //不允许关闭非脚本打开的页面
 
    open(url,name,feature,replace);
        //open('http://www.baidu.com','_blank','width=300,height=300')
        //谷歌会默认把系统自动打开的新网页阻止掉,但不阻止通过事件打开的网页   

    window对象下内置的子对象:

    1.history对象:该对象包含浏览器访问过的url。
        该对象的属性:
        history.length;         //返回历史记录的数量
        该对象的方法:
        history.back();         //后退,加载前一个url。
        history.forward();      //前进,需要后退一下之后,才有前进的方向
        history.go(num);        //参数为正,前进相应的数目,为负,后退相应的数目,为0,刷新
        
    2.location对象:包含当前url的相关信息,而history对象不能具体反映url的相关信息。
        该对象的属性:
        location.href;          //设置或返回完整的url
        location.search;        //返回url?后面的查询部分
        location.hash;          //是一个可读写的字符串,是url的锚部分(从#开始的部分)哈希
        该对象的方法:
        location.reload();      //刷新页面的方法,一般情况下,传递一个true,不使用缓存刷新。缓存?
        location.assign(url);   //加载新页面,当url为空字符时,加载当前页面
    3.navigator对象:浏览器信息
        navigator.appName;      //返回当前浏览器名
        navigator.appCodeName;  //返回当前浏览器的代码名
        navigator.appVersion;   //返回当前浏览器的版本号和平台
        navigator.platform;     //返回当前计算机的操作系统
        以上方法已经在逐渐被抛弃,出现一个新的属性替代这些属性:
        navigator.userAgent;    //返回浏览器信息
    拓展:4.frames对象:包含当前页面所有的框架信息。
               frames.length;                  //返回当前页面的框架数量
               frames[0].location;             //修改第一个框架的地址
            5.screen对象:包含当前显示屏信息
               screen.width/height             //屏幕总宽高度
               screen.availWidth/availHeight   //屏幕的宽高(不包括任务栏)

3.定时器

    延时器:
      setTimeout(function(){
               console.log(1);        //1000毫秒后,打印1
           },100)
    语法:setTimeout(函数或者代码串,指定的时间(毫秒));
    在指定的毫秒数后只执行一次函数或代码。
    清除延迟器:clearTimeout();
    定时器:
      setInterval(function(){
               console.log(1);        //每隔1000毫秒,打印一次1
           },100)
    语法:setInterval(函数或者代码串,指定的时间(毫秒));
    按照指定的周期(毫秒)不断的执行函数或者是代码串。
       表示每隔指定的时间,执行一次函数
    清除定时器:clearInterval();
    注意思考:为什么要清除计时器或延时器呢?

        防止计时器越跑越快,清除计时器

    
    功能:一定时间后调用
    参数:两个参数,一个函数,一个毫秒
    返回值:数字,当前定时器的唯一编号,用于关闭定时器

window.onload / onscroll/onresize 事件

    onload当文档加载完成后执行一些操作
    window.onload = function(){
        console.log("页面加载完成")
    }
    onscroll当页面发生滚动时执行一些操作
    window.onload = function(){
        console.log(1)            //当页面发生滚动时,打印1
    }
    onresize当窗口大小发生改变时执行一些操作
    window.onresize = function(){
        console.log(1)            //当窗口大小发生改变时,打印1
    }
    页面滚动条距离顶部的距离
    document.documentElement.scrollTop
    页面滚动条距离左边的距离
    document.documentElement.scrollLeft
    

1.DOM的概念和作用

    DOM是document Object Model的缩写,简称文档对象模型。他给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式,我们最关心的是,DOM把网页和脚本以及其他的编程语言联系了起来
    所谓的DOM是以家族的形式描述HTML。父子节点,兄弟节点
    JS用来做行为的,如何产生行为,当发生改变的时候,就产生了行为
    改变元素的内容(innerHTML),属性(value),样式(width,height,background)
    改变之前,至少应该先选择到要改变的元素
    DOM中的选择器
    1.getElementById(id)        //获取指定元素的ID元素
    
    2.getElementsByTagName()    //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组
    3.getElementsByName()       //通过name值获取元素,返回值是数组,通常用来获取有name的input的值
    4.getElementsByClassName()  //通过class名获取元素,返回值是数组n
    注意:1.不是所有标签都有name值;2.在低版本的浏览器中,getElementsByName和getElementsByClassName有兼容性
    ES5选择器:
    document.querySelectorAll();    //强大到超乎想象,支持IE8+。ECMAScript借鉴了jQuery选择器的
    //返回一个数组,哪怕只有一个元素
    document.querySelector();
    //返回单个元素
    
    根据父级,选择子级:
        oDiv.children;        //返回一个数组
    根据子级,选择父级:
        oSpan.parentNode;     //返回一个元素

2.DOM属性的基本操作(增/删/改/查)

    改变元素的内容(innerHTML),属性(value),样式(width,height,background)
    也就是对DOM进行增删改查
    DOM的属性操作,增删改查
    什么是元素的属性?class就是元素的属性,写在元素内的所有东西都是元素的属性,比如link的href,img的src等
    元素的属性是什么,分为两种,一种叫内置属性,一种叫非内置属性。
    内置属性可以直接通过点"."进行操作
    tagName               //返回值是当前元素的标签名
    innerHTML/innerText  //返回值是当前元素的内容
    id                    //返回值是当前元素的ID
    title                 //获取title的标签值,这个title是从document中获取的
    className             //返回值是当前元素的class
    href                  //返回值是当前的href的值
    以上这些属性既可以获取,也可以设置
    非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点
    getAttribute()        //获取 元素的属性
    setAttribute()        //设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值
    removeAttribute()     //删除 元素的属性,低版本的IE不兼容
    

3.节点

    根据DOM规定,HTML文档中的每个成分都是一个节点。
    DOM是这样规定的:
        整个文档是一个文档节点
        每个HTML标签是一个元素节点
        包含在HTML元素中的文本是文本节点
        每一个HTML属性是一个属性节点
        注释属于注释节点
    相当于HTML文档中的所有内容都是节点,元素是节点的别称,节点包含元素,当然节点还有好多细化的种类
    如何获取DOM节点:
          对象.parentNode    //获得父元素节点
          对象.children      //获得子元素节点的集合,不包含空白节点
                            //但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
          对象.childNodes    //获得所有子节点的集合,包括空白节点
                            //IE7/8不包含空文本节点,但IE7包含首个注释节点(前面没有元素节点),IE8包含所有注释节点
    如何获取属性节点:
          对象.attributes   //获得所有属性节点,返回一个数组

4.childNodes/过滤空白节点

    通过 对象.childNodes 获得所有子节点的集合
    节点属性 nodeType 返回值为数值
                    节点类型(nodeType)      节点名字(nodeName)      节点值(nodeValue)
       元素节点             1                        标签名                     null
       文本节点             3                        #text                     文本
       注释节点             8                       #comment               注释的文字
       文档节点             9                       #document                 null
       属性节点             2                        属性名                    属性值
    通过遍历所有子节点,将空白节点过滤掉,得出所有的元素节点

5.高级选取firstChild/lastChild/parentNode/previousSibling/nextSibling

    高级选取,(根据某一个节点位置找到它的父子,兄弟节点)
     父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟)。
    对象.childNodes              //获取当前元素节点的所有子节点
    对象.ownerDocument           //获取该节点的文档根节点,相当与 document
    对象.firstChild              //获得第一个子节点。(IE7/8非空白节点,可能是注释节点)
    对象.firstElementChild       //获得第一个非空白的子节点。(IE7/8不支持)
    对象.lastChild               //获得最后一个子节点(IE7最后一个元素节点,IE8最后一个非空白节点,可能是注释节点)
    对象.lastElementChild        //获得最后一个非空白的子节点。(IE7/8不支持)
    对象.nextSibling             //获得下一个兄弟节点。(包含空白节点和注释,IE7/8包括注释节点,不包括空白节点)
    对象.nextElementSibling      //获得下个兄弟节点。(IE7/8不支持)
    对象.previousSibling         //获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点,不包括空白节点)
    对象.prveiousElementSibling  //获得上一个兄弟节点。(IE7/8不支持)
    缺点:兼容性不好

6.DOM元素的基本操作(增/删/改/查)

    查询:选择器;
    创建:createElement()  配合  appendChild()    将创建好的元素,插入到某个标签内的最后
    删除:removeChild()  配合  parentNode
                元素.remove()    直接删除当前元素
    document.body.removeChild(div);
    修改: outerHTML
    oh1.outerHTML = "<h2>" + oh1.innerHTML +"</h2>"
    
    补充:创建文本节点createTextNode(“hello”)
         使用方式同createElement()

 

    获取非行内样式(兼容问题)

    function getStyle(obj,attr){             //获取非行间样式,obj是对象,attr是值
        if(obj.currentStyle){                //针对ie获取非行间样式
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj,false)[attr];   //针对非ie
        };
    };

7.offsetWidth/offsetHeight/offsetLeft/offsetTop

    offsetParent:获取元素的最近的具有定位属性(absolute或者relative)的父级元素。如果都没有则返回body
    offsetLeft:获取元素相对具有定位属性的父级元素的左侧偏移距离
    offsetTop:获取元素相对就有定位属性的父级元素的顶部偏移距离
    scrollLeft/scrollTop:滚动条最顶端和窗口中可见内容的最顶端之间的距离
    clientWidth/clientHeight:元素视窗宽度/高度
    offsetWidth/offsetHeight:元素实际宽度/高度
   有关浏览器及元素各项尺寸的图示:

原文地址:https://www.cnblogs.com/ZhaoWeiNotes/p/11561452.html