DOM节点操作：增删改查
问：
document.write()创建节点的不足
页面加载完成之后，使用document.write()这种方式会将页面重写，所以会覆盖掉页面中原有的元素。
create创建节点
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>create方法</title> <script src="domReady.js"></script> <script> myReady(function(){ var comment = document.createComment("A comment"); var fragment = document.createDocumentFragment(); var ul = document.getElementById("myList"); var li = null; for (var i = 0; i < 3; i++){ li = document.createElement("li"); li.appendChild(document.createTextNode("Item " + (i+1))); fragment.appendChild(li); } ul.appendChild(fragment); document.body.insertBefore(comment, document.body.firstChild);//很少动态创建注释节点 }); </script> </head> <body> <ul id="myList"></ul> </body> </html>
总结：
createElement 创建元素节点 createDocumentFragment 创建一个文档片段
使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题
最主要的区别就是createElement创建的元素可以重复操作 但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了
其次还有一个区别是fragment使用innerHTML不能达到修改文本的效果
createTextNode 创建文本节点 createComment 创建注释 一般不会动态添加
在ie6 7中创建本不兼容的h5标签
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>html5shiv</title> <!--为了让ie浏览器兼容h5新标签--> <style> /*html5*/ article { font-size: 40px; color: red; } </style> <script> (function() { if (! /*检测是不是ie ie会将整个判断语句看做 ！！0*/ /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', '); var i = e.length; while (i--){ document.createElement(e[i]); } })(); </script> </head> <body> <article> You are my sunshine. </article> </body> </html>
高效创建节点的方式
innerHtml
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>innerHTML</title> <script src="domReady.js"></script> <script> myReady(function(){ var content = document.getElementById("content"); var str = "<p>This is a <strong>paragraph</strong> with a list following it.</p>" + "<ul>" + "<li>Item 1</li>" + "<li>Item 2</li>" + "<li>Item 3</li>" + "</ul>"; content.innerHTML = str; alert(content.innerHTML); }); </script> </head> <body> <div id="content"></div> </body> </html>
innerHtml使用限制 ie6 -8 会忽略空格 有可能执行script标签 例如style标签前面要添加有作用域的标签 了解一下
还有一个outerHTML 返回调用它的函数及所有子节点的html标签
*innerHTML 和 outerHTML的区别
一、区别： 1）innerHTML: 从对象的起始位置到终止位置的全部内容,不包括Html标签。 2）outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。 二、例子1：
<div id="test">
<span style="color:red">test1</span> test2
</div>
1）innerHTML的值是“<span style="color:red">test1</span> test2 ” 2）outerHTML的值是<div id="test"><span style="color:red">test1</span> test2</div> 三. 例子2:
<body> <div>aa</div> </body>
通过document.body.innerHTML获取到的内容是:<div>aa</div> 通过document.body.outerHTML获取到的内容是:<body><div>aa</div></body>
innerText会过滤掉标签 只适用于ie 推荐使用innerHTML
兼容所有浏览器的innerText的方法
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>innerText</title> <script src="domReady.js"></script> <script> myReady(function(){ var content = document.getElementById("content"); function getInnerText(element){//兼容 return typeof (element.textContent == "string") ? element.textContent : element.innerText;//火狐用textContent 其他用后者 } function setInnerText(element, text){ if (typeof element.textContent == "string"){ element.textContent = text; } else { element.innerText = text; } } setInnerText(content, "Hello world!"); console.log(getInnerText(content)); }); </script> </head> <body> <div id="content"> <p>This is a <strong>paragraph</strong> with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </body> </html>
outText和innerText基本没什么区别 不常用不建议用
遍历节点
查找节点
打印<html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>dom Tree walker</title> <script src="domReady.js"></script> <script> myReady(function(){ var oHtml = document.documentElement; //<html> var p = document.getElementById("paragraph"); var txt = p.childNodes[0]; //var oHead = oHtml.firstChild; //var oHead = oHtml.childNodes[0]; //head var oHead = oHtml.childNodes.item(0);//head //var oBody = oHtml.childNodes.item(1); var oBody = oHtml.childNodes[1];//body 但是只有在ie浏览器是正常打印 其他的不能正常打印因为会将空白节点视为了节点 //console.log(oHead.parentNode == oHtml); //console.log(oBody.parentNode == oHtml); //console.log(oBody.previousSibling == oHead); //console.log(oHead.nextSibling == oBody); //console.log(oBody); //console.log(oHead); //console.log(oHtml.tagName); //console.log(p.ownerDocument == document); console.log(p.hasChildNodes()); console.log(txt.hasChildNodes()); }); </script> <!--解决会打印空白节点的问题可以如下 但是不推荐--> </head><body> <p id="paragraph">文本叶子节点</p> </body> </html>
问
打印结果分别是 false true false
为什么第一个是false呢？
因为list1的firstChild是空白节点 所以空白没有子节点 返回false
节点遍历案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>DOM Travel</title> <script src="domReady.js"></script> <script> myReady(function(){ var s = ""; function travel(space, node) { if (node.tagName) { s += space + node.tagName + "<br/>"; } var len = node.childNodes.length; for (var i = 0; i < len; i++) { travel(space + "|-", node.childNodes[i]); } } travel("", document); document.write(s); }); </script> </head> <body> <form> <input type="button" id="button1" name="button1" value="Click Me!" /> </form> </body> </html>
打印结果为
|-HTML
|-|-HEAD
|-|-|-META
|-|-|-META
|-|-|-TITLE
|-|-|-SCRIPT
|-|-|-SCRIPT
|-|-BODY
|-|-|-FORM
|-|-|-|-INPUT
解决空白节点
方法一
tips：元素节点的nodetype值为1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>查找子节点（二）</title> <script src="domReady.js"></script> <script> myReady(function(){ var box = document.getElementById("box"); for(var i = 0, len = box.childNodes.length; i < len; i++) { if (box.childNodes[i].nodeType == 1) { console.log(box.childNodes[i]); } } }); </script> </head> <body> <ul id="box"> <li>节点一</li> <li>节点二</li> <li>节点三</li> </ul> </body> </html>
方法二
这是一套专门查找元素节点的api 忽略了文本节点（空白节点）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>查找子节点（三）</title> <script src="domReady.js"></script> <script> myReady(function(){ var box = document.getElementById("box"); for(var i = 0, len = box.childElementCount; i < len; i++) { console.log(box.children[i]); } }); </script> </head> <body> <ul id="box"> <li>节点一</li> <li>节点二</li> <li>节点三</li> </ul> </body> </html>注意：ie8以下不支持这套api
类数组对象nodelist
例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>NodeList对象的特点</title> <script src="domReady.js"></script> <script> myReady(function(){ var box = document.getElementById("box"); var nodes = box.childNodes; //console.log(nodes); //console.log(nodes[1]); //console.log(nodes.item(1)); //nodes.push("<li>节点四</li>");添加不了 因为不具有数组的方法 所以不是真正的数组 //如果想让nodelist像上面那样添加 function makeArray(nodeList){ var arr = null; try { // 这个方法也可以将类数组转化为数组 return Array.prototype.slice.call(nodeList);//ie浏览器会出现问题 所以这个方法不行就用下面的 }catch (e){ arr = new Array(); //把nodelist的值装到这个数组里 for(var i = 0, len = nodeList.length; i < len; i++){ arr.push(nodeList[i]); } } return arr; } var newNodeList = makeArray(nodes); newNodeList.push("<li>节点四</li>"); console.log(newNodeList);//实际显示不出来这个节点四 }); </script> </head> <body> <ul id="box"> <li>节点一</li> <li>节点二</li> <li>节点三</li> </ul> </body> </html>
类数组对象HTML collection
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>类数组对象HTMLCollection</title> <script src="domReady.js"></script> <script> myReady(function(){ var scripts = document.scripts;//返回script var links = document.links;//返回a标签 var cells = document.getElementById("tr").cells; var imgs = document.images;//返回img var forms = document.forms;//表单 var options = document.getElementById("select").options; var ps = document.getElementsByTagName("p"); /*console.log(scripts); console.log(links); console.log(cells); console.log(imgs); console.log(forms); console.log(options); console.log(ps);*/ console.log(cells.namedItem('td'));//返回表格里第一个id或者name为td的元素 }); </script> </head> <body> <ul id="box"> <li>节点一</li> <li>节点二</li> <li>节点三</li> </ul> <table border="1"> <tr id="tr"> <td>第一行</td> <td name="td">第二行</td> <td name="td">第三行</td> </tr> </table> <img src="duer.jpg" alt="img1" /> <img src="ipone6s+.png" alt="img2" /> <form action=""> <input type="text" value="用户名"> </form> <form action=""> <input type="text" value="密码"> </form> <a href="#">忘记密码</a> <a href="#">更多内容</a> <select id="select"> <option value="0">北京</option> <option value="1">天津</option> <option value="2">河北</option> </select> <p>DOM探索之基础详解篇</p> <p>DOM探索之节点操作篇</p> </body> </html>
类数组对象namedNodeMap
ele.attribute
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>类数组对象NamedNodeMap</title> <script src="domReady.js"></script> <script> myReady(function(){ var box = document.getElementById("box"); var attrs = box.attributes; //console.log(attrs); console.log(attrs.length); console.log(attrs[0]); console.log(attrs.item(1)); }); </script> </head> <body> <ul id="box" data-url="index.html" node-action="submit"> <li>节点一</li> <li>节点二</li> <li>节点三</li> </ul> </body> </html>
类数组对象的动态性
看一个例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>类数组对象的动态性（一）</title> <script src="domReady.js"></script> <script> myReady(function(){ var divs = document.getElementsByTagName("div"); // var length = divs.length; var i = 0; while(i < length){ document.body.appendChild(document.createElement("div")); i++; } }); </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>这里的while循环理应循环三次就结束 但实际上会让浏览器陷入死循环 原因是html collection的动态性造成的
节点查找
ById
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>getElementById()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myDiv = document.getElementById('myDiv'); console.log(myDiv.tagName); var myUl = myDiv.getElementById('myUl');//会报错 不能使用非document对象使用byid方法 console.log(myUl); }); </script> </head> <body> <input type="text" name="myDiv" value="请输入内容" /> <div id="myDiv"> You are my sunshine. <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
byid的方法有bug
bug1 ie下的bug
<script> myReady(function(){ var bn = document.getElementById("button"); bn.onclick = function() { var target = document.getElementById("target"); console.log(target.innerHTML); } }); </script> </head> <body> <a name="target" href="http://www.cnblogs.com/rubylouvre/">这是错误的元素</a> <p id="target">这是正确的元素</p> <button id="button" type="button">开始测试</button> </body>这里查找到的是name=“target”的元素
bug2：有两个id一样的元素也只会返回第一个
解决bug
byname<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IE getElementById bug</title> <script src="domReady.js"></script> <script> myReady(function(){ var getElementById = function(id) { var el = document.getElementById(id); if(!+"\v1") {//也可以用useragent方法判断是不是ie浏览器 ie是true if(el && el.attributes['id'].value === id) {//不能用el.id === id 来判断 原因见下. //判断条件为el存在 并且id属性值为传参的 return el; } else { var els = document.all[id], n = els.length; for (var i = 0; i < n; i++) { if (els[i].attributes['id'].value === id) { return els[i];//过滤掉name 只留下Id } } } } return el; }; //console.log(getElementById("target").tagName); /*var formElement1 = getElementById('myForm1'); var formElement2 = getElementById('myForm2'); alert(formElement1.getAttribute('id')); alert(formElement2.getAttribute('id')); alert(formElement1.id); alert(formElement2.id);*///这个返回值有问题 所以 不能使用el.id === id 来判断 var bn = getElementById("button"); bn.onclick = function(){ var target = getElementById("target"); var formElement2 = getElementById('myForm2'); alert(target.innerHTML); alert(formElement2.tagName); }; }); </script> </head> <body> <form id="myForm1"> <input id="user_id" name="user_id" value="text" /> </form> <form id="myForm2"> <input id="id" name="id" value="text" /> </form> <a name="target" href="http://www.cnblogs.com/rubylouvre/">这是错误的元素</a> <p id="target">这是正确的元素</p> <button id="button" type="button">开始测试</button> </body> </html>***注意document.all[]和docuement.attributes[]都是括号
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>getElementsByName()</title> <script src="domReady.js"></script> <script> myReady(function(){ //var myUl = document.getElementsByName('myUl'); var myDiv = document.getElementById('myDiv'); //var myUl = myDiv.getElementsByName('myUl');//报错 var citys = document.getElementsByName('city'); console.log(myUl); console.log(myDiv); console.log(citys.length); }); </script> </head> <body> 北京<input type="checkbox" id="beijing" name="city" value="北京" /> 天津<input type="checkbox" name="city" value="天津" /> 上海<input type="checkbox" name="city" value="上海" /> <div id="myDiv"> You are my sunshine. <ul id="myUl" name="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
注意在ie6 7有bug
bytagname
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>getElementsByTagName()</title> <script src="domReady.js"></script> <script> myReady(function(){ var lis1 = document.getElementsByTagName('li'); var lis2 = document.getElementsByTagName('Li'); var inputs = document.getElementsByTagName('input'); var comment = document.getElementsByTagName('!');//在ie6-8下面doctype会被当成注释 var all = document.getElementsByTagName('*');//获得所有元素 /*console.log(lis1.length); console.log(lis2.length); console.log(inputs[0].value); console.log(comment[0].nodeValue); console.log(comment[1].nodeValue);*/ for(var i = 0, len = all.length; i < len; i++) { console.log(all[i].tagName); } }); </script> </head> <body> <!--页面元素--> <input type="text" name="myDiv" value="请输入内容" /> <div id="myDiv"> You are my sunshine. <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
上述三个api基本上都兼容
下面的兼容不是很好
byclassname
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>getElementsByClassName()</title> <script src="domReady.js"></script> <script> myReady(function(){ var ul = document.getElementById('myUl'); var lis1 = ul.getElementsByClassName('light'); var lis2 = ul.getElementsByClassName('light dark'); console.log(lis1); console.log(lis2); }); </script> </head> <body> <ul id="myUl"> <li class="light">1</li> <li class="dark light">2</li> <li class="light">3</li> </ul> </body> </html>
解决byclassname的兼容问题 ie8以下
html部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>getElementsByClassName() 兼容浏览器方案</title> <script src="domReady.js"></script> <script src="getElementsByClassName.js"></script> <script> myReady(function(){ var myUl2 = document.getElementById("myUl2"); var r = getElementsByClassName({ searchClass: "light dark", node: myUl2, tag : 'div' }); console.log(r[0].innerHTML); }); </script> </head> <body> <ul id="myUl"> <li class="light">1</li> <li class="light dark">2</li> <li class="light">3</li> </ul> <ul id="myUl2"> <li class="light">1</li> <li class="light dark">second</li> <div class="light dark">5555</div> <li class="light">3</li> </ul> </body> </html>
js部分
var getElementsByClassName = function(opts) {
var searchClass = opts.searchClass; //存储要查找的类名
var node = opts.node || document;//存储要查找的范围
var tag = opts.tag || '*';//存储一定范围内的要查找的标签
var result = [];
//判断浏览器是否支持byclassname的方法
if (document.getElementsByClassName) {
var nodes = node.getElementsByClassName(searchClass);
if (tag !== "*") {
for (var i = 0; node = nodes[i++];) {
//nodes是className的集合，它是有数量的，比如有5个，那么在循环中，初始值是0，他会往后曲循环，0、1、2、3、4，当它走到5时，nodes中没有第六项，所以下面就不会再执行了，因为if里面也是有判断的。
if (node.tagName === tag.toUpperCase()) {//tagname都是大写
result.push(node);
}
}
} else {
result = nodes;
}
return result;
} else {//ie8以下
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var i, j;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");//通过正则表达式 只找到一个的情况是一个class 找到多个中间会有空格 则判断开始和结尾有空格 ^是正则的开始 $是正则的结尾 for (i = 0, j = 0; i < elsLen; i++) { if (pattern.test(els[i].className)) {//检测匹配正则表达式的classname result[j] = els[i];//放入result中 j++; } } return result; }}
queryselector 和queryselectorall
既可以使用document调用 也可以使用别的节点调用 前者只返回一个 ！！！！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>querySelector()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myDiv = document.getElementById('myDiv'); //var ul = myDiv.querySelector('#myUl'); var ul = document.querySelector('#myUl'); var li = myDiv.querySelector('li:last-child'); var els = document.querySelector('input, li'); var span = document.querySelector('span'); var input = document.querySelector('.foo\\:bar');//：和/都需要转义 //console.log(ul); //console.log(li); //console.log(els); //console.log(span); console.log(input); }); </script> </head> <body> <input type="text" class="foo:bar" value="请输入内容" /> <div id="myDiv"> You are my sunshine. <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
selectorall
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>querySelectorAll()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myDiv = document.getElementById('myDiv'); var ul = myDiv.querySelectorAll('ul'); var li = myDiv.querySelectorAll('li'); var span = myDiv.querySelectorAll('span'); //console.log(ul); //console.log(li); console.log(span); }); </script> </head> <body> <input type="text" name="myDiv" value="请输入内容" /> <div id="myDiv"> You are my sunshine. <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
* querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用querySelectorAll() 方法替代。
操作节点
appendchild增加节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>appendChild()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myUl = document.getElementById('myUl'); var txt = document.createTextNode('4'); var li = document.createElement('li'); var firstLi = myUl.firstElementChild; li.appendChild(txt); myUl.appendChild(li); var returnedNode = myUl.appendChild(firstLi); console.log(returnedNode); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
insertbefore
appendchild是放在最后面 这个是放在前面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>insertBefore()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myUl = document.getElementById('myUl'); var txt = document.createTextNode('4'); var liNew = document.createElement('li'); liNew.appendChild(txt); // var li2 = myUl.children.item(1); // var returnNode = myUl.insertBefore(liNew, li2); // console.log(returnNode.innerHTML); // myUl.insertBefore(liNew, null);实现和appendchild一样的添加到末尾 // 事实上这个方法可以在任何地方添加节点 // myUl.insertBefore(liNew, myUl.firstElementChild); myUl.insertBefore(liNew, myUl.lastElementChild); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
replaceChild
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>replaceChild()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myUl = document.getElementById('myUl'); var txt = document.createTextNode('4'); var liNew = document.createElement('li'); liNew.appendChild(txt); var li2 = myUl.children.item(1); var returnNode = myUl.replaceChild(liNew, li2);//返回的就是被替换掉的节点 console.log(returnNode); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
cloneNode
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>cloneNode()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myUl = document.getElementById('myUl'); var newNode = myUl.cloneNode(true);//加了true之后是深度复制 连子节点一起复制了 console.log(newNode); document.body.appendChild(newNode); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
normalize 合并
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>normalize()</title> <script src="domReady.js"></script> <script> myReady(function(){ var div = document.createElement("div"); var textNode = document.createTextNode("DOM探索"); div.appendChild(textNode); var textNode2 = document.createTextNode("之节点操作篇"); div.appendChild(textNode2); document.body.appendChild(div); console.log(div.childNodes.length); div.normalize(); console.log(div.childNodes.length); console.log(div.firstChild.nodeValue);//获得合并之后的内容 }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
spliteText 将一个文本节点分割为两个文本节点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>splitText()</title> <script src="domReady.js"></script> <script> myReady(function(){ var div = document.createElement("div"); var textNode = document.createTextNode("DOM探索之节点操作篇"); div.appendChild(textNode); document.body.appendChild(div); var newNode = div.firstChild.splitText(5);//从第五个字符拆分 console.log(div.firstChild.nodeValue); console.log(newNode.nodeValue); console.log(div.childNodes.length); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
删除节点
removeChild
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>removeChild()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myUl = document.getElementById('myUl'); console.log(myUl.childNodes.length); var secondChild = myUl.removeChild(myUl.childNodes[1]);//必须有参数 console.log(secondChild); console.log(myUl.childNodes.length); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
removeNode
ie私有实现
将目标节点从文档中删除返回目标节点
参数为布尔值 默认false
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>removeNode()</title> <script src="domReady.js"></script> <script> myReady(function(){ var myUl = document.getElementById('myUl'); var removedNode = myUl.removeNode(true); console.log(removedNode.outerHTML); }); </script> </head> <body> <ul id="myUl"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> </html>
removechild和innerHTML的区别
在ie6-8下removechild移除的节点还可以使用（折断树枝但树枝还可以使用） 而innerHTML相当于直接销毁了（拔掉树枝并烧掉）
在chrome下两者都是折断树枝依旧可以使用的
总结
3075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
