- 一、JavaScript简介
- 1.1 JavaScript 简介
- 1.2 开发环境
- 二、基本语法
- 2.1 语法
- 2.2 数据类型
- 2.3 变量
- 2.4 表达式和运算符
- 2.5 语句
- 三、BOM
- 3.1 windows 对象
- 3.2 location 对象
- 3.3 history对象
- 3.4 screen对象
- 四、DOM
- 4.1 节点NodeType属性
- 4.2 获取节点
- 4.3 节点操作
- 4.4 属性操作
- 4.5 操作表格
- 五、事件
- 5.1 事件流
- 5.2 文档加载事件
- 5.3 事件类型
- 六、函数
- 6.1 函数基本用法
- 6.2 递归函数
- 6.3 闭包函数
- 七、面向对象
- 7.1 理解对象
- 7.2 原型和原型链
- 7.3 设计模式
- 八、错误与调试
- 8.1 错误处理与调试
- 九、进阶知识
- 9.1 表单处理
- 9.2 Cookie和存储
- 9.3 定时器
- 9.4 Ajax
- 9.5 Json
- 9.6 代码规范
4.3 节点操作
1.创建节点
创建新的Element节点可以使用Document对象的createElement()方法。给方法传递元素的标签名(HTML文档该名字不区分大小写,XML则区分大小写)。
var newnode = document.createTextNode("a")
创建Text节点使用Document对象的createTextNode();
var newnode = document.createTextNode("text node content")
2.插入节点
一旦有了一个新节点,使用Node的方法appendChild()或insertBefore()将它插入到文档中。
appendChild()是在需要插入的Element节点上调用的,它插入指定的节点使其成为那个节点的最后一个子节点。
<xmp>
//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true
var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
document.body.appendChild(div);
</xmp>
insertBefore()需要接受2个参数,第一个参数是待插入的节点,第二个参数是已存在的节点,新节点将插入该节点的前面。
<xmp>
//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
</xmp>
3.替换节点
replaceChild()方法删除一个子节点并用一个新的节点取而代之。在父节点上调用该方法,第一个参数是新节点,第二个参数是需要代替的节点。
<xmp>
n.parentNode.replaceChild(document.createTextNode("read"),n);
//用一个b元素替换n节点,并使n成为该元素的子节点
function embolden(n){
if(typeof n == "string"){
n = document.getElementById(n);
}
var parent = n.parentNode; // 获取n的父节点
var b = document.createElement("b"); // 创建一个b元素
parent.replaceChild(b,n); // 用b元素替换节点n
b.appendChild(n); // 使n成为b元素的子节点
}
</xmp>
4.复制节点
cloneNode()返回该节点的一个全新副本。给方法传递参数true递归地复制所有后代节点,或传递参数false只执行一个浅复制。
<xmp>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</xmp>
<xmp>
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3(IE < 9)或 7(其他浏览器)
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0
</xmp>
5.删除节点
removeChild()方法是从文档树中删除一个节点。该方法不是在待删除的节点上使用,而是在其父节点上调用。在父节点上调用该方法,并将需要删除的子节点作为方法参数传递给它。
<xmp>
//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);
</xmp>
评论
共0 条评论
没有更多了..