Scribd
Upload
198 views

(Innerhtml, ..) Şi Metode (Getelementsbyid, ) Dom Apelate/Accesate Cu Ajutorul Javascript. Conţinutul Afişat Trebuie Să Fie Formatat Utilizînd Css

The document provides two examples of using JavaScript and DOM (Document Object Model) to extract and display data from an XML document containing business card information for two individuals. In the first example, the data is extracted and used to populate corresponding div elements on the HTML page using innerHTML. In the second example, the data is extracted and displayed in an alert pop-up window when links are clicked. Both examples extract name, phone, email, and company data from the XML and display it using JavaScript DOM methods.

Uploaded by

IonEftodii
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
198 views

(Innerhtml, ..) Şi Metode (Getelementsbyid, ) Dom Apelate/Accesate Cu Ajutorul Javascript. Conţinutul Afişat Trebuie Să Fie Formatat Utilizînd Css

The document provides two examples of using JavaScript and DOM (Document Object Model) to extract and display data from an XML document containing business card information for two individuals. In the first example, the data is extracted and used to populate corresponding div elements on the HTML page using innerHTML. In the second example, the data is extracted and displayed in an alert pop-up window when links are clicked. Both examples extract name, phone, email, and company data from the XML and display it using JavaScript DOM methods.

Uploaded by

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

Sarcina 1: S se afieze coninutul unui document XML utiliznd proprieti

(innerHTML, ..) i metode (getElementsById, ) DOM apelate/accesate cu


ajutorul Javascript.
Coninutul afiat trebuie s fie formatat utiliznd CSS.
Exemplu de aplicare gasii la adresa:
http://technotip.com/1859/display-xml-data-with-dom-innerhtml-xml-javascript/
index.html
<html>
<head><title>Our Business Card!</title>
<link rel="stylesheet" href="Style.css" />
<script language="javascript" type="text/javascript">
function display1() {
var base = document.getElementById ("myBiz");
var person1 = base.getElementsByTagName ("companyName")[0];
var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
var company;
company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
document.getElementById("name").innerHTML = name;
document.getElementById("phone1").innerHTML = phone1;
document.getElementById("phone2").innerHTML = phone2;
document.getElementById("email").innerHTML = email;
document.getElementById("company").innerHTML = company;
}
function display2() {
var base = document.getElementById("myBiz");
var person1 = base.getElementsByTagName("companyName")[1];
var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
var company;
company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
document.getElementById("name").innerHTML = name;
document.getElementById("phone1").innerHTML = phone1;

document.getElementById("phone2").innerHTML = phone2;
document.getElementById("email").innerHTML = email;
document.getElementById("company").innerHTML = company;
}

</script>
</head>
<body onload="display2()">
<xml id="myBiz" style="display: none;">
<companynames>
<companyname>
<name>Satish B</name>
<phone type="home" primary="call me">(91) 9844552841</phone>
<phone type="work">(91) 9844119841</phone>
<email>[email protected]</email>
<company>Technotip IT Solutions</company>
</companyname>
<companyname>
<name>Shwetha</name>
<phone type="home">(91) 123456789</phone>
<phone type="work" primary="call me">(91) 987654321</phone>
<email>[email protected]</email>
<company>Microsoft</company>
</companyname>

</companynames>
</xml>
<div class="companyName">
<div class="Name" id="name"></div>
<div class="phone1" id="phone1"></div>
<div class="phone2" id="phone2"></div>
<div class="email" id="email"></div>
<div class="company" id="company"></div>
</div>
</body>
</html>
style.css
.companyName
{ font-family: Verdana;
font-size: 18px;
color: red;
display: block;
padding: 10px;

margin: 20px;
background-color: ivory;
width: 400px;
border: 5px;
border-color: gray;
text-align: left;
}
.Name
{ display: block;
font-weight: bold;
}
.phone
{ display: block;
}
.company
{ display:block;
}
.email
{
display: block;
color: Green;
}

Exemplu 2
index.html
<html>
<head><title>Our Business Card!</title>
<script language="javascript" type="text/javascript">
function display1() {
var base = document.getElementById("myBiz");
var person1 = base.getElementsByTagName("companyName")[0];
var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
var company;
comanyy = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
alert("Business Card: \n\n" + name + "\n" + phone1 + "\n"
+ phone2 + "\n" + email + "\n" + company);
}

function display2() {
var base = document.getElementById("myBiz");
var person2 = base.getElementsByTagName("companyName")[1];
var name = "Name: " + person2.getElementsByTagName("Name")[0].firstChild.data;
var phLable1 = person2.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
var phone1 = phLable1 + person2.getElementsByTagName("phone")[0].firstChild.data;
var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
var phone2 = phLable2 + person2.getElementsByTagName("phone")[1].firstChild.data;
var email = "email: " + person2.getElementsByTagName("email")[0].firstChild.data;
var company;
comapany = "Company: " + person2.getElementsByTagName("company")[0].firstChild.data;
alert("Business Card: \n\n" + name + "\n" + phone1 + "\n"
+ phone2 + "\n" + email + "\n" + company);
}
</script>
</head>
<body>
<xml id="myBiz" style="display: none;">
<companynames>
<companyname>
<name>Satish B</name>
<phone type="home" primary="call me">(91) 9844552841</phone>
<phone type="work">(91) 9844119841</phone>
<email>[email protected]</email>
<company>Technotip IT Solutions</company>
</companyname>
<companyname>
<name>Shwetha</name>
<phone type="home">(91) 123456789</phone>
<phone type="work" primary="call me">(91) 987654321</phone>
<email>[email protected]</email>
<company>Microsoft</company>
</companyname>
</companynames>

</xml>
<a href="javascript:display1()">Satish: Technotip IT Solutions</a><br />
<a href="javascript:display2()">Shwetha: Microsoft</a>

</body>
</html>

You might also like