javascript中關於DOM的程式碼示例及相關筆記
1.做一個編輯框，裡面可以選擇字型的顏色、字形、樣式，程式碼如下：
<!DOCTYPE html>
<html><head>
<title>學習javascript程式碼</title>
</head>
<body>
<fieldset>
<legend>編輯區</legend>
<div>
<form>
字型顏色：
<select onchange="setFontColor(this)">
<option value="black">Dlack </option>
<option value="red">Red </option>
<option value="green">Green </option>
<option value="blue">Blue </option>
</select>
字型樣式：
<select onchange="setFontStyle(this)">
<option value="bold">Bold </option>
<option value="italic">Italic </option>
<option value="underline">Underline </option>
<option value="comic sans ms">Comic Sans</option>
</select>
字型：
<select onchange="setFontFamily(this)">
<option value="serif">Serif </option>
<option value="sans-serif">Sans-serif</option>
<option value="monospace">Mono</option>
<option value="comic sans ms">Comic Sans</option>
</select>
</form>
</div>
<br>
<div id="editableText" contenteditable="true"
style="width:400;min-height:100px;border:2px #ccc dashed;">
</div>
</fieldset>
<script type="text/javascript">
function setFontColor(choice){
document.execCommand("forecolor",false,choice,value);
}
function setFontStyle(choice){
document.execCommand(choice,value,false,null);
}
function setFontFamily(choice){
document.execCommand("fontname",false,choice,value);
}
</script>
</body>
</html>
2.筆記：
document.getElementById('box').scrollIntoView(); //使box標籤標記的位置始終處於可見位置，這裡是每重新整理就會讓指定位置可見
var box=document.getElementById('box');
box.children.length; //忽略空白節點
box.children[0].nodeName; //獲取第一個節點
例題：實現跨瀏覽器判斷一個節點是否是另一節點的位元組點（可是相容更低版本的）
window.onload=function(){
var box=document.getElementById('box');
var p=box.firstChild;
//alert(box.contains(p));
alert(contain(box,p));
}
function contain(reNode,otherNode){
if(typeof reNode.contains !='undefined'){
return reNode.contains(otherNode);
}
else if(typeof reNode.compareDocumentPosition==='function'){
return !!(reNode.compareDocumentPosition(otherNode)>16);
}
else{
var node=otherNode.parentNode;
do{
if(node===reNode)
return true;
else{
node=node.parentNode;
}
}while(node!=null);
}
return false;
}
例題：跨瀏覽器獲取文字內容，相容各大瀏覽器
window.onload=function(){
var box=document.getElementById('box');
alert(mytext(box));
}
function mytext(node){
if(typeof node.textContent=='string')
return node.textContent;
else
return node.innerText;
}