## 節點對象的方法
### Node.appendChild()
接收一個對象節點作為參數,將其作為最后一個節點,插入當前節點。
~~~javascript
var addCountry = function() {
var cinput = document.getElementById("country");
var cvalue = cinput.value;
var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>";
var culInnerHtml = document.getElementById("_asia").innerHTML;
culInnerHtml = culInnerHtml + cli;
document.getElementById("_asia").innerHTML = culInnerHtml;
};
var addCountry2 = function() {
var cinput = document.getElementById("country");
var cvalue = cinput.value;
var cli = document.createElement("li");
cli.innerHTML = cvalue;
document.getElementById("_asia").appendChild(cli);
};
~~~
### Node.hasChildNodes()
返回一個布爾值,判斷當前節點是否有子節點。
~~~javascript
var _asiaUl = document.getElementById("_asia");
if (_asiaUl.hasChildNodes()) {
_asiaUl.innerHTML = "";
}
~~~
### Node.insertBefore()
方法用于將某個節點插入當前節點的指定位置。接收兩個參數,第一個參數是所要插入的節點,第二個參數是當前節點的一個子節點。新的節點將插在這個節點的前面。該方法返回被插入的新節點。
~~~javascript
var getIndexLi = function(index) {
var _asiaChilds = document.getElementById("_asia").childNodes;
var k = 1;
for (var i = 0; i < _asiaChilds.length; i++) {
var cnode = _asiaChilds[i];
if (cnode.nodeName === 'LI') {
if (index === k) {
return cnode;
}
k++;
}
}
}
var addCountry3 = function() {
var cinput = document.getElementById("country");
var cvalue = cinput.value;
var cli = document.createElement("li");
cli.innerHTML = cvalue;
var _asiaEle = document.getElementById("_asia");
var cindex = document.getElementById("cindex").value;
var cele = getIndexLi(parseInt(cindex));
_asiaEle.insertBefore(cli, cele);
};
~~~
### Node.removeChild()
方法接收一個子節點作為參數,用于從當前節點移除該子節點。返回被移除的子節點。
~~~javascript
var removeCountry1 = function(id) {
var _asiaEle = document.getElementById("_asia");
_asiaEle.removeChild(document.getElementById(id));
}
~~~
### Node.replaceChild()
方法用于將一個新的節點替換當前節點的某一個子節點。接收兩個參數,第一個參數是用來替換的新節點,第二個參數是將要被替換的節點。
~~~javascript
var repalceCountry = function() {
var newEle = document.createElement("LI");
newEle.innerHTML = "Tailand";
var _asiaEle = document.getElementById("_asia");
_asiaEle.replaceChild(newEle, document.getElementById("_japan"));
}
~~~
- Hello World!
- 介紹
- 語句和變量
- 標識符、注釋和區塊
- 基本數據類型和引用數據類型
- 數據類型
- typeof
- number
- 字符串
- 布爾類型
- 函數
- 數組
- 運算符
- 加法運算符
- 算術、賦值、比較運算符
- 布爾運算符
- 語句
- 條件語句
- 循環語句
- DOM模型
- DOM和DOM節點
- 特征相關屬性
- 節點對象的方法
- Element對象
- Attribute對象
- Text節點和CSS操作
- 事件模型
- 標準庫
- Number對象
- String對象
- Array對象
- Date、Boolean和Math對象
- JSON對象
- 面向對象編程中的 this
- 一切皆對象
- Web Storage
- 錯誤處理機制
- Error對象和try..catch語句
- javascript的原生錯誤類型
- BOM模型
- window對象
- 計時事件