Tutorialspoint

Programming Examples

HTML DOM Location hash Property

<!DOCTYPE html>
<html>
<head>
<title>Location hash</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
} input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-hash</legend>
<label for="urlSelect">Current URL:</label>
<input type="url" size="27" id="urlSelect" value="https://www.example.com/">
<input type="text" id="textSelect" placeholder="hash value...">
<input type="button" onclick="setHashValue()" value="Go To URL">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var urlSelect = document.getElementById("urlSelect");
var textSelect = document.getElementById("textSelect");
function setHashValue() {
if(textSelect.value !== ''){
location.hash = textSelect.value;
urlSelect.value += location.hash;
divDisplay.textContent = 'Page loaded. Current URL active';
} else {
divDisplay.textContent = 'Please provide a hash value';
}}
</script>
</body>
</html>

HTML DOM Local Storage clear method

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage clear()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
} input[type="button"] {
border-radius: 10px;
} table,th,td {
border:1px solid black;
border-collapse: collapse;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>LocalStorage clear( )</legend>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr>
<td>PassKey</td>
<td>ja12ertplo</td>
</tr>
</table>
<input type="button" value="Store Key" onclick="storeData()">
<input type="button" value="Delete Key" onclick="clearData()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
function clearData(){
localStorage.clear();
divDisplay.textContent = 'Succesfully Deleted';
}
function storeData(){
localStorage.setItem('PassKey','ja12ertplo');
divDisplay.textContent = 'Succesfully Stored';
}
</script>
</body>
</html>

HTML DOM links Collection

<!DOCTYPE html>
<html>
<head>
<title>Links Collection length</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
} input[type="button"] { border-radius: 10px;
} area {
border:1px solid black;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Links-Collection-length</legend>
<a href="https://www.google.com">Google</a>
<a href="https://www.bing.com">Bing</a>
<input type="button" value="Get Links" onclick="getLinks()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
function getLinks(){
var links = document.links.length;
divDisplay.textContent = 'Total Links: '+links;
for (var i = 0; i < links; i++) {
divDisplay.textContent += '--> '+document.links[i]+' ';
}}
</script>
</body>
</html>

HTML DOM Link type Property

<!DOCTYPE html>
<html>
<head>
<title>Link type</title>
<link id="extStyle" rel="stylesheet" href="style.css" type="myStyle">
</head>
<body>
<form>
<fieldset>
<legend>Link-type</legend>
<input type="button" value="Correct Type" onclick="correctType()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
divDisplay.textContent = 'The linked document type: '+extStyle.type+' is not compatible';
function correctType(){
extStyle.type = 'text/css';
divDisplay.textContent = 'Congrats! The linked document type: '+extStyle.type+' is
compatible';
}
</script>
</body>
</html>

HTML DOM Link sizes Property

<!DOCTYPE html>
<html>
<head>
<title>Link sizes</title>
<link id="extStyle" rel="icon" href="new.gif" sizes="10x10">
</head>
<body>
<form>
<fieldset>
<legend>Link-sizes</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
if(extStyle.sizes == '10x10')
divDisplay.textContent = 'The linked icon size: '+extStyle.sizes+' is not compatible';
else
divDisplay.textContent = 'Congrats! The linked icon size is compatible';
</script>
</body>
</html>

HTML DOM Link rel Property

<!DOCTYPE html>
<html>
<head>
<title>Link rel</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-rel</legend>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
if(extStyle.rel === 'stylesheet')
divDisplay.textContent = 'The linked document is of type stylesheet';
else
divDisplay.textContent = 'The linked document is of type '+extStyle.rel;
</script>
</body>
</html>

HTML DOM Link Object

<!DOCTYPE html>
<html>
<head>
<title>Link Disabled</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-disabled</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<input type="button" onclick="beautify()" value="Disable Styling">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
var extStyle = document.getElementById("extStyle");
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
function enableWeekInput() {
inputWeek.disabled = false;
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
}
function beautify(){
extStyle.disabled = true;
}
</script>
</body>
</html>

HTML DOM Link hreflang Property

<!DOCTYPE html>
<html>
<head>
<title>Link hreflang</title>
<link id="extStyle" hreflang='en' rel="stylesheet" type="text/css" href="style.css">
<style>
    
    form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
h3 {
   font-size: 72px;
   color:gold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Link-hreflang</legend>
<h3>Spanish</h3>
<input type="button" onclick="changeStyle()" value="In what language is linked document
written?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var extStyle = document.getElementById("extStyle");
function changeStyle(){
if(extStyle.hreflang === 'en'){
divDisplay.textContent = 'The linked document is written in english';
document.getElementsByTagName('h3')[0].textContent = 'English'
}}
</script>
</body>
</html>

HTML DOM Link href Property

<!DOCTYPE html>
<html>
<head>
<title>Link href</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-href</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<input type="button" onclick="changeStyle()" value="Change Style">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
var extStyle = document.getElementById("extStyle");
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
function enableWeekInput() {
inputWeek.disabled = false;
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
}
function changeStyle(){
extStyle.href = 'anotherStyle.css';
}
</script>
</body>
</html>

HTML DOM Link disabled Property

<!DOCTYPE html>
<html>
<head>
<title>Link Disabled</title>
<link id="extStyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<fieldset>
<legend>Link-disabled</legend>
<label for="WeekSelect">Sales Target Week:
<input type="week" id="WeekSelect" value="2020-W13" disabled>
</label>
<input type="button" onclick="enableWeekInput()" value="Change Sales Target Week">
<input type="button" onclick="beautify()" value="Disable Styling">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
var extStyle = document.getElementById("extStyle");
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
function enableWeekInput() {
inputWeek.disabled = false;
divDisplay.textContent = 'Week Input disabled: '+inputWeek.disabled;
}
function beautify(){
extStyle.disabled = true;
}
</script>
</body>
</html>

Advertisements
Loading...

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.