JAVASCRIPT DOM编程艺术读书笔记
第七章 动态创建标记
在web浏览器中往文档添加标记，先回顾下过去使用的技术：
<body> <script type="text/javascript"> document.write("<p>This is inserted.</p>"); </script> </body> document.write:缺点就是违背了"行为与表现分离的原则",即使把这句语句挪到外部，还是需要在<body>里边添加<script>标签才可以调用 -->script标签后面的<p>很容易被误任务<p>标签，在script标签后面有p标签是违法的 -->MIME类型的application/xhtml+xml和document.write不兼容 innerHTML可以读取，也可以写入，但是他无法区分"插入一段元素"和"替换一段元素"，一旦使用了，原本的内容全部被取代 <body> <div id="testdiv"> </div> </body> var testdiv = document.getElementById("testdiv"); testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>"; //将会在网站上显示出I inserted this content. -->类似document.write,也是HTML专有属性,MIME类型的application/xhtml+xml和document.write不兼容
createElement:创建元素节点，只创建会出现一个文档碎片（document fragment），它是游荡在JavaScript世界里的一个孤儿。但是它已经有nodeType和nodeName属性 document.createElement("p");
appendChild:将新建节点插入文档节点最简单的方法就是让他成为文档某个节点的子节点。
createTextNode：创建文本节点
insertBefore ： 在已有元素前插入一个新元素
DOM没有提供insertAfter，不过可以编写一个
function insetAfter(newElement,targetElement) { var parent = targetElement.parentNode; if(parent.lastChild == targetElement) //目标元素是不是parent的最后一个元素,是就在后面追加 { parent.appendChild(newElement); } else //如果不是,就在newElement插在目标元素之后,目标元素的兄弟元素之前 { parent.insertBefore(newElement,targetElement.nextSibling); //下一个兄弟元素就是 ： targetElement.nextSibling } }
本章JS部分代码：
function preparePlaceholder(){ var body_para = document.getElementById("imagegallery"); var placeholder = document.createElement("img"); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src","images/placeholder.gif"); placeholder.setAttribute("alt","my image gallery"); var p_elem = document.createElement("p"); p_elem.setAttribute("id","description"); var txt = document.createTextNode("Choose an image"); p_elem.appendChild(txt); /* document.body.appendChild(placeholder); document.body.appendChild(p_elem); */ /* body_para.parentNode.insertBefore(placeholder,body_para); body_para.parentNode.insertBefore(p_elem,body_para); */ insetAfter(placeholder,body_para); insetAfter(p_elem,placeholder); }
投递美团等公司7个岗位 >
查看28道真题和解析
有被激励到
