René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第六天","articleBody":"# 动态创建标记\n## 一些传统方法\n### `document.write`\n\n为什么不使用 `document.write`?\n\n`document.write` 的最大缺点是它违背了“行为应该与结构分离”的原则。\nMIME 类型 application/xhtml+xml 与之不兼容，不会被执行。\n### `innerHTML` 属性\n\n支持读取和写入。\n## DOM 方法\n### `createElement` 方法\n\n``` javascript\n    document.createElement(nodeName);\n```\n### `appendChild` 方法\n\n``` javascript\n    parent.appendChild(child);\n```\n### `createTextNode` 方法\n\n``` javascript\n    document.createTextNode(text);\n```\n### 在已有元素前插入一个新元素\n\n``` javascript\n    parentElement.insertBefore(newElement,tagetElement);\n```\n\n我们不必关心父元素到底是谁，因为 targetElement 的 parentNode 就是。\n\n``` javascript\n    var gallery = document.getElementById(\"gallery\");\n    gallery.parentNode.insertBefore(\"p\",gallery);\n```\n### 在现有元素后插入一个新元素\n\n``` javascript\n    function insertAfter(newElement,targetElement){\n        var parent = targetElement.parentNode;\n        if(parent.lastChild == targetElement){\n            parent.appendChild(newElement);\n        } else {\n            parent.insertBefore(newElement,targetElement.nextSibling);\n        }\n    }\n```\n\n为了更好做到行为结构表现分离，我们应该去掉在上篇文章我们的代码结构中的\n\n```\n\u003cimg id=\"placeholder\"  src=\"images/codercat.jpg\" alt=\"\"\u003e\n\u003cp id=\"decription\"\u003e请选择一张图片\u003c/p\u003e\n```\n\n让我们来动态创建它们。下面是完成的代码，仔细体会实现下。\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-cmn-Hans\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003e1-4 案例研究： JavaScript 图片库\u003c/title\u003e\n    \u003cstyle\u003e\n\n        body {\n           margin: 1em 10%;\n           color: #333;\n           background-color: #ccc;\n           font-family: \"Helvetica\",\"Arial\",serif;\n        }\n\n        h1 {\n            color: #333;\n            background-color: rgba(0, 0, 0, 0);\n        }\n\n        a {\n            color: #c60;\n            background-color: rgba(0, 0, 0, 0);\n            font-weight: bold;\n            text-decoration: none;\n        }\n\n        ul {\n            padding: 0;\n        }\n\n        li {\n            float: left;\n            padding: 1em;\n            list-style-type: none;\n        }\n\n        img {\n            display: block;\n            clear: both;\n            width: 424px;\n            height: 424px;\n            border: 1px solid #ccc;\n        }\n    \u003c/style\u003e\n\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003ch1\u003eSnapshots\u003c/h1\u003e\n    \u003cul id=\"image-gallery\"\u003e\n        \u003cli\u003e\n            \u003ca href=\"images/codercat.jpg\"  title=\"This is codercat.jpg.\"\u003ecodercat\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"images/inspectocat.jpg\" title=\"This is inspectocat.jpg.\"\u003einspectocat\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"images/maxtocat.gif\" title=\"This is maxtocat.gif.\"\u003emaxtocat\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"images/yaktocat.png\" title=\"This is yaktocat.png.\"\u003eyaktocat\u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003ca href=\"images/octobiwan.jpg\" title=\"This isoctobiwan.jpg.\"\u003eoctobiwan\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003cscript src=\"1-7.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n``` javascript\nfunction addLoadEvent(func) {\n    var oldonload = window.onload;\n    if (typeof oldonload != 'function') {\n        window.onload = func;\n    } else {\n        window.onload = function() {\n            oldonload();\n            func();\n        }\n    }\n}\n\nfunction insertAfter(newElement, targetElement) {\n    var parent = targetElement.parentNode;\n    if (parent.lastChild == targetElement) {\n        parent.appendChild(newElement);\n    } else {\n        parent.insertBefore(newElement, targetElement.nextSlibing);\n    }\n}\n\nfunction preparePlaceholder() {\n    if (!document.createElement) return false;\n    if (!document.createTextNode) return false;\n    if (!document.getElementById) return false;\n    if (!document.getElementById(\"image-gallery\")) return false;\n    var placeholder = document.createElement(\"img\");\n    placeholder.setAttribute(\"id\", \"placeholder\");\n    placeholder.setAttribute(\"src\", \"images/codercat.jpg\");\n    placeholder.setAttribute(\"alt\", \"my image gallery\");\n\n    var description = document.createElement(\"p\");\n    description.setAttribute(\"id\", \"description\");\n    var desctext = document.createTextNode(\"choose an image\");\n    description.appendChild(desctext);\n\n    var gallery = document.getElementById(\"image-gallery\");\n    insertAfter(placeholder,gallery);\n    insertAfter(description,gallery);\n}\n\nfunction prepareGallery() {\n    if (!document.getElementsByTagName) return false;\n    if (!document.getElementById) return false;\n    if (!document.getElementById(\"image-gallery\")) return false;\n\n    var gallery = document.getElementById(\"image-gallery\");\n    var links = gallery.getElementsByTagName(\"a\");\n    for (var i = 0; i \u003c links.length; i++) {\n        links[i].onclick = function() {\n            return showPic(this);\n        }\n        links[i].onkeypress = links[i].onclick;\n    }\n}\n\nfunction showPic(whichpic) {\n    if (!document.getElementById(\"placeholder\")) return false;\n    var source = whichpic.getAttribute(\"href\");\n    placeholder.setAttribute(\"src\", source);\n\n    if (!document.getElementById(\"description\")) return false;\n    if (whichpic.getAttribute(\"title\")) {\n        var text = whichpic.getAttribute(\"title\");\n    } else {\n        var text = \"\";\n    }\n\n    var description = document.getElementById(\"description\");\n    if (description.firstChild.nodeType == 3) {\n        description.firstChild.nodeValue = text;\n    }\n    return false;\n}\n\naddLoadEvent(preparePlaceholder);\naddLoadEvent(prepareGallery);\n```\n\ndemo：[codepen](http://codepen.io/paddingme/pen/jEERab)\n## AJAX\n\nAJAX 依赖 JavaScript, 故可能有浏览器不支持他，而搜索引擎的蜘蛛程序也不会抓取到有关内容。\n\nAJAX 技术的核心是 XMLHttpRequest 对象。\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-22T15:07:04.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/10/Learning-JavaScript/issues/10"}