Home Web Front-end JS Tutorial Analysis of the difference between window.location and document.location_javascript skills

Analysis of the difference between window.location and document.location_javascript skills

May 16, 2016 pm 06:57 PM

document.location This object contains the information of the current URL
location.host Get the port number
location.hostname Set or get the host name
location.href Set or get the entire URL
location.port Set or Get the port number of the URL
location.search Set or get the part following the question mark in the href attribute
------------------------ -------------------------------------------------- -----
Application of window.location in js
URL is: Uniform Resource Locator (URL)
The complete URL consists of these parts:
scheme: //host:port/path?query#fragment
scheme: Communication protocol
Commonly used http, ftp, maito, etc.
host: host
Server (computer) Domain Name System (DNS) host name or IP address.
port: port number
Integer, optional. When omitted, the default port of the scheme is used. For example, the default port of http is 80.
path: path
A string separated by zero or more "/" symbols, generally used to represent a directory or file address on the host.
query: Query
is optional and is used to pass parameters to dynamic web pages (such as web pages made using CGI, ISAPI, PHP/JSP/ASP/ASP.NET and other technologies). There can be multiple parameters, use " Separated by &" symbols, the name and value of each parameter are separated by "=" symbols.
fragment: information fragment
String, used to specify the fragment in the network resource. For example, if there are multiple noun explanations in a web page, you can use fragment to directly locate a certain noun explanation. (Also called anchor point.)
For a URL like this
http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
We can use javascript to get each part of it
1, window.location.href
The entire URL string (the complete address bar in the browser)
The return value in this example: http: //www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
Protocol part of URL
The return value in this example: http:
3,window.location.host
The host part of the URL
The return value in this example: www.x2y2.com
4,window.location.port
The port part of the URL
If the default port 80 is used (update: even if :80 is added), then the return value is not the default 80 but an empty character
In this case the return value is: ""
5, window.location.pathname
The path part of the URL (that is, the file address)
The return value in this example:/fisker/post/0703/window.location.html
6,window.location.search
In the query (parameter) part
in addition to assigning values ​​to dynamic languages, we can also assign values ​​to static pages and use javascript to obtain the corresponding parameter values ​​
The return value in this example:?ver=1.0&id=6
7,window.location.hash
Anchor ======================================== ====
document.href="http://www.jb51.net"
document.location="http://www.jb51.net"
window.location="http: //www.jb51.net"
It’s just a question of inclusion
One is window and the other is document
location is an object. For example, the attributes of document.location and window.location on this page are
location .hostname = community.csdn.net
location.href = http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02
location.host = community. csdn.net
location.hash =
location.port =
location.pathname = /Expert/topic/4033/4033372.xml
location.search = ?temp=2.695864E-02
location.protocol = http:
It can be seen that href is the attribute type of location, which is string.
[document object]
This object is an attribute of the window and frames objects, and is a document displayed in the window or frame.
Attributes
alinkColor The color of the active link (ALINK)
anchor An HTML anchor, created using the tag (the attribute itself is also an object)
anchors array lists the document anchor objects Array (
) (this attribute itself is also an object)
bgColor The background color of the document (BGCOLOR)
Cookie is a piece of information stored in the cookie.txt file, which is an attribute of the document object
 fgColor The text color of the document (TEXT attribute in the tag)
Form A form (

) in the document (the attribute itself is also an object)
Forms anay appears in the document as it appears An array of form objects listed in order (this property itself is also an object)
LastModified The last modified date of the document
linkColor The color of the link to the document, that is, the LINK attribute in the tag (link to user No observed document)
link A
tag in the document (the attribute itself is also an object)
links array An array of link objects in the document, arranged in the order they appear in the document (the The attribute itself is also an object)
Location The URL of the currently displayed document. The user cannot change document.location (because this is the location where the document is currently displayed).However,
can change window.location (replace the current document with another document) window.location itself is also an object, and
document.location is not an object
referrer contains the URL of the linked document, which the user clicks The link can reach the current document
Title The title of the document ((TITLE>)
vlinkColor The text color of the link pointing to the document that the user has observed, that is, the VLINK attribute of the tag
Method
clear Clear Specify the content of the document
close close the document stream
open open the document stream
write write the text into the document
writeln write the text into the document and end with a newline character
[window object]
It is a top-level object, not a property of another object, that is, the browser window
Property
defaultStatus The default status bar message
document The currently displayed document (this property itself is also an object. )
frame A frame in the window ((FRAME>) (this attribute itself is also an object)
frames array lists an array of frame objects of the window, listed in the order in which these objects appear in the document (this attribute Itself is also a
object)
History The history list of the window (this attribute itself is also an object)
Length The number of frames in the window
Location The complete (absolute) URL of the document displayed in the window (this attribute It is also an object in itself) Do not confuse it with document.location
, which is the URL of the currently displayed document. The user can change window.location (replacing the current document with another document), but cannot change
. document.location (because this is the location where the document is currently displayed)
name When the window is opened, the name given to the window
opener represents the window where the script that uses window.open to open the current window is located (this is Netscape Navigator 3.0beta A new attribute introduced by
in 3)
 Parent contains the synonym of the window of the current frame. An attribute of the frame and window objects
 self The synonym of the current window or frame
Status The message in the status bar
Top synonym for the topmost browser window containing the current frame
window synonym for the current window or frame, the same as self
Method
alert() Open an Alert message box
clearTimeout() Used to terminate the work of the setTimeout method
Close() Close the window
Confirm() Open a Confirm message box, the user can choose OK or Cancel, if the user clicks OK, this method returns true, click
Cancel returns false
 blur() Moves the focus from the specified window (this is a new method introduced in Netscape Navigator 3.0 beta 3)
 focus() Brings the specified window to the foreground (another new method)
open() opens a new window
prompt() opens a Prompt dialog box, the user can type text into the box, and returns the typed text to the script
setTimeout() waits for a specified number of milliseconds, Then run the command event handler event handler
Onload() is triggered when the page is loaded
Onunload() is triggered when the page is closed
Difference: The user cannot change document.location (because this is the location where the document is currently displayed ). However, window.location can be changed (replacing the current document with another document). window.location itself is also an object, while document.location is not an object.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

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 Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles