search
HomeWeb Front-endJS TutorialDetailed introduction to window and document in js

Detailed introduction to window and document in js

May 02, 2021 pm 12:04 PM
documentjswindow

Detailed introduction to window and document in js

First let’s take a look at window, which represents an open window in the browser.

Object properties

  window //窗口自身
  window.self //引用本窗户window=window.self
  window.name //为窗口命名
  window.defaultStatus //设定窗户状态栏信息
  window.location //URL地址,配备布置这个属性可以打开新的页面

Object methods

  window.alert("text") //提示信息会话框
  window.confirm("text") //确认会话框
  window.prompt("text") //要求键盘输入会话框
  window.setIntervel("action",time) //每一隔指定的时间(毫秒)就执行一次操作
  window.clearInterval() //清除时间配备布置作用就是终止轮回
  window.setTimeout(action,time) //隔了指定的时间(毫秒)执行一次操作
  window.open() //打开新的窗口
  window.close() //关闭窗口

Member objects

  window.event
  window.document //见document对象详解
  window.history
  window.screen
  window.navigator
  window.external
  -------------------------------------------------- -------------------
  window.history对象
  window.history.length //浏览过的页面数
  history.back() //后退
  history.forward() //前进
  history.go(i) //前进或后退到历史记录的第i个页面
  //i>0进步,i<0 后退
    ------------------------------------------------- -------------------
  window.screen对象
     window.screen.width //屏幕宽度
  window.screen.height //屏幕高度
  window.screen.colorDepth //屏幕色深
  window.screen.availWidth //可用宽度
  window.screen.availHeight //可用高度(除去任务栏的高度)
  -------------------------------------------------- -------------------
  window.external对象
  window.external.AddFavorite("地址","标题" ) //把网站新增到保藏夹
  -------------------------------------------------- -------------------
  window.navigator对象
  window.navigator.appCodeName //浏览器代码名
  window.navigator.appName //浏览器应用程序名
  window.navigator.appMinorVersion //浏览器补丁版本
  window.navigator.cpuClass //cpu类型 x86
  window.navigator.platform //操作体系类型 win32
  window.navigator.plugins
  window.navigator.opsProfile
  window.navigator.userProfile
  window.navigator.systemLanguage //客户体系语言 zh-cn简体中文
  window.navigator.userLanguage //用户语言,同上
  window.navigator.appVersion //浏览器版本
  window.navigator.userAgent
  window.navigator.onLine //用户否在线
  window.navigator.cookieEnabled //浏览器是否撑持cookie
  window.navigator.mimeTypes

(Learning video sharing: java video tutorial)

document object--represents the entire HTML document and can be used to access all elements in the page:

Object properties

document.title                 //设置文档标题等价于HTML的
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期,只读属性
document.fileModifiedDate      //文件修改日期,只读属性
document.fileSize              //文件大小,只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集 简体中文:gb2312

Common object methods

document.write()                      //动态向页面写入内容
document.createElement_x(Tag)           //创建一个html标签对象
document.getElementByIdx_x(ID)           //获得指定ID值的对象
document.getElementsByName(Name)      //获得指定Name值的对象
document.body.appendChild(oTag)

body-body sub-object

document.body                   //指定文档主体的开始和结束等价于
document.body.bgColor           //设置或获取对象后面的背景颜色
document.body.link              //未点击过的链接颜色
document.body.alink             //激活链接(焦点在此链接上)的颜色
document.body.vlink             //已点击过的链接颜色
document.body.text              //文本色
document.body.innerText         //设置...之间的文本
document.body.innerHTML         //设置...之间的HTML代码
document.body.topMargin         //页面上边距
document.body.leftMargin        //页面左边距
document.body.rightMargin       //页面右边距
document.body.bottomMargin      //页面下边距
document.body.background        //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象

Common object events

document.body.οnclick="func()"              //鼠标指针单击对象是触发
document.body.οnmοuseοver="func()"          //鼠标指针移到对象时触发
document.body.οnmοuseοut="func()"           //鼠标指针移出对象时触发

location-location sub-object

document.location.hash          // #号后的部分
document.location.host          // 域名+端口号
document.location.hostname      // 域名
document.location.href          // 完整URL
document.location.pathname      // 目录部分
document.location.port          // 端口号
document.location.protocol      // 网络协议(http:)
document.location.search        // ?号后的部分

Common object events

documeny.location.reload()          //刷新网页
document.location.reload(URL)       //打开新的网页
document.location.assign(URL)       //打开新的网页
document.location.replace(URL)      //打开新的网页
========================================================================
selection-选区子对象
document.selection
========================================================================
images集合(页面中的图象):
----------------------------
a)通过集合引用
document.images                 //对应页面上的标签
document.images.length          //对应页面上标签的个数
document.images[0]              //第1个标签          
document.images[i]              //第i-1个标签
----------------------------
b)通过nane属性直接引用
document.images.oImage          //document.images.name属性
----------------------------
c)引用图片的src属性
document.images.oImage.src      //document.images.name属性.sr

Related recommendations: java introductory tutorial

The above is the detailed content of Detailed introduction to window and document in js. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:csdn. If there is any infringement, please contact admin@php.cn delete
Python vs. JavaScript: A Comparative Analysis for DevelopersPython vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AM

The main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.

Python vs. JavaScript: Choosing the Right Tool for the JobPython vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AM

Whether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.

Python and JavaScript: Understanding the Strengths of EachPython and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AM

Python and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.

JavaScript's Core: Is It Built on C or C  ?JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AM

JavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.

JavaScript Applications: From Front-End to Back-EndJavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AM

JavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.

Python vs. JavaScript: Which Language Should You Learn?Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AM

Choosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.

JavaScript Frameworks: Powering Modern Web DevelopmentJavaScript Frameworks: Powering Modern Web DevelopmentMay 02, 2025 am 12:04 AM

The power of the JavaScript framework lies in simplifying development, improving user experience and application performance. When choosing a framework, consider: 1. Project size and complexity, 2. Team experience, 3. Ecosystem and community support.

The Relationship Between JavaScript, C  , and BrowsersThe Relationship Between JavaScript, C , and BrowsersMay 01, 2025 am 12:06 AM

Introduction I know you may find it strange, what exactly does JavaScript, C and browser have to do? They seem to be unrelated, but in fact, they play a very important role in modern web development. Today we will discuss the close connection between these three. Through this article, you will learn how JavaScript runs in the browser, the role of C in the browser engine, and how they work together to drive rendering and interaction of web pages. We all know the relationship between JavaScript and browser. JavaScript is the core language of front-end development. It runs directly in the browser, making web pages vivid and interesting. Have you ever wondered why JavaScr

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools