JavaScript随记5

1. 获取节点元素: getElementById() ---- getElementByName() ----getElementByTagName()

//通过标签的id获取节点
var node = document.getElementById("id");

//通过标签的name 属性 获取节点
var node = document.getElementByName("name");

//通过标签名获取节点
var node = document.getElementByTagName("div");

2. 获取标签的属性: getAttribute()

var node = document.getElementsByName("name1");

var Id = node.getAttribute("id");  // 获取 node节点的 id 属性

var Value = node.getAttribute("value"); //获取 node 节点的 value 属性

3.节点属性 nodeName ---- nodeValue ---- nodeType

var node = document.getElementsByName("name1");

var nodeName = node[0].nodeName;  //获取节点的名称

var nodeValue = node[0].nodeValue; //获取节点的值

var nodeType = node[0].nodeType;  //获取节点的类型

4.获取节点的子节点

var node = document.getElementsByName("ul1");  

var childNodes = node[0].childNodes; // 获取node节点的子节点

5.获取节点的第一个子节点: firstChild 和最后一个子节点: lastChild

var node = document.getElementsByName("ul1");  

var childNode1 = node[0].firstChild; // 获取node节点的第一个子节点

var childNode2 = node[0].lastChild;  // 获取node节点的最后一个子节点

6.获取父节点: parentNode属性

var node = document.getElementById("con");

var myNode = node.parentNode; // 获取node节点的第一个子节点

7.获取兄弟节点: nextSibling属性(节点之后) ---- previousSibling属性(节点之前)

var node = document.getElementsByName("con");

var nextNode = node[1].nextSibling; // 获取node节点的下一个节点

var previousNode = node[1].previousSibling;  // 获取node节点的上一个节点

8.创建元素节点:[createElement()]并添加文本节点:[createTextNode()] 最后插入节点:[appendChild()]

var body1 = document.body;

var node = document.createElement("div");  //添加元素节点

var textNode = document.createTextNode("我是Div");  //添加节点文本

node.appendChild(textNode);  //把节点文本添加到节点中

body1.appendChild(node);  // 把节点添加父节点

9.将节点插入到某节点之前:[insertBefore()]

var parentNode = document.getElementsByName("ul1"); //获取父节点

var nodes = document.getElementsByTagName("li");  //获取所有的 li 节点

var newNode = document.createElement("li");  // 创建一个新节点

var newNodeText = document.createTextNode("我是新插入的节点");

newNode.appendChild(newNodeText);  //将文字添加到节点中

parentNode[0].insertBefore(newNode,nodes[0]);  //将节点插入到节点之前

10.删除某个节点: removeChild()

var parentNode = document.getElementsByName("ul1"); //获取父节点

var nodes = document.getElementsByTagName("li");  //获取所有的 li 节点 

parentNode[0].removeChild(nodes[0]);  // 删除 nodes 节点集中的 第一个节点

11.替换元素节点: replaceChild()

var parentNode = document.getElementsByName("ul1"); //获取父节点

var nodes = document.getElementsByTagName("li");  // 获取所有的 li 节点

var newNode = document.createElement("li");  //创建一个新 li 标签

var newNodeText = document.createTextNode("10086"); //创建文本

newNode.appendChild(newNodeText);  //将文本添加到li节点中

parentNode[0].replaceChild(newNode,nodes[0]);  // 将新li节点替换旧节点