node: myUl2});console.log(r[ 0 ].innerHTML);}); /script /hea
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <title>create要领</title> <script src="http://www.mamicode.com/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></ul> </body> </html>
html5shiv
(function() { if (! /*@[email protected]*/ 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]); } })();
创建节点createElement：
它的的参数可以是巨细也可以是小写，但是大都情况下我们使用小写
document.createElement()创建的HTML5标签是可以兼容IE8以下的浏览器的
高效创建节点innerHTML-outerHTML
// innerHTML的限制： // 字符串最左边不能呈现空白，否则会被移除 // 大都浏览器不会对script脚本进行执行 // 不能单独创建meta/style/link等 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脚本进行执行
解决：添加defer属性
放在有感化域的元素之后
var content = document.getElementById("content"); var str = "<input type=\"hidden\"><script defer>alert(‘hi‘);<\/script>"; content.innerHTML = str; });
创建style时解决IE兼容
var content = document.getElementById("content"); var str = "_<style type=\"text/css\">body {background-color: red; }</style>"; content.innerHTML = str; // 移除最开头添加的_ content.removeChild(content.firstChild); });
innerText
// innerText兼容火狐写法：textContent var content = document.getElementById("content"); function getInnerText(element){ return typeof (element.textContent == "string") ? element.textContent : element.innerText; } function setInnerText(element, text){ if (typeof element.textContent == "string"){ element.textContent = text; } else { element.innerText = text; } } setInnerText(content, "Hello world!"); console.log(getInnerText(content));
节点遍历（查找节点）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1"> <title>dom Tree walker</title> <script src="http://www.mamicode.com/domReady.js"></script> <script> myReady(function(){ // documentElement返回文档根节点 var oHtml = document.documentElement; var p = document.getElementById("paragraph"); var txt = p.childNodes[0]; // 获取head节点三种要领 var oHead = oHtml.firstChild; var oHead = oHtml.childNodes[0]; var oHead = oHtml.childNodes.item(0); // 获取body节点的两种要领 var oBody = oHtml.childNodes.item(1); var oBody = oHtml.childNodes[1]; 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);//HTML // 通过p节点找到document节点 console.log(p.ownerDocument == document); // 是否有子节点 console.log(p.hasChildNodes()); console.log(txt.hasChildNodes()); }); </script> </head><body> <p>文本叶子节点</p> </body> </html>
输出分袂是：false/true/false
1、 首先区分firstChild和childNodes的区别
firstChild暗示第一个子节点， 这个子节点包孕元素节点，文本节点或者注释节点
childNodes 返回节点的子节点调集，包孕元素节点、文本节点还有属性节点。
2、分析这题的代码
第一个ul的第一个子节点是一个空的文本节点，也就是ul和li的换行，他是没有子节点的，所以为false
第一个ul的第二个子节点是第一个li，有子节点，所以为true
第二个ul的第一个li，没有子节点，所以为false
打印HTML布局树：
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32505.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")