1). document.getElementById: 根据 id 属性获取对应的单个节点
var liNodes = document.getElementsByTagName("li");
2). document.getElementsByTagName:根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
该对象并非 document 对象所独有，任何元素节点都可以调用该方法，以获取指定的子节点
//1.获取 #city 节点的所有 li 子节点
var cityNode = document.getElementById("city");
//2.获取 #city 节点的所有 li 子节点
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性,则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.
var genderNodes = document.getElementsByName("gender");
4. 获取属性节点: 1). 可以直接通过 元素节点.属性名 这样的方式来获取和设置属性节点的值 2). 通过元素节点的 getAttributeNode 方法来获取属性节点,
然后在通过 nodeValue 来读写属性值
//1.先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2.再读取指定属性的值
alert(nameNode.value);
//3.设置指定的属性的值
nameNode.value = "要设置的值";
5. 获取元素节点的子节点(**只有元素节点才有子节点!!): 1). childNodes属性 获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 2). firstChild属性 获取第一个子节点
3). lastChild属性 获取最后一个子节点
//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2.通过 firstChild 定义为到文本节点
var bjTextNode = bjNode.firstChild;
//3.通过操作文本节点的 nodeValue 属性来读写文本节点的值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "要设置的值";
6. 读写文本节点:1). 文本节点一定是元素节点的子节点
2). 步骤: 获取文本节点所在的元素节点 --> 获取元素节点的子节点 --> 利用节点的 nodeValue 属性来读写文本值
3). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值//1.获取文本节点所在的元素节点
var bjNode = document.getElementById("bj");
//2.通过 firstChild 定义为到文本节点
var bjTextNode = bjNode.firstChild;
//3.通过操作文本节点的 nodeValue 属性来读写文本节点的值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "要设置的值";
7. 节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType：返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点 3). nodeValue：返回给定节点的当前值(字符串). 可读写的属性 ①. 元素节点, 返回值是 null. ②. 属性节点: 返回值是这个属性的值③. 文本节点: 返回值是这个文本值
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = "要设置的值";
8. 创建节点:1). 创建元素节点：document.createElement(tagName)
按照给定的标签名创建一个新的元素节点.
方法只有一个参数：被创建的元素节点的名字, 是一个字符串.
方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
var liNode = document.createElement("li");
2). 创建属性节点：先需要创建一个元素节点，然后通过 . 的方式为其属性赋值就可以了
var aNode = document.createElement("a");
aNode.href = "deleteEmp?id=xxx";
3). 创建文本节点: document.createTextNode(textContent);
var xmText = document.createTextNode("厦门");
createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
4). 注意：新创建的节点不会自动的加入到文档树的任务位置，需要调节节点的 appendChild() 方法把新创建的节点加 入到文档树的合适位置
9. 为元素节点添加子节点: appendChild(newChild)var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
//创建 li 节点： <li></li>
var liNode = document.createElement("li");
//创建了一个文本节点：厦门
var xmText = document.createElement("厦门");
//<li>厦门</li>
liNode.appendChild(xmText);
10. 节点的替换: replaceChild(newChild, oldChild)
1).把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild); 返回值是一个指向已被替换的那个子节点的引用指针
2). 该节点除了替换功能以外还有移动的功能.
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl");
var gameNode = document.getElementById("game");
//将把 rlNode 替换为 bjNode ，同时 bjNode 被移动
gameNode.replaceChild(bjNode, rlNode);
3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
/** * 互换 aNode 和 bNode * @param {Object} aNode * @param {Object} bNode*/
function replaceEach(aNode, bNode){
//1.获取 aNode 和 bNode 的父节点. 使用 parentNode 属性
var aParentNode = aNode.parentNode;
var bParentNode = bNode.parentNode;
if(aParentNode && bParentNode){
//2.克隆 aNode 和 bNode
var tempNode = aNode.cloneNode(true);
//3.分别调用 aParentNode 和 bParentNode 的replaceChild() 方法实现节点的互换
bParentNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); } } } 11. 插入节点: insertBefore(newNode, refNode)
1). 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,refNode);节点 newNode 将被插入到元素节点 element 中并出现在节点refNode 的前面.
节点 refNode 必须是 element 元素的一个子节点。
var cityNode = document.getElementById("city");
var bjNode = document.getElementById("bj");
var rlNode = document.getElementById("rl");
cityNode.insertBefore(rlNode, bjNode);
2). 自定义 insertAfter(newNode, refNode) 方法
/**
* 将 newChild 插入到 refChild 的后边 * @param {Object} newChild * @param {Object} refChild */function insertAfter(newNode, refNode){
var refParentNode = refNode.parentNode; //判断 refChild 是否存在父节点 if(refParentNode){ //判断 refChild 节点是否为其父节点的最后一个子节点 if(refChild == refParentNode.lastChild){ refParentNode.appendChild(newChild); }else{ refParentNode.insertBefore(newChild, refChild.nextSibling); } } } 12. 删除节点: removeChild(refChild) 1). 从一个给定元素里删除一个子节点 var reference = element.removeChild(node);返回值是一个指向已被删除的子节点的引用指针.
某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除.
如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
var bjNode = document.getElementById("bj");
bjNode.parentNode.removeChild(bjNode);
13. innerHTML属性:1). 非标准，但浏览器几乎都支持该属性.
2). innerHTML 属性可以用来读写某给定元素里的 HTML 内容
3). 代码
var cityNode = document.getElementById("city");
alert(cityNode.innerHTML);
//互换 #city 节点和 #game 节点中的内容
var tempHTML = cityNode.innerHTML;
var gameNode = document.getElementById("game");
cityNode.innerHTML = gameNode.innerHTML;
gameNode.innerHTML = tempHTML;
