JavaScript操作Bom、Dom对象

JavaScript操作Bom、Dom对象

BOM模型

• BOM：浏览器对象模型（Browser Object Model）
  • BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
• BOM可实现功能
  • 弹出新的浏览器窗口
  • 移动、关闭浏览器窗口以及调整窗口的大小
  • 页面的前进、后退
• img

1. window对象的常用属性

   • 常用的属性

   • 常用的方法

     • 属性名称	说明
       history	有关客户访问过的URL信息
       location	有关当前URL的信息

     • window.属性名= "属性值" 
       

     • window.location="https://www.baidu.com" ; 
       //表示跳转到百度首页
       

2. window对象的常用方法

   • 常用的方法

     • 方法名称	说明
       prompt（）	显示可提示用户输入的对话框
       alert()	显示带有一个提示信息和一个确定按钮的警示框
       confirm()	显示一个带有提示信息、确定和取消按钮的对话框
       close()	关闭浏览器窗口
       open()	打开一个新的浏览器窗口，加载给定的URL所指定的文档
       setTimeout()	在指定的毫秒数后调用函数或计算表达式
       setInterval()	按照指定的周期(以毫秒计)来调用函数或表达式

3. confirm()方法

   • confirm()与alert()、prompt()区别

     • alert():一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

     • prompt():两个参数，输入对话框，用来提示用户输入一些信息，单击"取消"按钮则返回null，单击"确定"按钮则返回用户输入值，常用于收集用户关于特定问题而反馈的信息

     • confirm():一个参数，确认对话框，显示提示对话框消息、"确定"按钮和"取消"按钮，单击”确定“按钮返回true，单击”取消“按钮返回法拉瑟，因此与if-else语句搭配使用

4. open()方法

   • 属性名称	说明
     height、width	窗口文档显示区的高度、宽度。以像素计
     left、top	窗口的x坐标、y坐标。以像素计
     toolbar=yes|no|1|0	是否显示浏览器的工具栏。默认是yes
     scrollbars=yes|no|1|0	是否显示滚动条。默认是yes
     location=yes|no| 1|0	是否显示地址地段。默认是yes
     status=yes|no|1|0	是否添加状态栏。默认yes
     menubar=yes|no|1|0	是否显示菜单栏。默认是yes
     resizable=yes|no|1|0	窗口是否可调节尺寸。默认是yes
     titlebar=yes|no|1|0	是否显示标题栏。默认是yes
     fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口必须同时处于剧院模式

   • window.open("弹出窗口的url","窗口名称","窗口特征")
     

5. history对象

   • 常用方法

   • 名称	说明
     back()	加载history对象列表中的前一个URL
     forward（）	加载history对象列表中的下一个URL
     go()	加载history对象列表中的某个具体URL

   • history．back 等价于 history.go(-1) 浏览器中的“后退”

   • history.back 等价于 history.go(1) 浏览器中的“前进”

6. location对象

   • 常用属性

     • 名称	说明
       host	设置或返回主机名和当前URL的端口号
       hostname	设置或返回当前URL的主机名
       href	设置或返回完整的URL

   • 常用方法

     • 名称	说明
       reload()	重新加载当前文档
       replace()	用新的文档替换当前文档

7. Document对象

   • 常用属性

     • 名称	说明
       referrer	返回载入当前文档的URL
       URL	返回当前文档的URL

     • document.referrer
       document.URL
       //语法
       

   • Document对象的常用方法

     • 名称	说明
       getElementById()	返回对拥有指定id的第一个对象的引用(对象的id唯一)
       getElementByName()	返回带有指定名称的对象的集合(相同name属性)
       getElementsByTagName()	返回带有指定标签名的对象的集合(相同元素)
       write()	向文档写文本、HTML表达式或JavaScript代码

8. JavaScript内置对象

   • Array：用于在单独的变量名中存储一系列的值
   • String：用于支持对字符串的处理
   • Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
   • Date：用于操作日期和时间

9. Date对象

   • 方法	说明
     getDate()	返回Date对象的一个月中的一天，其值介于1~31之间
     getDay	返回Date对象的星期中的一天，其值介于0~6之间
     getHours()	返回Date对象的小时数，其值介于0~23之间
     getMinutes()	返回Date对象的分钟数，其值介于0~59之间
     getSeconds()	返回Date对象的秒数，其值介于0~59之间
     getMonth()	返回Date对象的月份，其值介于0~11之间
     getFullYear	返回Date对象的年份，其值为4位数
     getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

10. Math对象

    • 常用方法

      • 方法	说明	示例
        ceil	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
        floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
        round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
        random()	返回0~1之间的随机数	Math.random();例如： 0.6273608814137365

11. 定时函数

    • setTimeout()

      • setTimeout("调用的函数",等待的毫秒数);
        var myTime＝setTimeout("disptime() ", 1000 );//1秒(1000毫秒)之后执行
        函数disptime()一次
        

    • setinterval()

      • setInterval("调用的函数",间隔的毫秒数)
        var myTime＝setInterval("disptime() ", 1000 );//每隔1秒(1000毫秒)执行函数disptime()一次
        //如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout()
        

    • clearTimeout()

      • clearTimeout(setTimeOut()返回的ID值)
        var myTime＝setTimeout("disptime() ", 1000 );
        clearTimeout(myTime)；//清除函数
        

    • clearInterval ()

      • clearInterval(setInterval()返回的ID值)
        var myTime＝setInterval("disptime() ", 1000 );
        clearInterval(myTime)；//清除函数
        

12. 操作DOM

    • [图片上传失败...(image-e55d66-1573610613629)]

    • [图片上传失败...(image-cc6d55-1573610613629)]

    • 访问节点

      • 使用getElement系列方法访问指定节点
        • getElementById()
        • getElementsByName()
        • getElemtsByTagName()

    • 根据层次关系访问节点

      • 节点属性

      • 属性名称	描述
        parentNode	返回节点的父节点
        childNodes	返回子节点集合，childNodes[i]
        firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本 节点
        lastChild	返回节点的最后一个子节点
        nextSibling	下一个节点
        previousSibling	上一个节点

    • 根据层次关系访问节点

      • element属性

        • 属性名称	描述
          firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
          lastElementChild	返回节点的最后一个子节点
          nextElementSibling	下一个节点
          previousElementSibling	上一个节点

    • 节点信息

      • nodeName:节点名称

      • node Value:节点值

      • nodeType:节点类型

        • 节点类型	NodeType值
          元素element	1
          属性attr	2
          文本text	3
          注释comments	8
          文档document	9

    • 操作节点的属性

      • getAttribute("属性名")
        setAttribute("属性名","属性值")
        

    • 创建和插入节点

      • 创建节点

        • 名称	描述
          createElement( tagName)	创建一个标签名为tagName的新元素节点
          A.appendChild( B)	把B节点追加至A节点的末尾
          insertBefore( A,B )	把A节点插入到B节点之前
          cloneNode(deep)	复制某个指定的节点

    • 删除和替换节点

      • 名称	描述
        removeChild( node)	删除指定的节点
        replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

      • var delNode=document.getElementById("first");
        delNode.parentNode.removeChild(delNode);
        var oldNode=document.getElementById("second");
        var newNode=document.createElement("img");
        newNode.setAttribute("src","images/f03.jpg");
        oldNode.parentNode.replaceChild(newNode,oldNode);
        

13. style属性

    • HTML元素.style.样式属性＝"值"

      • document.getElementById("titles").style.color="#ff0000";
        document.getElementById("titles").style.fontSize="25px ";
        

    • 名称	描述
      onclick	当用户单击某个对象时调用事件
      onmouseover	鼠标移到某元素之上
      onmouseout	鼠标从某元素移开
      onmousedown	鼠标按钮被按下

    • 背景backgroundColor、backgroundImage、backgroundRepeat

    • 文本fontSize、fontWeight、textAlign、textDecoration、font、color

    • 边距padding、paddingTop 、paddingBottom、paddingLeft、paddingRight

    • 边框border、borderTop、borderBottom、borderLeft、borderRight

14. className属性

    • HTML元素.className="样式名称"

      • function over(){
        document.getElementById("cart").className="cartOver";
        document.getElementById("cartList").className="cartListOver";
        }
        function out(){
        document.getElementById("cart").className="cartOut";
        document.getElementById("cartList").className="cartListOut";
        }
        

15. 获取元素的样式

    • HTML元素.style.样式属性;

      • alert(document.getElementById("cartList").display);
        

    • document.defaultView.getComputedStyle(元素,null).属性;

      • var cartList=document.getElementById("cartList");
        alert(document.defaultView.getComputedStyle(cartList,null).display);
        

    • HTML元素. currentStyle.样式属性;

      • alert(document.getElementById("cartList").currentStyle.display);
        //currentStyle  兼容IE浏览器
        

    • HTML 中元素属性

      • 元素属性应用

      • 属性	描述
        offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
        offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
        offsetHeight	返回元素的高度
        offsetWidth	返回元素的宽度
        offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
        scrollTop	返回匹配元素的滚动条的垂直位置
        scrollLeft	返回匹配元素的滚动条的垂直位置
        clientWidth	返回元素的可见宽度
        clientHeight	返回元素的可见高度

    • 元素属性的应用

      • document.documentElement.scrollTop;//标准浏览器

      • document.documentElement.scrollLeft;//标准浏览器

      • 或者

      • document.body.scrollTop;//Chrome

      • document.body.scrollLeft;//Chrome

      • var sTop=document.documentElement.scrollTop||document.body.scrollTop;