a. 用 DOM 擷取 HTML中的標籤、子標籤、前一個、後一個等等
a. Use DOM to extract tags, subtags, previous ones, last ones, etc. in HTML
程式碼：002.html
Code: 002.html
<script>
var doc = document;
var n1 = doc.lastChild;
alert(n1.nodeName);
var n2 = n1.lastChild;
alert(n2.nodeName);
var n3 = n2.firstChild;
alert(n3.nodeName);
var n4 = n3.nextSibling;
alert(n4.nodeName);
</script>
執行結果：
Result:
b. 用 DOM 加上迴圈，取出 BODY 中的標籤，並一個一個顯示出來
b. Use DOM and loop to take out the tags from the BODY, and display them one by one.
程式碼：003.html
Code: 003.html
<script>
var doc = document;
var n1 = doc.lastChild;
alert(n1.nodeName);
var n2 = n1.lastChild;
alert(n2.nodeName);
alert(n2.childNodes.length);
for(var i=0;i<n2.childNodes.length;i++)
{
alert(n2.childNodes[i].nodeName);
}
</script>
c. 用 getElementsByTagName('body')[0]，得到的是陣列。利用按鈕來移除標籤
c. Use getElementsByTagName('body')[0] to get data array, then use button to remove tags
程式碼：004.html
Code: 004.html
<script>
function test()
{
var b = document.getElementsByTagName('body')[0];
alert(b.nodeName);
alert(b.hasChildNodes());
alert(b.childNodes.length);
}
function removeimg()
{
var b = document.getElementsByTagName('body')[0];
for(i=b.childNodes.length-1;i>=0;i--)
{
{
var n = b.childNodes[i];
if (n.nodeName.toLowerCase() == 'img')
{
b.removeChild(n);
}
}
}
}
</script>
</head>
<body id='b1'>
<p>這是一個測試, This is a Test
<input type="button" name="button" id="button" value="Click" onclick='test()' />
<input type="button" name="button" id="button" value="Clear" onclick='removeimg()' />
</p>
<p> </p>
<img src="Sunset.jpg" width="218" height="57" />
<p> </p>
<img src="Sunset.jpg" alt="" width="218" height="57" />
</body>
</html>
d. 用 getElementsByTagName('body')[0]，以及 createElement、createTextNode、appendChild 來建立及插入標籤
d. Use getElementsByTagName('body')[0] and createElement、createTextNode、appendChild to create and insert tags
程式碼：005.html
Code: 005.html
<script>
function create()
{
var doc = document;
var bodyElement = document.getElementsByTagName('body')[0];
var mynode = doc.createElement('p');
var textnode = doc.createTextNode('This is a test');
mynode.appendChild(textnode);
bodyElement.appendChild(mynode);
}
</script>
</head>
<body>
<input type="button" name="button" id="button" value="按鈕" onclick='create()' />
</body>
</html>
e. 完成插入及移除圖片的功能
e. To complete insert and remove pictures
程式碼：006_new.html
Code: 006_new.html
<style type="text/css">
#cards {
height: 800px;
width: 800px;
background-color: #FF0;
}
</style>
</head>
<body>
<p>請選擇要加入框中的圖片: Please select the pictures you want to add to the frame</p>
<p>1. <img src="cat/1.jpg" width="100" id="1"/> 2. <img src="cat/2.jpg" alt="" width="100" />
3. <img src="cat/3.jpg" width="100" /> 4. <img src="cat/4.jpg" alt="" width="100" />
5. <img src="cat/5.jpg" width="100" /></p>
<form id="form1" name="form1" method="post" action="" >
<label for="cats"></label>
<select name="cats" id="cats" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" name="button1" id="button1" value="加入, Add" onclick='create()' />
<input type="button" name="button2" id="button2" value="清除, Clear" onclick='removeimg()'/>
</form>
<div id="cards"></div>
<p> </p>
</body>
</html>
<script>
function create()
{
var doc = document;
var myloc = document.getElementById('cards');
var myimg = doc.createElement('img');
var sel = document.getElementById('cats');
//抓下拉式選單所選到的 selectedIndex
// Grab the selectedIndex selected by the drop-down menu
var i = sel.selectedIndex;
myimg.src = 'cat/' + (eval(i)+1) + '.jpg';
myloc.appendChild(myimg);
}
function removeing()
{
var myloc = document.getElementById('cards');
if (myloc.hasChildNodes() == true)
{
for ( i = myloc.childNodes.length -1 ; i >=0; i--) //反過來刪除標籤 // delete the tag
{
myloc.removeChild(myloc.childNodes[i]);
}
}
}
</script>
執行結果：
Result:
No comments:
Post a Comment