## 节点对象的方法
### 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对象
- 计时事件