DOM操作
在此之前，你已經看到JavaScript框架使用選擇器和DOM遍歷可以輕鬆的獲得特定的元素。但是，為了改變網頁上特定元素的內容和外觀，你需要操作DOM並且套用改變。使用純粹的JavaScript將是一件繁重的工作，但幸運的是，大多數JavaScript框架提供有用的函數，可以輕鬆做到這些。
假設你有一個ID為the-box的盒子。
<div id="the-box">Message goes here</div>
使用jQuery將其文字改為“Message goes here”，可以很簡單的這樣使用：
$('#the-box').html('This is the new message!');
事實上，你可以在函數中使用HTML程式碼，它能被瀏覽器解析，例如：
$('#the-box').html('This is the <strong>new</strong> message!');
在本例中，DIV元素中的內容看起來像這樣：
<div id="the-box">This is the <strong>new</strong> message!'</div>
當然，在實例中你需要使用大於或小於等特殊字符，而不是指定特殊的HTML實體代碼。你可以使用jQuery的text函數來代替：
$('#the-box').text('300 >200');
div元素更新後程式碼如下：
<div id="the-box">300 > 200</div>
在上面的例子中，現有的內容被替換為新的內容。如果你只想給文字附加一些資訊該怎麼辦？幸運的是，jQuery提供append函數達到此目的。
$('#the-box').append(', here goes message');
對原始的div作如上操作後，div元素裡的內容看起來是這樣的：
<div id="the-box">Message goes here, here goes message</div>
除了追加，你可以在前面追加內容，將其插入到現存內容的前面而不是後面。此外，jQuery提供的函數可以在給定元素內插入內容，要么在前要么在後。還有函數替換內容、清空內容、移除元素、克隆元素等等。
除了DOM操作函數外，JavaScript框架通常還包含幾個函數操作元素的樣式和class。例如，你有一個表格，當滑鼠經過時會高亮顯示某行。你可以建立一個特殊的類別名稱hover，你可以將該類別動態的加入到某行。利用YUI你可以用下面的程式碼判斷該行是否擁有hover類別名，有則免之，無則加之。
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
同樣，大多數JavaScript框架都擁有操作CSS的內建函數。