Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Samp Object
The HTML DOM Samp Object represents the HTML <samp> element, which is used to display sample output from computer programs, scripts, or systems. The <samp> element typically renders text in a monospace font to distinguish it from regular content.
The DOM Samp Object provides access to all standard HTML element properties and methods, allowing you to manipulate <samp> elements dynamically with JavaScript.
Syntax
To create a new Samp object using JavaScript −
document.createElement("SAMP");
To access an existing <samp> element −
document.getElementById("sampId");
document.getElementsByTagName("samp")[0];
Creating a Samp Object
You can create a Samp object dynamically using the document.createElement() method. This is useful when you need to display program output or sample text generated by your JavaScript code.
Example
Following example demonstrates creating and manipulating a Samp object −
<!DOCTYPE html>
<html>
<head>
<title>DOM Samp Object Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f9f9f9;
}
h1 { color: #23CE6B; }
.btn {
background-color: #0197F6;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.btn:hover { background-color: #017ac4; }
samp {
background-color: #f4f4f4;
border: 1px solid #ddd;
padding: 8px;
margin: 10px;
display: block;
font-family: 'Courier New', monospace;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>DOM Samp Object Demo</h1>
<button onclick="createSamp()" class="btn">Create Samp Object</button>
<button onclick="modifySamp()" class="btn">Modify Existing Samp</button>
<button onclick="clearSamps()" class="btn">Clear All</button>
<samp id="existingSamp">Original sample output: Hello World!</samp>
<script>
function createSamp() {
var sampElement = document.createElement("SAMP");
sampElement.innerHTML = "Output of console.log(2 + 3) in JavaScript is: 5";
sampElement.id = "dynamicSamp" + Date.now();
document.body.appendChild(sampElement);
}
function modifySamp() {
var existingSamp = document.getElementById("existingSamp");
existingSamp.innerHTML = "Modified sample: Math.sqrt(16) = " + Math.sqrt(16);
existingSamp.style.backgroundColor = "#e8f5e8";
}
function clearSamps() {
var sampElements = document.getElementsByTagName("samp");
for (var i = sampElements.length - 1; i >= 0; i--) {
if (sampElements[i].id !== "existingSamp") {
sampElements[i].remove();
}
}
document.getElementById("existingSamp").innerHTML = "Original sample output: Hello World!";
document.getElementById("existingSamp").style.backgroundColor = "#f4f4f4";
}
</script>
</body>
</html>
The output shows three buttons that create, modify, and clear samp elements. The existing samp element displays sample output text −
DOM Samp Object Demo [Create Samp Object] [Modify Existing Samp] [Clear All] Original sample output: Hello World!
Properties and Methods
The Samp object inherits all standard HTML element properties and methods. Some commonly used ones include −
- innerHTML − Sets or returns the HTML content inside the samp element
- textContent − Sets or returns the text content without HTML markup
- style − Allows you to set CSS styles dynamically
- className − Sets or returns the class attribute value
- id − Sets or returns the id attribute value
Example − Accessing Samp Properties
Following example demonstrates accessing and modifying properties of a samp element −
<!DOCTYPE html>
<html>
<head>
<title>Samp Object Properties</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
samp {
background-color: #f8f8f8;
padding: 5px;
font-family: monospace;
border-left: 3px solid #007acc;
margin: 10px 0;
display: block;
}
.highlight { background-color: #ffeb3b !important; }
button {
background-color: #007acc;
color: white;
border: none;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
border-radius: 3px;
}
</style>
</head>
<body>
<h2>Samp Object Properties Demo</h2>
<samp id="sampleOutput">$ ls -la<br>total 24<br>drwxr-xr-x 3 user user 4096 Oct 15 10:30 .</samp>
<button onclick="changeContent()">Change Content</button>
<button onclick="toggleHighlight()">Toggle Highlight</button>
<button onclick="showProperties()">Show Properties</button>
<div id="info"></div>
<script>
function changeContent() {
var samp = document.getElementById("sampleOutput");
samp.innerHTML = "$ python script.py<br>Hello, World!<br>Process completed successfully.";
}
function toggleHighlight() {
var samp = document.getElementById("sampleOutput");
samp.classList.toggle("highlight");
}
function showProperties() {
var samp = document.getElementById("sampleOutput");
var info = document.getElementById("info");
info.innerHTML = "<h3>Samp Element Properties:</h3>" +
"<p><strong>ID:</strong> " + samp.id + "</p>" +
"<p><strong>Tag Name:</strong> " + samp.tagName + "</p>" +
"<p><strong>Class Name:</strong> " + samp.className + "</p>" +
"<p><strong>Text Length:</strong> " + samp.textContent.length + " characters</p>";
}
</script>
</body>
</html>
This example shows how to access and modify various properties of the samp element, including content manipulation and style changes.
Common Use Cases
The <samp> element and DOM Samp Object are commonly used for −
- Displaying command line output − Show terminal or console results
- Code examples − Present sample output from programming examples
- Error messages − Display system or application error outputs
- Log entries − Show formatted log file contents
- API responses − Present sample JSON or XML responses
Example − Command Line Simulator
Following example creates a simple command line simulator using the Samp object −
<!DOCTYPE html>
<html>
<head>
<title>Command Line Simulator</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #1e1e1e;
color: #fff;
}
.terminal {
background-color: #000;
border: 1px solid #333;
padding: 10px;
border-radius: 5px;
max-height: 300px;
overflow-y: auto;
}
samp {
color: #00ff00;
font-family: 'Courier New', monospace;
display: block;
margin: 2px 0;
}
input {
background-color: #000;
color: #fff;
border: none;
font-family: monospace;
width: 100%;
padding: 5px;
outline: none;
}
</style>
</head>
<body>
<h2>Command Line Simulator</h2>
<div class="terminal" id="terminal">
<samp>Welcome to HTML DOM Terminal v1.0</samp>
<samp>Type 'help' for available commands</samp>
</div>
<input type="text" id="commandInput" placeholder="$ " onkeypress="handleCommand(event)">
<script>
function handleCommand(event) {
if (event.key === 'Enter') {
var input = document.getElementById('commandInput');
var command = input.value.trim();
var terminal = document.getElementById('terminal');
// Display the command
var cmdSamp = document.createElement('samp');
cmdSamp.innerHTML = '$ ' + command;
cmdSamp.style.color = '#fff';
terminal.appendChild(cmdSamp);
// Process command and create output
var output = processCommand(command);
var outputSamp = document.createElement('samp');
outputSamp.innerHTML = output;
terminal.appendChild(outputSamp);
// Clear input and scroll to bottom
input.value = '';
terminal.scrollTop = terminal.scrollHeight;
}
}
function processCommand(cmd) {
switch(cmd.toLowerCase()) {
case 'help':
return 'Available commands: help, date, clear, echo [text]';
case 'date':
return new Date().toString();
case 'clear':
setTimeout(() => {
document.getElementById('terminal').innerHTML = '';
}, 100);
return 'Terminal cleared';
default:
if (cmd.startsWith('echo ')) {
return cmd.substring(5);
}
return 'Command not found: ' + cmd;
}
}
</script>
</body>
</html>
This simulator creates samp elements dynamically to display both user commands and system responses in a terminal-like interface.
Conclusion
The HTML DOM Samp Object provides programmatic access to <samp> elements, enabling dynamic creation and manipulation of sample output content. It supports all standard HTML element properties and methods, making it versatile for displaying formatted program output, command line results, and system responses in web applications.
195 Views
