# Document
The **`Document`** interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the [DOM tree](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Using_the_Document_Object_Model#what_is_a_dom_tree).
Valid Document Functions
# title
{% hint style="danger" %}
This property currently does not exist and is a **work in progress**. \
Please use [getTitle](/websitecreator/luascript/dom/document/gettitle) & [setTitle](/websitecreator/luascript/dom/document/settitle)
{% endhint %}
The **`document.title`** property gets or sets the current title of the document. **`document.title`** defines the document's title that is shown in a browser's title bar or a page's tab.
document.title = "String"
Examples
```lua
document.title = "New Title!"
```
```lua
document.addEventListener("DOMContentLoaded",function()
document.title = "DOM Loaded!"
end)
```
# setTitle
The **`getTitle`** method gets the current title of the document. **`setTitle`** defines the document's title that is shown in a browser's title bar or a page's tab.
document.setTitle("Test")
Examples
```lua
document.setTitle("New Title!")
```
```lua
document.addEventListener("DOMContentLoaded",function()
document.setTitle("New Title!")
end)
```
# getTitle
The **`getTitle`** method gets the current title of the document. **`setTitle`** defines the document's title that is shown in a browser's title bar or a page's tab.
document.getTitle(): Title
Examples
```lua
print(document.getTitle())
```
```lua
document.addEventListener("DOMContentLoaded",function()
print("Title is", document.getTitle())
end)
```
# addEventListener
The **`addEventListener()`** method sets up a function that will be called whenever the specified event is delivered to the target.
**Returns** EventId
```lua
document.addEventListener(eventName: String,callback: function): EventId
```
Examples
local eventid = document.addEventListener("DOMContentLoaded",function(timeTaken)
-- DOMContentLoaded gives you the time taken to load the DOM which uses os.clock
-- This only runs ONCE and it's when the page is first loaded.
print("DOM Took " .. tostring(timeTaken) .. " to load!"
end)
local eventid2 = document.addEventListener("DOMContentRefreshed",function(timeTaken)
-- DOMContentRefreshed gives you the time taken to load the DOM which uses os.clock
-- This only runs every time you make a change using LuaScript which reloads the
-- entire DOM
print("DOM Took " .. tostring(timeTaken) .. " to load!"
end)
```lua
local eventid = document.addEventListener("customEvent",function(arg1)
print("Custom Event Loaded!", arg1)
end)
document.dispatchEvent("customEvent", "test")
```
# removeEventListener
The **`removeEventListener()`** method removes any Event Listener using their eventID
**Returns** EventId
```lua
document.removeEventListener(eventName: String, EventId: EventId): void
```
Examples
local eventid = document.addEventListener("DOMContentLoaded",function(timeTaken)
-- DOMContentLoaded gives you the time taken to load the DOM which uses os.clock
-- This only runs ONCE and it's when the page is first loaded.
print("DOM Took " .. tostring(timeTaken) .. " to load!"
end)
document.removeEventListener(eventid)
```lua
local eventid = document.addEventListener("customEvent",function(arg1)
print("Custom Event Loaded!", arg1)
end)
document.removeEventListener(eventid)
-- Event will dispatch but no print will occur
document.dispatchEvent("customEvent", "test")
```
# dispatchEvent
The **`dispatchEvent()`** method sends an Event to the object, invoking the affected event listeners in the appropriate order.
```lua
document.dispatchEvent(eventName: String, ...arguments): void
```
Examples
```lua
document.addEventListener("customEvent1",function(arg1,arg2,arg3)
print(arg1,arg2,arg3)
end)
document.dispatchEvent("customEvent1", "test1","test2","test3")
```
document.addEventListener("UserCommented",function(username,data)
print(username .. " has commented on post id:" .. data.postid ". Here is the data!",data)
end)
document.dispatchEvent("UserCommented","Roblox",{postid: 5,message:"This is cool!!",date:"Fri Jul 26 01:12:22 2024", upvotes: 9000, downvotes:200})
document.dispatchEvent("UserCommented","PFearr",{postid: 0,message:"Hello!",date:"Wed Jul 31 01:12:22 2024", upvotes: 999999, downvotes:-99999})
# createNode
The method **`createNode()`** creates the HTML element specified by *tagName.* Within the arguments you may also include attributes and the text included.
document.createNode(TagName,AttributeTable,Text)
Examples
```lua
document.createNode("p",{id="id",style="color:red"},"This is a paragraph element!")
```
```javascript
document.createNode("frame",{["frame-data"]="E_E",style="background-color:red"},"Paragraph within the frame
")
```
# querySelector
The method **`querySelector()`** returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, `null` is returned.
Querys
| Symbol | Query | |
|---|
| # | id | |
| . | class | |
| <blank> | tag | |
Example
```javascript
document.querySelector("#id") // Returns the FIRST element with the ID of id
```
```javascript
document.querySelector(".id") // Returns the FIRST element with the className of id
```
```javascript
document.querySelector("label") // Returns the FIRST element that is a LABEL
```
# getElementById
The method **`getElementById()`** returns the first Element within the document that matches the specific ID
```javascript
document.getElementById("id") // Returns the FIRST element with the ID of id
```
# cloneNode
The **`cloneNode()`** method clones a specific element and returns it
**Example**
```lua
local elm = document.querySelector("body").querySelector("#clone")
local clonedElm = document.cloneNode(elm)
document.querySelector("body").appendChild(clonedElm)
```
# Elements
An **element** is a part of a webpage. In [XML](https://developer.mozilla.org/en-US/docs/Glossary/XML) and [HTML](https://developer.mozilla.org/en-US/docs/Glossary/HTML), an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some [attributes](https://developer.mozilla.org/en-US/docs/Glossary/Attribute), enclosed text content, and a closing tag.
Elements and [tags](https://developer.mozilla.org/en-US/docs/Glossary/Tag) are *not* the same things. Tags begin or end an element in source code, whereas elements are part of the [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM), the document model for displaying the page in the [browser](https://developer.mozilla.org/en-US/docs/Glossary/Browser).
# getElementById
The method **`getElementById()`** returns the first Element within the element that matches the specific ID
```javascript
elem.getElementById("id") // Returns the FIRST element with the ID of id
```
# getElementsById
The method **`getElementsById()`** returns all Elements within the element that matches the specific ID
```javascript
elem.getElementsById("id") // Returns ALL element with the ID of id
```
# querySelector
The method **`querySelector()`** returns the first Element within the element that matches the specified selector, or group of selectors. If no matches are found, `null` is returned.
Querys
| Symbol | Query | |
|---|
| # | id | |
| . | class | |
| <blank> | tag | |
Example
```javascript
elem.querySelector("#id") // Returns the FIRST element with the ID of id
```
```javascript
elem.querySelector(".id") // Returns the FIRST element with the className of id
```
```javascript
elem.querySelector("label") // Returns the FIRST element that is a LABEL
```
# querySelectorAll
The method **`querySelectorAll()`** returns all Elements within the element that matches the specified selector, or group of selectors. If no matches are found, `null` is returned.
Querys
| Symbol | Query | |
|---|
| # | id | |
| . | class | |
| <blank> | tag | |
Example
```javascript
elem.querySelectorAll("#id") // Returns ALL element with the ID of id
```
```javascript
elem.querySelectorAll(".id") // Returns ALL element with the className of id
```
```javascript
elem.querySelectorAll("label") // Returns ALL element that are a LABEL
```
# appendChild
The **`appendChild()`** method adds a Element to the end of the list of children of a element.
**Example**
local name = window.input("What is your name?","My name is ...")
local elm = document.createNode("p",{style="color:red"},string.format("Welcome %s",name))
document.querySelector("body").appendChild(elm)
# insertBefore
The **`insertBefore()`** method adds a Element to the end of the list of children of a element.
**Example**
local name = window.input("What is your name?","My name is ...")
local elm = document.createNode("p",{style="color:red"},string.format("Welcome %s",name))
document.querySelector("body").insertBefore(elm,1) -- Inserts at the front
# removeChild
The **`removeChild()`** method removes a Element with it's index
**Example**
```lua
document.querySelector("body").removeChild(1)
```
# insertAttribute
The **`insertAttribute()`** method adds a attribute to a element
**Example**
```lua
document.querySelector("body").insertAttribute("id","id 1")
```
# removeAttribute
The remove**`Attribute()`** method removes a attribute from a element
**Example**
```lua
document.querySelector("body").removeAttribute("id")
```
# cloneNode
The **`cloneNode()`** method clones the current element and returns it
**Example**
```lua
local elm = document.querySelector("body").querySelector("#clone").cloneNode()
document.querySelector("body").appendChild(elm)
```
# Window
The **`Window`** interface represents a window containing a [DOM](https://developer.mozilla.org/en-US/docs/Glossary/DOM) document; the `document` property points to the [DOM document](https://developer.mozilla.org/en-US/docs/Web/API/Document) loaded in that window.
# Location
**`location`** is a read-only property which returns functions with information about the current location of the document.
# reload
The **`reload()`** method of the Location interface reloads the current URL, like the Refresh button.
This reload the page instantly
Example
```lua
window.location.reload()
```
# to
The **`to()`** method of the Location interface redirects the user to another page
Example
```lua
window.location.to(URL)
```
```lua
window.location.to("https://rhodium.com")
```
# teleport
{% hint style="warning" %}
This will not instantly teleport the player. A popup will appear asking if the player want's to be teleport to the place.
{% endhint %}
The **`teleport()`** method of the Location interface teleports the user to another experience
Example
```lua
window.location.teleport(GameID)
```
```lua
window.location.teleport(14916849806)
```
# localStorage
The **`localStorage`** read-only property of the window interface allows you to read and write to the browser storage.
# setKey
The **`setKey()`** method of the localStorage interface saves a key with it's value in the browser storage
Example
```lua
window.localStorage.setKey(key,value)
```
```lua
window.localStorage.setKey("session","93b21393-3dfb-428c-b6c0-2ee3c8018a6f")
```
# getKey
The **`getKey()`** method of the localStorage interface gets the saved data stored with the key name
Example
```lua
window.localStorage.getKey("session") --> "93b21393-3dfb-428c-b6c0-2ee3c8018a6f"
```
# deleteKey
The **`deleteKey()`** method of the localStorage interface removes a key from the browser storage
Example
```lua
window.localStorage.deleteKey("session")
```
# getKeys
The **`getKeys()`** method of the localStorage interface gets every single key and it's value
Example
```lua
window.localStorage.getKeys() --> {session = "93b21393-3dfb-428c-b6c0-2ee3c8018a6f"}
```
# alert
`window.alert()` instructs the browser to display a dialog with an optional message, and to wait until the user dismisses the dialog.
Examples
```lua
window.alert(Text)
```
```lua
window.alert("Hello! This is an alert")
```
# input
`window.input()` instructs the browser to display a dialog with an optional message prompting the user to input some text, and to wait until the user either submits the text or cancels the dialog.
Examples
```lua
window.input(Text, Placeholder)
```
```lua
window.input("What is your name?", "My name is ...")
```
# delay
Delay is just LUA native wait
Delay takes **1** numeric argument called seconds. Delay yields the entire thread until the time is completed.
```lua
print("Hello!")
delay(1) -- wait 1 second
print("Hello after 1 second") -- Prints after 1 second
```
# setTimeout
setTimeout is just LUA native `delay` expect it does not yield the current running thread
setTimeout takes **2** arguments, the function and numeric timeout in seconds
local Age = 18
print("You are " .. Age .. " years old!")
setTimeout(function()
Age = 23
print("You are now " .. Age .. " years old!")
end, 5)
print("You are still " .. Age .. " years old!")
# setInterval
setInterval is just LUA native `delay` expect it runs infinitely every timeout
setInterval takes **2** arguments, the function and numeric timeout in seconds
setInterval **returns** the **interval timeout ID,** you can use this to stop the interval using [clearInterval](/websitecreator/luascript/clearinterval)
```lua
local Age = 1
setInterval(function()
Age = Age + 1
print("You are " .. Age .. " years old")
end, 5) -- every 5 seconds this will print the current Age
```
# clearInterval
clearInterval stops a currently running Interval using it's ID
clearInterval takes **1** arguments, the timeout ID
```lua
local Age = 1
local interval = setInterval(function()
Age = Age + 1
print("You are " .. Age .. " years old")
end, 5) -- every 5 seconds this will print the current Age
delay(20) -- wait 20 seconds
clearInterval(interval) -- stop the current running interval
print("Final age " .. Age)
```
# MarketPlace
MarketPlace is responsible for websites transactions.
MarketPlace has methods that fetch information about developer products or prompt transactions popup
Their are various functions to help you monetize your website
# promptGamepass
Prompts the user to purchase a [gamepass](https://create.roblox.com/docs/production/monetization/game-passes) with the given gamePassId.
```lua
marketplace.promptGamepass(gamePassId: Number): void
```
# promptProductPurchase
Prompts a user to purchase a [developer product](https://create.roblox.com/docs/production/monetization/developer-products) with the given productId.
`equipIfPurchase` defaults to true if argument is not provided
```lua
marketplace.promptProductPurchase(productId: Number, equipIfPurchased: Boolean): void
```
# promptPurchase
Prompts a user to purchase an item with the given assetId.
`equipIfPurchase` defaults to true if argument is not provided
```lua
marketplace.promptProductPurchase(assetId: Number, equipIfPurchased: Boolean): void
```
# hasGamepass
Returns true if the player with the given [UserId](https://create.roblox.com/docs/reference/engine/classes/Player#UserId) owns the [pass](https://create.roblox.com/docs/production/monetization/game-passes) with the given gamePassId, not to be confused with an asset ID.
```lua
marketplace.hasGamepass(gamePassId: Number): Boolean
```
# hasAsset
Returns whether the inventory of the given player contains an asset
```lua
marketplace.hasAsset(assetId: Number): Boolean
```
# purchaseSuccess
This event fires when a purchase dialog for a [pass](https://create.roblox.com/docs/production/monetization/game-passes) is closed. It fires as the dialog closes, when the player presses "Cancel" at the prompt or "OK" at the success/error message.
marketplace.purchaseSuccess(callbackFunction: function): void
marketplace.purchaseSuccess(function(player: PlayerObject, purchaseType: Enum, wasPurchase: Boolean)
-- Enum.PurcahseType GamePass | MemberShip | Product
-- wasPurchase only returns for GamePasses and Product not MemeberShip
if purcahseType == Enum.PurcahseType.GamePass then
print(player.Name .. " purchased a gamepass")
elseif purcahseType == Enum.PurcahseType.Product then
print(player.Name .. " purchased a product")
else
print(player.Name .. " purchased a membership")
end
end)
[^1]: [Player](/websitecreator/luascript/player)
