①、创建一个元素节点:
var reference = document.createElement(element)
- createElement(): 按照给定的标签名创建一个新的元素节点.
- 方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
- 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
- 新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
②、创建一个文本节点:
var reference = document.createTextNode(text);
- createTextNode(): 创建一个包含着给定文本的新文本节点.
- 返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.
- 方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里.
③、为元素节点添加子节点:
var reference = element.appendChild(newChild)
- appendChild(): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
- 方法的返回值是一个指向新增子节点的引用指
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //新创建一个元素节点, 并把该节点添加为文档中指定节点的子节点 window.onload = function(){ //1. document.createElement(elementTagName) //新创建一个元素节点, 返回值为指向元素节点的引用 //<li></li> var liNode = document.createElement("li"); //2. 创建 "厦门" 的文本节点 //document.createTextNode(string) 创建一个文本节点 //参数为文本值, 返回该文本节点的引用. var xmText = document.createTextNode("厦门"); //<li>厦门</li> liNode.appendChild(xmText); var cityNode = document.getElementById("city"); //2. elementNode.appendChild(newChild): 为 elementNode //新添加 newChild 子节点, 该子节点将作为 elementNode 的最后 //一个子节点. cityNode.appendChild(liNode); } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
④、节点的替换:
var reference = element.replaceChild(newChild,oldChild);
- replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
- 返回值是一个指向已被替换的那个子节点的引用指针
- 该节点除了替换功能以外还有移动的功能.
- 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数
/** * 互换 aNode 和 bNode * @param {Object} aNode * @param {Object} bNode */ function replaceEach(aNode, bNode){ if(aNode == bNode){ return; } var aParentNode = aNode.parentNode; //若 aNode 有父节点 if(aParentNode){ var bParentNode = bNode.parentNode; //若 bNode 有父节点 if(bParentNode){ var tempNode = aNode.cloneNode(true); bParentNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); } } }
⑤、删除节点:
var reference = element.removeChild(node);
- removeChild(): 从一个给定元素里删除一个子节点
- 返回值是一个指向已被删除的子节点的引用指针.
- 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
- 如果想删除某个节点, 但不知道它的父节点是哪一个, 可以使用parentNode 属性
var bjNode = document.getElementById("bj"); bjNode.parentNode.removeChild(bjNode);
⑥、插入节点:
var reference = element.insertBefore(newNode,targetNode);
- insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
- 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
- 节点 targetNode 必须是 element 元素的一个子节点。
- 插入的同时有移动功能
⑦、 innerHTML属性
innerHTML 属性可以用来读,、写某给定元素里的 HTML 内容
⑧、其他属性
- firstChild：该属性返回一个给定元素节
- lastChild：对应 firstChild 的一个属性
- nextSibling: 返回一个给定节点的下一个子节点
- previousSibling：返回一个给定节点的上一个子节
- parentNode：返回一个给定节点的父节点。
注意：parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。document 节点的没有父节点。