32-JavaScript-DOM-BOM简介-node常用方法和属性-window对象常用方法

待我称王封你为后i 2022-09-18 11:49 171阅读 0赞

\- BOM 介绍  
\- dom 对象  
\- dom对象简介  
\- 常用dom对象层次图  
\- dom对象详解  
\- window  
\- event  
\- document  
\- body  
\- style  
\- image  
\- link  
\- form  
\- all  
\- 其他

# 1. BOM #

Browser Object Model  
不属于文档的一些东西,  
Window Navigator Screen History Location  
w3c, 浏览器规范,

# 2. DOM对象层次图 #

# 3. 常用 DOM对象 的属性和方法 #

1) 属性  
  
nodeName  
nodeValue  
nodeType  
fristChild  
lastChild  
childNodes  
previousSibling  
nextSibling  
ownerDocument  
attributes  
  
2) 方法  
  
hasChildNodes()  
appendChild(node)  
removeChild(node)  
replaceChild(oldNode, newNode)  
insertBefore(newNode, refNode)

# 4. window对象 #

##  4.1 概念 ##

window对象 表示 一个浏览器窗口 或 一个框架.  
window对象是全局对象,  
可直接引用当前window对象的属性和方法

##  4.2 常用方法 ##

###  1) alert(message) ###

显示带有一条指定消息和一个 OK 按钮的警告框

###  2) confirm(message) ###

**① 功能**  
  
用于显示一个带有指定消息和 OK 及取消按钮的对话框  
  
返回值  
  
确认 - 返回 true  
取消 - 返回 false  
  
 **② 示例**

<button οnclick="testConfirm()">conform</button>

function testConfirm() {
            var result = window.confirm("您确认这么做?");
            console.info( typeof(result) + "  " + result );
        }

###  3) setInterval(func, millisec\[, args\])  ###

/ clearInterval(id\_of\_setinterval)  
  
 **① 功能**  
  
可按照指定的周期（以毫秒计）来调用函数或计算表达式  
一直执行, 直到 clearInterval() 被调用或窗口被关闭。  
  
参数  
  
func - 要调用的函数或要执行的代码串。  
millisec - 周期性执行或调用 code 之间的时间间隔，以毫秒计。  
  
返回值  
  
一个可以传递给 Window.clearInterval()  
从而取消对 func 的周期性执行的值  
  
 **② 示例 - 时钟 动画**

var id_of_setinterval;
    
        var clock;
        var img;
           
        window.onload = function() {
           clock = document.getElementById("clock");
           img = document.getElementById("img");
        }
    
        function showTime() {
            // console.info( new Date().toLocaleString() );
            clock.innerHTML = new Date().toLocaleString();
        }
    
        function run() {
           id_of_setinterval = window.setInterval(showTime, 1000);
        }
    
        function stop() {
            window.clearInterval(id_of_setinterval);
        }

![SouthEast][]

// 让静态图片动起来, 
        // 1.jpg 2.jpg 3.jpg 3.jpg 连续更换
        function animate() {
            var count = 1;
            window.setInterval(function(){
                img.src = (count++ % 4 + 1) + ".jpg";
            }, 500);
        }

###  4) setTimeout(code,millisec) ###

/ clearTimeout(id\_of\_settimeout)  
  
 **① 功能**  
  
用于在指定的毫秒数后调用函数或计算表达式,只执行一次  
  
参数  
  
code 要调用的函数后要执行的 JavaScript 代码串。  
millisec 在执行代码前需等待的毫秒数。  
  
 **② 示例**  
  
window.setTimeout("alert('setTimeout')",2000);

[SouthEast]: /images/20220828/faa9e5e1a23b439db99778c428cc88bc.png