Windows对象是所有客户端javascript特性和API的主要接入点,它表示一个窗口或者窗体。它定义了一些属性,例如,指代Location对象的location属性,Location对象指定显示在窗口中的URL,并允许往窗口中载入新的URL。
window.location = “www.baidu.com”; //设置location属性从而跳转到新的web页面
Window对象还定义了一些方法,例如alert()、setTimeOut()。
setTimeout(function(){alert(“hello”)},2000); //2s后调用function弹出hello
Window对象中最重要的属性是document,它是Document对象,用来显示窗口中的文档。Document包含一些重要的方法。例如,getElementById()会基于元素id属性获取文档中的单一的文档元素。
var timestamp = document.getElementById(“timestamp”); //获取timestamp元素
获得的Element对象也有一些重要的方法,如获取内容,设置属性值。
if( timestamp.firstChild == null) //如果元素为空,往里面插入当前的时间 timestamp.appendChild(document.createTextNode(new Date().toString));
每个Element对象都有style和className属性,允许脚本指定元素的css属性。
timestamp.style.backgroundColor=”yellow”; timestamp.className=”highlight”;
Window、Document、Element对象都有事件处理属性,这些属性名均以“on”开头:
timestamp.onclick=function(){this.innerHTML=new Date().toString();} //单击更新内容
Windows对象最重要的事件处理函数之一是onload,当文档内容稳定并可以操作时,它会触发。Javascript通常封装在onload事件里。
<!DOCTYPE html> <html> <head> <style> .reveal * { display: none; } .reveal *.handle { display: block; } </style> <script> //所有的页面逻辑在onload事件后启动 window.onload=function(){ //找到reaveal容器 var elements=document.getElementsByClassName("reveal"); for(var i=0;i<elements.length;i++){ var elt=elements[i]; //找到reaveal容器中的handle元素 var title=elt.getElementsByClassName("handle")[0]; addRevealHandler(title,elt); } function addRevealHandler(title,elt){ title.onclick=function(){ if(elt.className=="reveal"){ elt.className="revealed"; } else if(elt.className=="revealed"){ elt.className="reveal"; } } } } </script> </head> <body> <div class="reveal"> <h1 class="handle"> click to hidden</h1> <p>hidden </p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style> #clock { font : bold 24pt sans; background : #ddf; padding : 10px; border : solid black 2px; border-radius : 10px; } </style> <script> function displayTime(){ var element=document.getElementById("clock"); var now = new Date(); element.innerHTML = now.toLocaleTimeString(); setTimeout(displayTime,1000); //每一秒后再执行 } window.onload=displayTime; </script> </head> <body> <span id="clock"></span> </body> </html>
相关推荐
判断目标是否是window,document,和拥有tagName的Element的代码,需要的朋友可以参考下。
Element Positioning with CSS Section 18.3. Scripting Styles Section 18.4. DHTML in Fourth-Generation Browsers Section 18.5. Other DOM APIs for Styles and Style Sheets Chapter 19. Events and...
• window o history o location o frames[]; Frame o document anchors[]; links[]; Link applets[] embeds[] forms[]; Form Button Checkbox elements[]; Element Hidden ...
Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2
Highlighter.js 是一个小型(纯 javascript)的库,可以让你轻松导航、选择以及高亮 DOM ... window.console.log('Highlighter underlined this element:', Highlighter.element); }); 标签:Highlighter
(function(window, document, exportName, undefined) { 'use strict'; var VENDOR_PREFIXES = ['', 'webkit', 'moz', 'MS', 'ms', 'o']; var TEST_ELEMENT = document.createElement('div'); var TYPE_FUNCTION ...
Whether you want to create sidebars that remain in the viewport (browser window), add sticky section headings to lists or long articles, or overlap one element with another, this concise ebook will ...
4d-component-reset-debugger-window 在 v13、v14 和 v15 中重置调试器窗口边界的辅助方法 ... $window:=DOM Find XML element($dom;"preferences/internal_prefs_4d/windows/window";$windows) C_LONGINT($i)
var f = element.ownerDocument.parentWindow.frameElement || null; if (f) { var offset = 2 - (f.frameBorder || 1) * 2; offsetX += offset; offsetY += offset; } } catch(ex) { } return new Sys...
// Will speed up references to window, and allows munging its name. window = this, // Will speed up references to undefined, and allows munging its name. undefined, // Map over jQuery in case of ...
window . elementSizeWatch ( document . querySelector ( selector ) , options ) ; 选项参数内容: querySpec (可选): 一个字符串,指定要在每次调整元素大小时要检查的测试。 querySpec的格式为: ' [{{-,...
} var element = frame.document.getElementById(identifier); if (element && element.getAttribute(‘id’) === identifier) { return element; } // else if (browserVersion.isIE || browserVersion.isOpera) {...
没有浏览器的 Rust 中的 DOM你好,...let doc= sbox.clone ().window ().document ();let document_element= HtmlHtmlElement::new (Arc::downgrade (& sbox), ()); doc.append_child (document_element);// We
添加事件: 代码如下://比如addListener(document,”click”,function(){alert(‘阿会楠’)}) function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false);...
Resolved issue 2736: Close Window command should handle user prompts based on session capabilities [[Pri-2]] Resolved issue 1963: Sending keys to disabled element should throw Element Not interactable...
用法- node is element or text node- element is element- text is text nodeif not defined $ and $$, it will define window.$ = function(selector) { return typeof selector === "string" ? document....
Resolved issue 2736: Close Window command should handle user prompts based on session capabilities [[Pri-2]] Resolved issue 1963: Sending keys to disabled element should throw Element Not interactable...
代码如下:[removed]=function(e){ var e=window.event||e; var element=e.srcElement||e.target; if(e.keyCode==13&&element.type!=”submit”&&element.type!=”button”&&element.type!=”textarea”&&element....
$ document ready function { $ document bind "contextmenu" function e { return false; } ; } ; 2 搜索输入框文字的消失 当鼠标获得焦点 失去焦点的时候 input输入框文字处理: $ document ...