One-step learning of Silverlight 2 series (19): how to interact with html dom in Silverlight (I)

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The article "one-step learning Silverlight 2 series" takes you to Silverlight 2 development quickly from the following aspects: Silverlight 2 basic knowledge, data and communication, custom controls, animation, and graphic images.

Silverlight has built-in support for HTML and client scripts. This article describes how to interact with html dom in Silverlight 2, and access and modify DOM elements.

Access DOM elements

Let's first look at a simple example of how to access the html dom. The final result is as follows. We will place two divs on the interface, namely div1 and div2. The following green area is the Silverlight section, enter the div id in the first text box and click show. The text information on the corresponding div is displayed below.

First, modify the test page because the height occupied by the default Silverlight plug-in is 100% and the value is PX.

<div  style="height:200px">    <asp:Silverlight ID="Xaml1" runat="server"     Source="~/ClientBin/TerryLee.SilverlightAccessingHtmlDom1.xap"     Version="2.0" Width="100%" Height="200px" /></div>

Place two divs at the same time:

<Div id = "div1"> here is the first div, And the id is div1 </div> <div id = "div2"> here is the second div, id is div2 </div>

For the sake of clarity, define simple styles for them:

#div1{    background:#FCE2BC;    border:solid 1px #FF9900;    width:500px;    height:50px;    margin-bottom:20px;}#div2{    background:#BCC8FC;    border:solid 1px #4769F9;    width:500px;    height:50px;    margin-bottom:20px;    }

Implement the interface layout of Silverlight. Use Canvas to define its background as light green. The XAML is as follows:

<Canvas Background = "# D5FCDF"> <TextBlock Text = "Silverlight Accessing the html dom" Foreground = "Red" Canvas. top = "10" Canvas. left = "30" FontSize = "18"> </TextBlock> <WatermarkedTextBox x: name = "input" Watermark = "enter" Height = "40" Width = "300" Canvas here. left = "30" Canvas. top = "50"> </WatermarkedTextBox> <WatermarkedTextBox x: Name = "result" Watermark = "The result is displayed here" Height = "40" Width = "300" Canvas. left = "30" Canvas. top = "100"> </WatermarkedTextBox> <Button x: name = "displayButton" Background = "Red" Height = "40" Width = "100" Content = "display" Canvas. top = "50" Canvas. left = "350" Click = "displayButton_Click"> </Button> </Canvas>

Access html dom. Silverlight 2 in the namespace System. windows. browser has many built-in support for html dom access and operations. One of our most common objects is HtmlElement. You can obtain the document model of the current page through the HtmlPage static class, finally, call the GetElementsByTagName or GetElementById method.

HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);

In this way, we get a DOM element, and then use its GetAttribute to get the relevant attributes:

this.result.Text = element.GetAttribute("innerText");

The complete code is as follows:

private void displayButton_Click(object sender, RoutedEventArgs e){    HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);    this.result.Text = element.GetAttribute("innerText");}

After running, enter div1 In the first text box:

After you click show, the text of div1 is displayed in the second text box:

Operate DOM elements

Through the above example, we have learned how to access the html dom. Now let's take a look at the operations on the html dom, such as how we change the content of the DOM, and use the above example, make a slight modification, enter the DOM id in the first text box, and enter the content to be modified in the second text box.

In fact, this is very simple. You only need to make minor changes to the Code and use the SetAttribute method. The first parameter specifies the attribute name and the second parameter specifies the attribute value. For example:

private void displayButton_Click(object sender, RoutedEventArgs e){    HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);    element.SetAttribute("innerText",this.result.Text);}

After running, enter div2 and some content, and click OK:

 

Modify the DOM element style

In addition to the GetAttribute and SetAttribute methods mentioned above, HtmlElement also provides a set of GetStyleAttribute and SetStyleAttribute methods for obtaining and setting DOM styles, such:

private void displayButton_Click(object sender, RoutedEventArgs e){    HtmlElement element = HtmlPage.Document.GetElementById(this.input.Text);    element.SetStyleAttribute("width",this.result.Text);    element.SetStyleAttribute("height", this.result.Text);}

After running, enter div1 and 100. The effect is as follows:

 

Conclusion

This article describes how to access DOM in Silverlight and modify DOM attributes. Next I will introduce how to change the DOM structure, such as adding and removing DOM elements and registering events for DOM elements.

Next article: Learn Silverlight 2 series (20) step by step: how to interact with html dom in Silverlight (II)