Scribd
Upload
7 views

Script

The document describes properties and methods available to manipulate the document object in JavaScript. It includes examples of changing background colors, text content, and HTML elements by id or class name. Methods demonstrated include getElementById, getElementsByClassName, and querySelectorAll. Functions are defined to change colors, text, images, and select element values.

Uploaded by

Muhammed Yasser
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

Script

The document describes properties and methods available to manipulate the document object in JavaScript. It includes examples of changing background colors, text content, and HTML elements by id or class name. Methods demonstrated include getElementById, getElementsByClassName, and querySelectorAll. Functions are defined to change colors, text, images, and select element values.

Uploaded by

Muhammed Yasser
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

/**

* document
* Properties --> [bgColor - fgColor - title - cookie - .....]
* Methods --> [getElementById - getElementsByClassName - getElementsByTagName -
getElementsByName]
*/

// document.bgColor = "red"
var f = 0;
function changeBGColor(){
if(f == 0){
document.bgColor = "black";
document.fgColor = "white";
document.getElementById("btn1").value = "Default Mood";
f = 1;
}
else{
document.bgColor = "white";
document.fgColor = "black";
document.getElementById("btn1").value = "Dark Mood";
f = 0;
}
}

//toggle("bgfgcolor")

function changeP(){
// document.getElementById("p1").innerHTML = "Hello World !!"
// document.getElementById("p1").innerText = "<b>Hello World !!</b>"
// document.getElementById("p1").innerHTML = "<b>Hello World !!</b>"
document.getElementById("p1").textContent = "<b>Hello World !!</b>"
}

function change3P(){
// console.log(document.getElementsByClassName("ppClass"));
// document.getElementsByClassName("ppClass").innerHTML = "Hello !!"
// for(var i=0; i<document.getElementsByClassName("ppClass").length; i++){
// document.getElementsByClassName("ppClass")[i].innerHTML = "Hello !!";
// }
// console.log(document.querySelector(".ppClass"))
// console.log(document.querySelector("#ppID"))
// console.log(document.querySelectorAll("div"))
// console.log(document.querySelectorAll("p"))
// console.log(document.querySelectorAll("img"))
// console.log(document.querySelectorAll(".ppClass"))

var elements = document.querySelectorAll(".ppClass");


for(var i = 0; i<elements.length; i++){
elements[i].innerHTML = "<b>Hello !!</b>"
}
}

function mouseOver1(){
document.getElementById("img1").src = "../Images/2.jpg"
}

function mouseOut1(){
document.getElementById("img1").src = "../Images/1.jpg"
}

console.log(document.forms);
//Forms - Images - Anchors - Links

function GetSelectedElement(){
var sel = document.getElementById("s1");
var idx = sel.selectedIndex;
// console.log(sel.options[idx]);
for(var i = 0; i<sel.options.length; i++){
if(sel.options[i].selected){
console.log(sel.options[i].value);
}
}
}

function funNums(myButton){
// console.log(myButton.value);
document.getElementById("ttt1").value += myButton.value;
}

function ClearData(){
document.getElementById("ttt1").value = "";
}

You might also like