话不多说直接上 demo:
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <div class="container" id="box">
- <span>
- 我是一个 div 元素 1
- </span>
- <p>
- hello
- </p>
- </div>
- <script>
- var divNode = document.getElementsByClassName("container")[0];
- /* 节点操作 */
- /* 获取元素节点 */
- console.log(divNode.nodeType) //1
- console.log(divNode.nodeName) //DIV
- console.log(divNode.nodeValue) //null
- /* 获取属性节点 */
- console.log(divNode.attributes[1].nodeName) //id
- console.log(divNode.attributes[0].nodeValue); //container
- console.log(divNode.attributes[0]); //class="container"
- /* 获取文本节点 */
- console.log(divNode.childNodes[0].nodeName); //SPAN
- console.log(divNode.childNodes[0].nodeValue); //null, 如果不存在子元素, 则输出文本内容
- console.log(divNode.parentNode); // 输出 body 标签及其子元素
- console.log("===================") console.log(divNode.childNodes[1].childNodes[0].nodeName); //#text
- console.log(divNode.childNodes[1].childNodes[0].nodeValue); //hello /* 如果 div 标签与 span 标签之间存在换行或者空格, 则输出: 我是一个 div 元素 1*/
- /* 元素方法操作 */
- /* 添加子节点 */
- var addNode = document.createElement("div");
- var addText = document.createTextNode("guangzhou");
- addNode.appendChild(addText);
- divNode.appendChild(addNode);
- /* 删除子节点 */
- var deleteNode = document.getElementsByTagName("span")[0] divNode.removeChild(deleteNode);
- /* 替换子节点 */
- var replaceNode = divNode.getElementsByTagName("div")[0]
- var newReplace = document.createElement("span");
- newReplace.innerHTML = "my name lucas";
- divNode.replaceChild(newReplace, replaceNode);
- /* 插入子节点 */
- var newInsert = document.createElement("div");
- newInsert.innerHTML = "insert a new div";
- divNode.insertBefore(newInsert, divNode.childNodes[0]);
- /* 属性操作 */
- /* 获取属性节点 */
- console.log(divNode.getAttribute("class")); //container
- console.log(divNode.getAttributeNode("class")); //class="container"
- /* 创建和设置属性节点 */
- var addAttr = document.createAttribute("class");
- addAttr.value = "newAttr";
- divNode.setAttributeNode(addAttr); // 替代了旧的类
- // divNode.setAttribute("class","newAttr");/* 简单写法 */
- /* 删除属性 */
- var deleteAttr = divNode.getAttributeNode("class");
- divNode.removeAttributeNode(deleteAttr)
- // divNode.removeAttribute("id") /* 简单写法 */
- </script>
- </body>
- </HTML>
效果
来源: http://www.bubuko.com/infodetail-3201204.html