- 获取节点元素: getElementById() ---- getElementByName() ----getElementByTagName()
//通过标签的id获取节点
var node = document.getElementById("id");
//通过标签的name 属性 获取节点
var node = document.getElementByName("name");
//通过标签名获取节点
var node = document.getElementByTagName("div");
- 获取标签的属性: 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节点替换旧节点
